/* ============================================================
   ASAKHENI SA — Premium Shared System  ·  page modules
   ============================================================ */

/* =========================================================
   HOME HERO — immersive editorial masthead
   ========================================================= */
.hero{position:relative;padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--ink);
  border-radius:100px;padding:.5rem 1rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(56,118,29,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,118,29,.45)}70%{box-shadow:0 0 0 9px rgba(56,118,29,0)}100%{box-shadow:0 0 0 0 rgba(56,118,29,0)}}
@media (prefers-reduced-motion:reduce){.badge .dot{animation:none}}
.hero h1{margin:1.5rem 0 1.6rem}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* live studio meta row — cutting-edge detail */
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(1rem,4vw,2.6rem);margin-top:clamp(2rem,4vw,2.8rem);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.hero__meta>div{display:flex;flex-direction:column;gap:.35rem}
.hero__meta b{color:var(--ink);font-weight:600;letter-spacing:.1em;font-size:.78rem}
.hero__meta .live{color:var(--green)}

/* hero media — framed portrait with parallax */
.hero__media{position:relative;aspect-ratio:3/4;border:1px solid var(--line);overflow:hidden}
.hero__media img{transform:scale(1.06)}
.hero__media .tag{background:var(--blue)}
.hero__frameline{position:absolute;left:-1px;top:-1px;width:54px;height:54px;border-left:2px solid var(--blue);border-top:2px solid var(--blue);z-index:3}
.hero__frameline--br{left:auto;top:auto;right:-1px;bottom:-1px;border-left:none;border-top:none;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue)}

.scrollcue{display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(2rem,4vw,3rem);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.scrollcue .ln{width:46px;height:1px;background:var(--ink-55);position:relative;overflow:hidden}
.scrollcue .ln::after{content:"";position:absolute;inset:0;width:40%;background:var(--blue);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.scrollcue .ln::after{animation:none}}

/* =========================================================
   BEGINNINGS — editorial pull
   ========================================================= */
.beginnings__quote{border-left:3px solid var(--blue);padding-left:1.4rem;margin-top:.4rem}
.beginnings__media{aspect-ratio:4/5;border:1px solid var(--line);overflow:hidden}
.beginnings__media--wide{aspect-ratio:3/2}
.beginnings__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:920px){.beginnings__grid{grid-template-columns:1fr}}

/* =========================================================
   PROCESS — numbered editorial sequence w/ progress rail
   ========================================================= */
.steps{position:relative;border-top:1px solid var(--line)}
.steps__rail{position:absolute;left:0;top:0;width:2px;background:var(--blue);height:0;transition:height .2s linear}
.step{display:grid;grid-template-columns:minmax(86px,.5fr) 1.25fr 1.6fr;gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;padding-block:clamp(1.7rem,3vw,2.5rem);border-bottom:1px solid var(--line);
  transition:background .35s var(--ease),padding-left .35s var(--ease)}
.step:hover{background:rgba(47,125,146,.05);padding-left:.7rem}
.step__num{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3vw,2.4rem);color:var(--blue);letter-spacing:-.02em}
.step__title{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,2.7vw,2.4rem);letter-spacing:-.03em}
.step__desc{color:var(--ink-80);font-size:1.02rem;text-wrap:pretty}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.principle{border-top:2px solid var(--ink);padding-top:1rem}
.principle .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem}
.principle p{font-size:.96rem;color:var(--ink-80)}

/* =========================================================
   COLLABORATE / DARK FORM SECTION
   ========================================================= */
.collab__rows{margin-top:2rem}
.collab__row{display:flex;gap:1rem;align-items:baseline;border-top:1px solid var(--line-dark);padding-top:1.1rem;margin-top:1.1rem}
.collab__row h3{font-size:1.25rem;margin-bottom:.3rem;color:#fff}
.collab__row p{color:rgba(255,255,255,.6);font-size:.96rem}
.collab__row .ar{color:var(--blue-lt);font-family:var(--mono);font-size:1rem}

/* =========================================================
   GENERIC PAGE HERO (lab / accelerator / contact)
   ========================================================= */
.phero{position:relative;padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
/* full-bleed background photo for a dark hero — heavily overlaid for legibility */
.phero--media{padding-top:clamp(4.5rem,9vw,8rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
.phero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 35%;
  filter:grayscale(.1) brightness(.85) contrast(1.04);transform:scale(1.04)}
.phero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,14,14,.32) 0%,rgba(14,14,14,.4) 55%,rgba(14,14,14,.62) 100%),
  linear-gradient(90deg,rgba(14,14,14,.62) 0%,rgba(14,14,14,.32) 48%,rgba(14,14,14,.16) 100%)}
