/* Concrete Cutter homepage visual V2 */
.home-page {
  --home-glow: rgba(242, 140, 40, .28);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(242,140,40,.16), transparent 29rem),
    radial-gradient(circle at 12% 42%, rgba(93,113,128,.09), transparent 34rem),
    #0a0d0f;
}

.home-page .site-header {
  background: rgba(5,7,8,.82);
  border-bottom-color: rgba(255,255,255,.09);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 42px rgba(0,0,0,.18);
}
.home-page .site-header .container { min-height: 88px; }
.home-page .brand img { width: clamp(230px,20vw,310px); max-height:72px; transform:none; }
.home-page nav a { position:relative; padding-block:8px; }
.home-page nav a::after {
  content:""; position:absolute; right:0; bottom:2px; left:0; height:2px;
  border-radius:99px; background:var(--accent); transform:scaleX(0);
  transition:transform .18s ease;
}
.home-page nav a:hover::after,.home-page nav a:focus-visible::after { transform:scaleX(1); }

.home-page .hero {
  position:relative; isolation:isolate; min-height:670px;
  grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);
  gap:clamp(36px,5vw,72px);
  padding-block:clamp(54px,5.5vw,76px) clamp(64px,6vw,88px);
}
.home-page .hero::before {
  content:""; position:absolute; z-index:-2; top:8%; right:-16%; width:760px; height:760px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,140,40,.24),rgba(242,140,40,.08) 34%,transparent 69%);
  pointer-events:none;
}
.home-page .hero::after {
  content:""; position:absolute; z-index:-3; inset:0 -20vw; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
  pointer-events:none;
}
.home-page .hero-copy { position:relative; z-index:5; }
.home-page .hero-copy .eyebrow {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; padding:7px 12px;
  border:1px solid rgba(242,140,40,.34); border-radius:999px;
  background:rgba(242,140,40,.08); font-size:.78rem; letter-spacing:.13em;
}
.home-page .hero-copy .eyebrow::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 18px var(--accent);
}
.home-page .hero h1 {
  max-width:780px; margin-bottom:20px;
  font-size:clamp(3rem,4.6vw,4.75rem); line-height:.98; letter-spacing:-.052em;
  text-wrap:wrap; text-shadow:0 18px 55px rgba(0,0,0,.34);
}
.home-page .hero .lead {
  max-width:680px; margin:0; color:#cbd1d5;
  font-size:clamp(1.06rem,1.45vw,1.2rem); line-height:1.55; text-wrap:pretty;
}
.home-page .hero .actions { margin-top:26px; }
.home-page .hero .store-badge { height:54px; box-shadow:0 12px 34px rgba(0,0,0,.28); }
.home-page .hero .store-badge-apple img { height:54px; }
.home-page .hero .store-badge-google { width:181px; height:54px; }
.home-page .hero .store-badge-google img { height:70px; }
.home-page .hero .button.secondary {
  min-height:54px; padding-inline:22px; border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.035); backdrop-filter:blur(8px);
}
.home-page .hero-points { gap:10px; margin-top:20px; }
.home-page .hero-points li {
  padding:8px 12px; border:1px solid rgba(255,255,255,.09); border-radius:999px;
  background:rgba(255,255,255,.035); color:#d7dcdf; box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.home-page .hero-visual {
  position:relative; min-height:560px; display:grid; place-items:center;
  perspective:1400px; overflow:visible;
}
.home-page .hero-visual::before,.home-page .hero-visual::after {
  content:""; position:absolute; top:58px; width:min(230px,42%); height:485px;
  border:8px solid #080a0b; border-radius:34px;
  background-color:#090b0c; background-repeat:no-repeat; background-position:top center; background-size:cover;
  box-shadow:0 34px 85px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.16);
  filter:saturate(.94) brightness(.92); pointer-events:none;
}
.home-page .hero-visual::before {
  left:-8px; background-image:url("/assets/screen-weight.jpg");
  transform:rotate(-8deg) translateY(22px) scale(.92);
}
.home-page .hero-visual::after {
  right:-12px; background-image:url("/assets/screen-drilling.jpg");
  transform:rotate(8deg) translateY(34px) scale(.88);
}
.home-page .featured-phone {
  z-index:3; width:min(315px,58%); padding:9px; border-color:rgba(255,255,255,.25); border-radius:38px;
  transform:translateY(-6px);
  box-shadow:0 42px 110px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12),0 0 80px rgba(242,140,40,.14);
  animation:home-app-float 6s ease-in-out infinite;
}
.home-page .featured-phone img { border-radius:29px; }
.home-page .featured-phone::after {
  content:""; position:absolute; z-index:4; inset:-22px;
  border:1px solid rgba(242,140,40,.19); border-radius:54px;
  box-shadow:0 0 70px rgba(242,140,40,.12); pointer-events:none;
}
@keyframes home-app-float {
  0%,100% { transform:translateY(-6px); }
  50% { transform:translateY(-18px); }
}

