/* ============================================================
   FELLO v3 — extended sections  (rev 2: no frames, soft edges)
   Inherits all tokens from fello-styles-2.css
   ============================================================ */

/* ---------- shared section intro ---------- */
.sec-head{max-width:820px;}
.sec-head .eyebrow{display:block;}
.sec-head h2{font-size:clamp(36px,5vw,74px);margin:22px 0 0;}
.sec-head .lede{margin-top:26px;}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head.center .lede{margin-inline:auto;}
.lifestyle-head{margin-bottom:clamp(40px,6vh,72px);}

/* ============================================================
   1 · PRODUKT-DUO  (transparent family shot, floats freely)
   ============================================================ */
.duo-section{padding-block:clamp(110px,15vh,190px);overflow:hidden;text-align:center;}
.duo-media{position:relative;margin-top:clamp(40px,7vh,86px);display:grid;place-items:center;}
.duo-media .wash{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:min(80%,940px);aspect-ratio:1.7/1;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse,var(--accent-soft),rgba(24,182,176,0) 68%);
  filter:blur(54px);
}
.duo-media img{
  position:relative;z-index:1;width:min(1080px,94%);
  filter:drop-shadow(0 50px 60px rgba(0,0,0,0.12));will-change:transform;
}
.duo-tags{position:relative;z-index:2;margin-top:clamp(20px,3vh,40px);display:flex;justify-content:center;gap:clamp(28px,5vw,72px);flex-wrap:wrap;}
.duo-tag{display:flex;flex-direction:column;align-items:center;gap:8px;}
.duo-tag .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.duo-tag .v{font-family:var(--font-display);font-size:clamp(20px,2vw,28px);letter-spacing:-0.02em;}

/* ============================================================
   2 · PRODUCT DETAIL  (rotation loops float — no box, soft glow)
   ============================================================ */
.detail-section{padding-block:clamp(56px,8vh,104px);overflow:hidden;}
.detail-grid{display:grid;grid-template-columns:1.04fr 0.96fr;gap:clamp(40px,6vw,90px);align-items:center;}
.detail-grid.flip .detail-media{order:2;}
.detail-media{position:relative;display:grid;place-items:center;min-height:clamp(360px,46vh,560px);}
.detail-media .glow{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(96%,560px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(24,182,176,0) 24%, var(--accent-glow) 46%, rgba(24,182,176,0) 74%);
  filter:blur(30px);opacity:.9;
}
.detail-vid{position:relative;z-index:1;width:100%;max-width:480px;aspect-ratio:4/5;margin-inline:auto;
  border-radius:42px;overflow:hidden;
  background:linear-gradient(180deg,#FCFCFD,#F1F3F4);
  box-shadow:0 0 0 0.5px var(--hairline),0 30px 60px -46px rgba(20,40,50,0.2);}
.detail-vid .poster,.detail-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.detail-vid .poster{z-index:1;}
.detail-vid video{z-index:2;}
.detail-badge{
  position:absolute;left:7%;top:9%;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:0.5px solid rgba(255,255,255,0.7);
  box-shadow:0 8px 22px -12px rgba(0,0,0,0.2);
}
.detail-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:liveDot 2s var(--ease) infinite;}
@keyframes liveDot{0%{box-shadow:0 0 0 0 var(--accent-glow);}70%{box-shadow:0 0 0 7px rgba(24,182,176,0);}100%{box-shadow:0 0 0 0 rgba(24,182,176,0);}}
.detail-copy .eyebrow{display:block;}
.detail-copy h2{font-family:var(--font-display);font-weight:400;letter-spacing:-0.03em;line-height:1.04;font-size:clamp(34px,4.4vw,62px);margin:20px 0 0;}
.detail-copy h2 em{font-style:italic;}
.detail-copy .lede{margin-top:24px;}
.feat-list{margin-top:34px;display:flex;flex-direction:column;gap:4px;}
.feat{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:0.5px solid var(--hairline);}
.feat:first-child{border-top:none;}
.feat .fi{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);}
.feat .fi svg{width:18px;height:18px;}
.feat h4{margin:3px 0 3px;font-size:15.5px;font-weight:650;letter-spacing:-0.01em;}
.feat p{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.5;}

/* ============================================================
   3 · FARBVARIANTEN  (reuses .produkt / .over-grid / .pcard)
   ============================================================ */
.varianten .over-head{max-width:760px;}

/* ============================================================
   4 · LIFESTYLE  (Solution / Stories — large rounded modal cards)
   ============================================================ */