.phero--media .kicker,.phero--media h1,.phero--media .lede,.phero--media .statement{
  text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}
@media (max-width:760px){
  .phero__bg img{object-position:55% 30%;filter:grayscale(.1) brightness(.7) contrast(1.04)}
  .phero__bg::after{background:linear-gradient(180deg,rgba(14,14,14,.48),rgba(14,14,14,.72))}
}
.phero .statement{margin:1.6rem 0}
.phero__row{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:end}
@media (max-width:920px){.phero__row{grid-template-columns:1fr}}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.45rem .9rem;border-radius:100px;border:1px solid currentColor;width:fit-content}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse2 2.4s infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pill .dot{animation:none}}
.pill--open{color:var(--green)}
.pill--lab{color:var(--lab)}
.pill--blue{color:var(--blue-lt)}

/* =========================================================
   STAT COUNTERS (accelerator)
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
.stat{padding:clamp(1.5rem,3vw,2.4rem);border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat__n{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.04em;line-height:1;color:var(--blue)}
.stat__n.green{color:var(--green)}
.stat__l{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-top:.7rem;max-width:24ch}
@media (max-width:760px){.stats{grid-template-columns:1fr}.stat{border-right:none;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:none}}

/* =========================================================
   FEATURE TILES (lab MVP, accelerator inside)
   ========================================================= */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.6rem)}
.tile{position:relative;border:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2.1rem);background:var(--white);
  transition:transform .4s var(--ease-out),border-color .35s var(--ease),box-shadow .4s var(--ease)}
.tile:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 24px 50px -28px rgba(14,14,14,.4)}
.tile__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--lab);margin-bottom:1.4rem;text-transform:uppercase}
.tile h3{font-size:1.32rem;letter-spacing:-.02em;margin-bottom:.6rem}
.tile p{font-size:.95rem;color:var(--ink-80)}
.tile__ar{position:absolute;right:1.3rem;top:1.3rem;color:var(--ink-55);transition:transform .4s var(--ease-out),color .3s}
.tile:hover .tile__ar{transform:translate(3px,-3px);color:var(--blue)}
.dark .tile{background:#161616;border-color:var(--line-dark)}
.dark .tile:hover{border-color:#fff;box-shadow:none}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}

/* =========================================================
   PHASES (accelerator architecture / partners)
   ========================================================= */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.phase{padding:clamp(1.7rem,3vw,2.5rem);border-right:1px solid var(--line);position:relative;transition:background .35s var(--ease)}
.phase:last-child{border-right:none}
.phase:hover{background:rgba(47,125,146,.05)}
.phase__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--blue);margin-bottom:1.2rem;text-transform:uppercase}
.phase h3{font-size:1.5rem;margin-bottom:.7rem;letter-spacing:-.025em}
.phase p{font-size:.95rem;color:var(--ink-80)}
.phase__arrow{position:absolute;right:-12px;top:50%;width:24px;height:24px;background:var(--canvas);
  border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;z-index:2;color:var(--blue);font-size:.72rem;transform:translateY(-50%)}
.phase:last-child .phase__arrow{display:none}
@media (max-width:760px){
  .phases{grid-template-columns:1fr}
  .phase{border-right:none;border-bottom:1px solid var(--line)}
  .phase:last-child{border-bottom:none}
  .phase__arrow{display:none!important}
}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.tags span{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;padding:.55rem 1.05rem;
  border:1px solid rgba(255,255,255,.25);border-radius:100px;color:rgba(255,255,255,.85);transition:border-color .3s,color .3s}
.tags span:hover{border-color:#fff;color:#fff}
.tags span.accent{border-color:var(--blue-lt);color:var(--blue-lt)}

/* =========================================================
   INCUBATING / FEATURE CARD (lab) + Pawwsum product mock
   ========================================================= */
.feature-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);overflow:hidden;background:var(--white)}
.dark .feature-card{background:#161616;border-color:var(--line-dark)}
.feature-card__media{min-height:380px;position:relative;display:grid;place-items:center;background:var(--ink);overflow:hidden}
.feature-card__body{padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.feature-card__metric{display:flex;gap:2.4rem;flex-wrap:wrap;padding-top:.4rem}
.feature-card__metric .n{font-family:var(--display);font-weight:900;font-size:1.9rem;letter-spacing:-.02em}
.feature-card__metric .n.lab{color:var(--lab)}
.feature-card__metric .n.green{color:var(--green)}
.feature-card__metric .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55)}
@media (max-width:760px){.feature-card{grid-template-columns:1fr}.feature-card__media{min-height:300px}}