.home-page .feature-section { position:relative; padding-block:88px 104px; }
.home-page .feature-section > h2,.home-page .showcase-section h2 {
  max-width:760px; font-size:clamp(2.35rem,4.8vw,4rem); letter-spacing:-.035em; text-wrap:balance;
}
.home-page .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
.home-page .feature {
  position:relative; min-height:170px; padding:27px; overflow:hidden;
  border-color:rgba(255,255,255,.09); border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.062),rgba(255,255,255,.018)),#111518;
  box-shadow:0 18px 48px rgba(0,0,0,.16);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.home-page .feature::before {
  content:""; position:absolute; top:0; left:26px; width:58px; height:3px;
  border-radius:0 0 9px 9px; background:var(--accent); box-shadow:0 0 22px rgba(242,140,40,.45);
}
.home-page .feature:hover {
  transform:translateY(-5px); border-color:rgba(242,140,40,.34);
  background:linear-gradient(150deg,rgba(242,140,40,.08),rgba(255,255,255,.018)),#121619;
}
.home-page .feature h3 { margin:8px 0 10px; font-size:1.22rem; }

.home-page .showcase-section {
  position:relative; overflow:hidden; padding-block:104px 118px;
  border-block-color:rgba(255,255,255,.08);
  background:radial-gradient(circle at 50% 115%,rgba(242,140,40,.12),transparent 34rem),linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.12));
}
.home-page .screenshot-grid { gap:20px; margin-top:52px; }
.home-page .screenshot-card {
  position:relative; padding:18px 14px 20px; border:1px solid rgba(255,255,255,.075);
  border-radius:24px; background:rgba(255,255,255,.018);
  transition:transform .22s ease,border-color .22s ease;
}
.home-page .screenshot-card:nth-child(2),.home-page .screenshot-card:nth-child(3) { transform:translateY(-18px); }
.home-page .screenshot-card:hover { transform:translateY(-8px) scale(1.015); border-color:rgba(242,140,40,.32); }
.home-page .screenshot-card:nth-child(2):hover,.home-page .screenshot-card:nth-child(3):hover { transform:translateY(-25px) scale(1.015); }
.home-page .screenshot-card .phone-frame { max-width:250px; border-color:rgba(255,255,255,.17); box-shadow:0 28px 70px rgba(0,0,0,.44); }