.lifestyle{position:relative;padding-block:clamp(40px,7vh,90px);}
.life-card{
  position:relative;width:100%;
  aspect-ratio:16/9;max-height:84vh;
  border-radius:clamp(32px,3.2vw,52px);
  overflow:hidden;
  box-shadow:0 0 0 0.5px var(--hairline),0 30px 64px -44px rgba(20,40,50,0.22);
}
.life-media{position:absolute;inset:0;overflow:hidden;}
.life-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1);transform-origin:center;will-change:transform;}
.life-panel{
  position:absolute;z-index:2;
  left:clamp(22px,3vw,52px);bottom:clamp(22px,3vw,52px);
  max-width:min(440px,76%);
  padding:clamp(26px,2.2vw,38px) clamp(26px,2.2vw,40px) clamp(28px,2.4vw,40px);
  border-radius:clamp(22px,1.8vw,30px);
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(34px) saturate(180%);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  border:0.5px solid rgba(255,255,255,0.7);
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset,0 30px 60px -28px rgba(20,40,50,0.34);
}
.lifestyle.right .life-panel{left:auto;right:clamp(22px,3vw,52px);}
.lf-eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:16px;}
.lf-head{font-family:var(--font-display);font-weight:400;color:var(--text-primary);letter-spacing:-0.03em;line-height:1.0;font-size:clamp(34px,3.8vw,58px);}
.lf-head em{font-style:italic;}
.lf-lede{margin-top:16px;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--text-secondary);max-width:40ch;text-wrap:pretty;}

/* solution points strip */
.sol-points{margin-top:clamp(40px,6vh,80px);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sol-card{
  padding:26px 24px 28px;border-radius:24px;background:var(--bg-base);border:0.5px solid var(--hairline);
  box-shadow:0 1px 2px rgba(0,0,0,0.03),0 22px 44px -30px rgba(0,0,0,0.14);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.sol-card:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(0,0,0,0.03),0 34px 60px -32px rgba(0,0,0,0.18);}
.sol-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);}
.sol-card h4{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,1.9vw,27px);margin:16px 0 10px;}
.sol-card p{margin:0;font-size:14.5px;color:var(--text-secondary);line-height:1.55;}

/* ============================================================
   5 · ARCHITEKTUR  (Context-Layer diagram — soft neumorphic nodes)
   ============================================================ */