/* phone mock for Pawwsum */
.phone{width:min(260px,72%);aspect-ratio:9/19;background:#0a0a0a;border:8px solid #1d1d1d;border-radius:34px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 1px #000;padding:0;overflow:hidden;position:relative}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:18px;background:#000;border-radius:12px;z-index:4}
.phone__screen{position:absolute;inset:0;background:linear-gradient(180deg,#fff,#f6f5f2);display:flex;flex-direction:column;font-family:var(--body)}
.phone__bar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem .2rem;font-size:.6rem;font-weight:600;color:var(--ink);font-family:var(--mono)}
.phone__app{padding:1.3rem 1rem 1rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.phone__k{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lab)}
.phone__h{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.phone__chip{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:8px;padding:.55rem .65rem;font-size:.66rem;color:var(--ink-80);background:#fff}
.phone__chip .d{width:8px;height:8px;border-radius:50%;flex:none}
.phone__cta{margin-top:auto;background:var(--blue);color:#fff;text-align:center;border-radius:8px;padding:.62rem;font-size:.7rem;font-weight:600}
.phone__nav{display:flex;justify-content:space-around;padding:.5rem 0 .7rem;border-top:1px solid var(--line);font-size:.55rem;color:var(--ink-55);font-family:var(--mono);letter-spacing:.05em}
.phone__nav b{color:var(--blue)}

/* hybrid concept */
.hybrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem)}
.hybrid .card{border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.2rem);background:var(--white);transition:border-color .35s,transform .4s var(--ease-out)}
.hybrid .card:hover{border-color:var(--ink);transform:translateY(-4px)}
.hybrid .card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:1rem}
.hybrid .card h3{font-size:1.4rem;margin-bottom:.7rem;letter-spacing:-.02em}
.hybrid .card p{color:var(--ink-80);font-size:.97rem}
@media (max-width:760px){.hybrid{grid-template-columns:1fr}}

/* waitlist / cta card on dark */
.cta-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  border:1px solid var(--line-dark);padding:clamp(2rem,5vw,3.5rem);background:#161616;align-items:center;position:relative;z-index:1}
@media (max-width:760px){.cta-card{grid-template-columns:1fr}}

/* enquiry banner */
.enquiry{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.1rem);transition:border-color .35s}
.enquiry:hover{border-color:var(--ink)}
.enquiry h3{font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em}
.enquiry p{color:var(--ink-80);font-size:.97rem;margin-top:.3rem}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}
.info-rows{border-top:1px solid var(--line)}
.info-row{display:grid;grid-template-columns:.5fr 1.5fr;gap:1.5rem;padding-block:1.4rem;border-bottom:1px solid var(--line);align-items:baseline}
.info-row .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.info-row .v{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.55rem);letter-spacing:-.02em}
.info-row .v a:hover{color:var(--blue-lt)}
.frame-box{border:1px solid var(--line);padding:1.2rem 1.3rem;margin-top:1rem;transition:border-color .3s}
.frame-box:hover{border-color:var(--ink)}
.frame-box h3{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:.3rem}
.frame-box p{font-size:.94rem;color:var(--ink-80)}
.map-wrap{position:relative;margin-top:clamp(1.5rem,3vw,2rem);border:1px solid var(--line);aspect-ratio:16/9;overflow:hidden}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease)}
.map-wrap:hover iframe{filter:none}
@media (max-width:560px){.info-row{grid-template-columns:1fr;gap:.4rem}}

/* =========================================================
   MEDIA PLACEHOLDER (client-supplied slots)
   ========================================================= */
.ph{display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(45deg,#efeee9 0 13px,#f5f4f0 13px 26px);
  color:var(--ink-55);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.ph span{max-width:26ch;line-height:1.7}
.ph .pin{display:block;font-size:1.3rem;margin-bottom:.5rem;color:var(--lab)}
.dark .ph{background:repeating-linear-gradient(45deg,#1b1b1b 0 13px,#171717 13px 26px);color:rgba(255,255,255,.42)}

/* =========================================================
   RESPONSIVE (page)
   ========================================================= */
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{aspect-ratio:16/12;order:-1}
  .step{grid-template-columns:auto 1fr;gap:.4rem 1.2rem}
  .step__desc{grid-column:1/-1}
  .principles{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__cta .btn{flex:1;justify-content:center}
}