/* sections.css — what-we-build, featured products, ecosystem, impact band, life, insights, cta */

/* ---------- what we build ---------- */
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.build-card{background:var(--pink-card);border-radius:22px;padding:28px 22px 0 26px;display:grid;grid-template-columns:1fr auto;gap:12px;overflow:hidden;min-height:330px;transition:transform .3s,box-shadow .3s}
.build-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.build-card h3{font-size:19px;font-weight:800;color:var(--red);margin-bottom:8px}
.build-card>.bc-copy>p{font-size:13px;color:var(--body);margin-bottom:18px;line-height:1.5}
.bc-copy ul{display:grid;gap:11px}
.bc-copy li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.li-ico{width:26px;height:26px;border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 3px 8px rgba(160,20,30,.08)}

/* small phone mock (shared) */
.phone-sm{width:150px;height:300px;border-radius:24px;padding:6px;align-self:end;margin-bottom:-40px}
.phone-sm .ph-screen{border-radius:19px;padding:16px 12px;font-size:11px}

.auth-mock .am-title{font-size:12px;font-weight:700;color:var(--muted)}
.am-code{font-size:22px;font-weight:800;letter-spacing:.04em;margin:8px 0 12px}
.am-row{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:600;padding:7px 0;border-bottom:1px solid #F2F2F4}
.am-row b{margin-left:auto;font-size:9.5px;color:var(--body)}
.sq{width:16px;height:16px;border-radius:5px;flex:none}
.sq.g{background:#EA4335}.sq.f{background:#1877F2}.sq.d{background:#0061FF}.sq.k{background:#24292F}

.plan-mock .am-title{font-size:14px;font-weight:800;color:var(--ink)}
.pm-item{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;background:#F7F7F9;border-radius:10px;padding:9px 10px;margin-top:8px}
.pm-item i{font-style:normal;font-size:11px}
.pm-item.hl{background:#FBE9E7}
.pm-fab{position:absolute;right:12px;bottom:12px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}


/* ---------- featured products (auto carousel) ---------- */
.feat-wrap{position:relative}
.feat-viewport{overflow:hidden}
.feat-grid{display:flex;gap:22px;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.feat-card{flex:0 0 calc((100% - 44px)/3)}
.feat-card{background:var(--pink-card);border-radius:22px;padding:26px 20px 0 26px;display:grid;grid-template-columns:1fr auto;gap:14px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fc-ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,#E02234,#8F0E1B);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 10px 20px -8px rgba(211,27,43,.5)}
.fc-ico svg{width:22px;height:22px}
.feat-card h3{font-size:17px;font-weight:800;color:var(--red)}
.fc-tag{font-size:12.5px;font-weight:600;margin:2px 0 10px}
.fc-desc{font-size:12px;color:var(--body);line-height:1.55;margin-bottom:14px}
.fc-dl{font-size:12.5px;font-weight:700}
.fc-rate{font-size:12px;font-weight:700;margin:4px 0 20px}
.stars{color:#F5A623;letter-spacing:2px}
.feat-card .phone-sm{margin-bottom:-34px;width:140px;height:280px}
.feat-next{position:absolute;right:-16px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14);font-size:22px;color:var(--ink);line-height:1;z-index:3;transition:background .2s,color .2s}
.feat-next:hover{background:var(--red);color:#fff}
.feat-dots{display:flex;gap:7px;justify-content:center;margin-top:30px}
.feat-dots i{width:7px;height:7px;border-radius:50%;background:#E4D6D4;transition:background .2s,width .2s}
.feat-dots i.on{background:var(--red);width:18px;border-radius:4px}

/* ---------- ecosystem ---------- */
.eco{background:#fff;padding-top:40px}
.eco-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.eco-copy h2{margin-bottom:16px}
.eco-lead{font-size:14px;color:var(--body);margin-bottom:26px}
.eco-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative;margin-bottom:36px}
.eco-steps::before{content:'';position:absolute;top:24px;left:10%;right:10%;border-top:2px dashed #F0D9D6;z-index:0}
.eco-steps li{text-align:center;position:relative;z-index:1}
.es-ico{width:48px;height:48px;border-radius:50%;background:#FBEFEC;display:inline-flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:9px;box-shadow:inset 0 0 0 1.5px #F3DEDA}
.eco-steps b{display:block;font-size:13.5px;font-weight:700}
.eco-steps small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.eco-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.et{background:#FDF7F6;border:1px solid #F5E7E4;border-radius:16px;padding:20px 16px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.et:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#EFC9C4}
.et .es-ico{width:40px;height:40px;font-size:16px;background:#fff}
.et b{display:block;font-size:13.5px;font-weight:700}
.et small{display:block;font-size:11px;color:var(--muted);line-height:1.45;margin-top:4px}

/* ---------- impact band ---------- */
.impact{position:relative;background:radial-gradient(120% 160% at 80% 20%,#B4121F 0%,#8F0E1B 45%,#5E060F 100%);color:#fff;padding:76px 0;overflow:hidden}
.impact-map{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.22) 1.3px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:radial-gradient(70% 100% at 72% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 100% at 72% 50%,#000 30%,transparent 75%);opacity:.5}
.impact-map::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 68% 38%,rgba(255,120,120,.9) 0 3px,transparent 6px),
  radial-gradient(circle at 78% 55%,rgba(255,120,120,.8) 0 2.5px,transparent 6px),
  radial-gradient(circle at 58% 60%,rgba(255,120,120,.8) 0 2.5px,transparent 6px),
  radial-gradient(circle at 86% 34%,rgba(255,150,150,.7) 0 2px,transparent 5px),
  radial-gradient(circle at 63% 26%,rgba(255,150,150,.7) 0 2px,transparent 5px);
  animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.impact-inner{position:relative;z-index:1}
.impact h2{max-width:520px}
.impact-stats{display:flex;gap:64px;flex-wrap:wrap;margin-top:38px}
.impact-stats b{font-size:34px;font-weight:800;display:block;line-height:1.1}
.impact-stats span{font-size:13px;color:#FFC9CD}

/* ---------- life at supernova ---------- */
.life-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center}
.life-copy h2{margin-bottom:24px}
.life-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.life-photos figure{min-width:0}
.life-photos .ph{aspect-ratio:4/3.4;border-radius:16px;background-size:cover;background-position:center;transition:transform .3s,box-shadow .3s}
.life-photos figure:hover .ph{transform:translateY(-5px);box-shadow:var(--shadow)}
.life-photos figcaption{font-size:12.5px;font-weight:600;margin-top:10px}
/* placeholder gradients until real photos dropped into images/ */
.ph.p1{background-image:linear-gradient(150deg,#3E3F49,#191A20),radial-gradient(circle at 30% 30%,rgba(211,27,43,.35),transparent 60%)}
.ph.p2{background-image:linear-gradient(150deg,#C9CCD6,#8E93A3),radial-gradient(circle at 70% 30%,rgba(255,255,255,.5),transparent 60%)}
.ph.p3{background-image:linear-gradient(150deg,#4A4B55,#23242B),radial-gradient(circle at 60% 70%,rgba(211,27,43,.3),transparent 55%)}
.ph.p4{background-image:linear-gradient(150deg,#7FA8C9,#41678A),radial-gradient(circle at 40% 20%,rgba(255,255,255,.35),transparent 55%)}

/* ---------- insights ---------- */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.news-card{background:#FDF7F6;border:1px solid #F5E7E4;border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s;display:grid;grid-template-columns:96px 1fr}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.nc-img{background-size:cover;background-position:center;min-height:130px}
.nc-img.i1{background-image:linear-gradient(150deg,#F3D9D6,#E9BCB7),radial-gradient(circle at 50% 45%,rgba(211,27,43,.5) 0 18px,transparent 30px)}
.nc-img.i2{background-image:linear-gradient(150deg,#8F0E1B,#40060C),radial-gradient(circle at 50% 40%,rgba(255,120,120,.55) 0 14px,transparent 28px)}
.nc-img.i3{background-image:linear-gradient(150deg,#C4172A,#6E0A13),radial-gradient(circle at 55% 45%,rgba(255,180,180,.5) 0 12px,transparent 26px)}
.nc-img.i4{background-image:linear-gradient(150deg,#9DB8D2,#5E7FA0),linear-gradient(0deg,rgba(255,255,255,.2),rgba(255,255,255,.2))}
.nc-body{padding:16px 16px 14px;display:flex;flex-direction:column}
.nc-tag{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--red);margin-bottom:7px}
.news-card h4{font-size:13.5px;font-weight:700;line-height:1.4;flex:1}
.nc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:var(--muted)}
.nc-foot span{color:var(--red);font-weight:700}

/* ---------- cta ---------- */
.cta{background:linear-gradient(120deg,#D31B2B 0%,#8F0E1B 100%);border-radius:24px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff;position:relative;overflow:hidden}
.cta::after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:36px solid rgba(255,255,255,.07)}
.cta-left{display:flex;align-items:center;gap:22px}
.cta-ico{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none}
.cta-ico svg{width:30px;height:30px}
.cta h2{font-size:clamp(22px,2.8vw,32px)}
.cta p{font-size:13.5px;color:#FFD3D6;margin-top:6px}
.cta .btn{position:relative;z-index:1;white-space:nowrap}

/* ---------- responsive ---------- */
/* vpn phone mock */

@media(max-width:1060px){
  .build-grid{grid-template-columns:1fr 1fr}
  .feat-card{flex-basis:calc((100% - 22px)/2)}
  .news-grid{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:1fr}
  .life-grid{grid-template-columns:1fr}
  .life-photos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  /* what-we-build: horizontal snap slider on mobile */
  .build-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:4px 24px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .build-grid::-webkit-scrollbar{display:none}
  .build-card{flex:0 0 80%;scroll-snap-align:center;min-height:280px;grid-template-columns:1fr auto}
  .build-card .phone-sm{width:124px;height:250px;margin-bottom:-34px}
  .feat-card{flex-basis:100%}
  .news-grid{grid-template-columns:1fr}
  .eco-steps{grid-template-columns:repeat(2,1fr);gap:20px}
  .eco-steps::before{display:none}
  .eco-tiles{grid-template-columns:1fr 1fr}
  .impact-stats{gap:32px}
  .cta{flex-direction:column;text-align:center;padding:36px 24px}
  .cta-left{flex-direction:column}
  .feat-next{display:none}
}