.arch-section{background:#fff;padding-block:clamp(56px,8vh,100px);overflow:hidden;}
.arch-stage-wrap{margin-top:clamp(44px,7vh,90px);display:flex;justify-content:center;}
.arch-scaler{position:relative;}
.arch-stage{position:relative;width:1400px;height:660px;transform-origin:top center;}
.arch-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;}
.arch-conn{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.55;}
.arch-conn.hero{stroke-width:4;opacity:.9;}
.arch-flow{fill:var(--accent);opacity:0;}
.arch-node{
  position:absolute;z-index:2;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:20px 18px;border-radius:26px;
  background:linear-gradient(180deg,#FFFFFF,#F4F6F7);
  border:0.5px solid rgba(255,255,255,0.9);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 0.5px rgba(0,0,0,0.04),-8px -8px 22px rgba(255,255,255,0.8),14px 18px 38px -16px rgba(20,40,50,0.22);
  opacity:0;will-change:opacity,transform;
}
.arch-node .ic{width:46px;height:46px;color:var(--accent);margin-bottom:12px;}
.arch-node .ic svg{width:100%;height:100%;}
.arch-node .nt{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);}
.arch-node .ns{margin-top:8px;font-size:13px;color:var(--text-secondary);line-height:1.4;max-width:16ch;}
.arch-node.hero{background:linear-gradient(180deg,#FFFFFF,#EFFAF9);border:0.5px solid rgba(24,182,176,0.25);}
.arch-node.hero .nt{font-size:15px;}
.arch-core-glow{position:absolute;inset:-18px;border-radius:34px;z-index:-1;background:radial-gradient(circle,var(--accent-glow),rgba(24,182,176,0) 70%);filter:blur(14px);animation:archBreathe 3.6s var(--ease) infinite;}
@keyframes archBreathe{0%,100%{opacity:.5;transform:scale(.96);}50%{opacity:1;transform:scale(1.04);}}
.arch-sub{margin-top:14px;display:flex;flex-direction:column;gap:7px;width:100%;}
.arch-chip{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text-primary);padding:7px 12px;border-radius:12px;background:rgba(24,182,176,0.08);border:0.5px solid rgba(24,182,176,0.18);opacity:0;transform:translateY(6px);will-change:opacity,transform;}
.arch-end{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:108px;height:108px;border-radius:34px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.1em;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset,0 22px 44px -16px var(--accent-glow);opacity:0;will-change:opacity;}
.arch-pill{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:18px 30px;border-radius:24px;background:linear-gradient(180deg,#FFFFFF,#F4F6F7);border:0.5px solid rgba(255,255,255,0.9);box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 0.5px rgba(0,0,0,0.04),14px 18px 38px -18px rgba(20,40,50,0.2);opacity:0;will-change:opacity;}
.arch-pill .ic{width:30px;height:30px;color:var(--accent);flex:none;}
.arch-pill .lbl{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);white-space:nowrap;}
.arch-foundation{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:14px;width:1340px;height:74px;border-radius:24px;background:linear-gradient(180deg,#FFFFFF,#EEF1F2);border:0.5px solid rgba(255,255,255,0.9);box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 0.5px rgba(0,0,0,0.04),0 20px 40px -22px rgba(20,40,50,0.18);opacity:0;will-change:opacity;}
.arch-foundation .ic{width:28px;height:28px;color:var(--accent);flex:none;}
.arch-foundation .lbl{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}
.arch-fallback{display:none;margin-top:clamp(40px,7vh,80px);border-radius:24px;overflow:hidden;box-shadow:0 0 0 0.5px var(--hairline),0 30px 60px -30px rgba(0,0,0,0.2);}
.arch-fallback img{width:100%;}

/* ============================================================
   6 · APP — 3-screen showcase  (transparent phones, animated fan)
   ============================================================ */
.app3-section{position:relative;z-index:0;margin-top:-100svh;background:var(--bg-base);}
.app-pin{position:relative;height:260vh;}
.app-pin-stage{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:clamp(40px,7vh,90px);}
.app3-grid{position:relative;z-index:1;display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(40px,5vw,80px);align-items:center;}
.app3-copy h2{font-size:clamp(34px,4.6vw,66px);margin:22px 0 0;}
.app3-copy .lede{margin-top:26px;}
.app3-journey{margin-top:30px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-tertiary);}
.app3-journey b{color:var(--accent-deep);font-weight:600;}
.app3-journey .arw{color:var(--accent);}
.app-benefits{margin-top:36px;display:flex;flex-direction:column;gap:14px;}

.app3-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(540px,84vh,880px);}

/* single live prototype phone — the prototype draws its OWN device frame.
   JS measures that device and fits it exactly into this box (no second
   bezel, no background square, full device always visible). */
.app-phone-frame{
  position:relative;z-index:2;
  height:clamp(460px,80svh,840px);
  width:auto;aspect-ratio:361 / 852;   /* intrinsic width before JS refines it */
  max-width:100%;
  filter:drop-shadow(0 48px 70px rgba(16,34,42,0.26)) drop-shadow(0 14px 26px rgba(16,34,42,0.14));
}
.app-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;}
.app-proto{
  position:absolute;top:0;left:0;
  width:393px;height:960px;border:0;
  transform-origin:top left;background:transparent;
}
.app-scroll-cue{
  margin-top:30px;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.app-scroll-cue .cue-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);
}
@media (prefers-reduced-motion:no-preference){
  .app-scroll-cue .cue-dot{animation:appCueDot 2.4s var(--ease) infinite;}
}
@keyframes appCueDot{0%{box-shadow:0 0 0 0 rgba(24,182,176,0.5);}70%{box-shadow:0 0 0 9px rgba(24,182,176,0);}100%{box-shadow:0 0 0 0 rgba(24,182,176,0);}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .detail-grid{grid-template-columns:1fr;gap:40px;}
  .detail-grid.flip .detail-media{order:-1;}
  .detail-media{order:-1;}
  .sol-points{grid-template-columns:1fr 1fr;}
  .app3-grid{grid-template-columns:1fr;gap:40px;}
  .app3-stage{order:-1;min-height:0;}
  .app-pin{height:auto;}
  .app-pin-stage{position:static;min-height:0;padding-block:0;}
  .app-phone-frame{width:min(78vw,340px);height:auto;}
}
@media (max-width:760px){
  .sol-points{grid-template-columns:1fr;}
  /* stack the lifestyle cards: full photo on top, solid readable panel below
     (the desktop glass-overlay is too cramped on a phone) */
  .life-card{aspect-ratio:auto;max-height:none;height:auto;display:block;border-radius:24px;}
  .life-media{position:relative;inset:auto;width:100%;aspect-ratio:4/3;border-radius:24px 24px 0 0;}
  .life-media img{position:relative;}
  .life-panel,.lifestyle.right .life-panel{
    position:relative;left:auto;right:auto;bottom:auto;inset:auto;
    width:100%;max-width:none;border-radius:0 0 24px 24px;
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;padding:clamp(24px,6vw,34px);
  }
  .arch-stage-wrap{display:none;}
  .arch-fallback{display:block;}
  /* width-drive the live phone so it fills the column (no big side margins) */
  .app-phone-frame{width:min(84vw,360px);height:auto;}
}
/* phones: keep the live phone fully inside the viewport */
@media (max-width:480px){
  .app-phone-frame{width:min(88vw,340px);height:auto;}
}
/* tighten vertical rhythm on phones */
@media (max-width:600px){
  .section,.detail-section,.arch-section{padding-block:clamp(44px,9vw,72px);}
  .cta-section{padding-top:clamp(60px,12vw,96px);}
  .lifestyle{padding-block:clamp(32px,7vw,60px);}
  .sec-head h2{font-size:clamp(30px,8vw,46px);}
}