.home-page .feature-section[aria-labelledby="web-tools-heading"] {
  margin-block:96px; padding:clamp(32px,5vw,54px); overflow:hidden;
  border:1px solid rgba(242,140,40,.25); border-radius:28px;
  background:radial-gradient(circle at 100% 0%,rgba(242,140,40,.17),transparent 30rem),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),#101416;
  box-shadow:0 34px 90px rgba(0,0,0,.28);
}
.home-page .feature-section[aria-labelledby="web-tools-heading"] .tool-index { margin-top:34px; }
.home-page .feature-section[aria-labelledby="web-tools-heading"] .tool-index a {
  position:relative; padding:22px; border-color:rgba(255,255,255,.09); border-radius:16px;
  background:rgba(0,0,0,.18); transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.home-page .feature-section[aria-labelledby="web-tools-heading"] .tool-index a::after {
  content:"→"; position:absolute; top:18px; right:18px; color:var(--accent); font-size:1.2rem;
}
.home-page .feature-section[aria-labelledby="web-tools-heading"] .tool-index a:hover {
  transform:translateY(-3px); border-color:rgba(242,140,40,.38); background:rgba(242,140,40,.06);
}

.home-page .final-cta {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:44px; align-items:center;
  margin-block:14px 92px; padding:clamp(34px,5vw,58px); overflow:hidden;
  border:1px solid rgba(255,255,255,.10); border-radius:30px;
  background:radial-gradient(circle at 88% 18%,rgba(242,140,40,.24),transparent 22rem),linear-gradient(135deg,#171c20,#0e1214 72%);
  box-shadow:0 32px 90px rgba(0,0,0,.3);
}
.home-page .final-cta::before {
  content:""; position:absolute; right:-110px; bottom:-170px; width:390px; height:390px;
  border:48px solid rgba(242,140,40,.07); border-radius:50%; pointer-events:none;
}
.home-page .final-cta-copy,.home-page .final-cta .actions { position:relative; z-index:1; }
.home-page .final-cta h2 {
  max-width:680px; margin:0; font-size:clamp(2.2rem,4.4vw,3.8rem);
  line-height:1.03; letter-spacing:-.04em; text-wrap:balance;
}
.home-page .final-cta p:not(.eyebrow) { max-width:680px; margin-bottom:0; color:var(--muted); font-size:1.08rem; }
.home-page .final-cta .actions { margin:0; justify-content:flex-end; }
.home-page .final-cta .store-badge { box-shadow:0 13px 34px rgba(0,0,0,.32); }
.home-page .card-grid { padding-top:0; }
.home-page .card { border-color:rgba(255,255,255,.075); background:rgba(255,255,255,.025); }

@media (min-width:901px) and (max-height:950px) {
  .home-page .hero {
    min-height:620px;
    padding-block:52px 64px;
  }
  .home-page .hero h1 {
    font-size:clamp(3rem,4.2vw,4.25rem);
  }
  .home-page .hero .lead {
    font-size:1.08rem;
    line-height:1.5;
  }
  .home-page .hero .actions { margin-top:24px; }
  .home-page .hero-points { margin-top:18px; }
  .home-page .hero-visual { min-height:520px; }
  .home-page .hero-visual::before,.home-page .hero-visual::after {
    top:48px;
    width:min(218px,41%);
    height:455px;
  }
  .home-page .featured-phone { width:min(300px,57%); }
}

@media (max-width:1120px) {
  .home-page .hero { grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); gap:34px; }
  .home-page .hero-visual { min-height:560px; }
  .home-page .hero-visual::before,.home-page .hero-visual::after { width:205px; height:445px; }
  .home-page .featured-phone { width:min(300px,60%); }
}
@media (max-width:900px) {
  .home-page .hero { min-height:0; grid-template-columns:1fr; padding-top:72px; text-align:center; }
  .home-page .hero-copy { display:grid; justify-items:center; }
  .home-page .hero-visual { width:min(100%,620px); min-height:570px; margin-inline:auto; }
  .home-page .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-page .final-cta { grid-template-columns:1fr; text-align:center; }
  .home-page .final-cta-copy { display:grid; justify-items:center; }
  .home-page .final-cta .actions { justify-content:center; }
}
@media (max-width:720px) {
  .home-page .hero { padding-block:58px 76px; }
  .home-page .hero h1 { font-size:clamp(2.8rem,13.5vw,4.55rem); }
  .home-page .hero .lead { font-size:1.06rem; }
  .home-page .hero-visual { min-height:500px; }
  .home-page .hero-visual::before,.home-page .hero-visual::after { top:72px; width:172px; height:375px; border-width:6px; border-radius:27px; }
  .home-page .hero-visual::before { left:2%; }
  .home-page .hero-visual::after { right:2%; }
  .home-page .featured-phone { width:min(260px,62vw); }
  .home-page .feature-grid { grid-template-columns:1fr; }
  .home-page .screenshot-card:nth-child(2),.home-page .screenshot-card:nth-child(3) { transform:none; }
  .home-page .feature-section[aria-labelledby="web-tools-heading"] { margin-block:64px; border-radius:22px; }
  .home-page .final-cta { margin-bottom:68px; border-radius:22px; }
}
@media (max-width:520px) {
  .home-page .hero .actions { display:grid; width:100%; grid-template-columns:1fr; justify-items:center; }
  .home-page .hero .button.secondary { width:min(100%,356px); }
  .home-page .hero-points { width:100%; justify-items:stretch; }
  .home-page .hero-points li { text-align:center; }
  .home-page .hero-visual { min-height:435px; }
  .home-page .hero-visual::before,.home-page .hero-visual::after { top:74px; width:142px; height:310px; opacity:.78; }
  .home-page .featured-phone { width:min(225px,65vw); }
  .home-page .feature-section,.home-page .showcase-section { padding-block:68px; }
  .home-page .final-cta .actions { display:grid; justify-items:center; }
}