/* ============================================================================
   DEYWOS PRODUCT-UI MIRROR — all product visuals on the marketing site.
   Mirrors the mobile app design (currently app design v0.1 — raw).

   HOW TO RESTYLE AFTER AN APP REDESIGN:
   edit the tokens below (sync with mobile/src/config/theme.ts) and the
   component styles in THIS file only. Marketing pages never style product
   UI — they only mount <div data-dw-frame>, <div data-dw-phases>,
   <div data-dw-chip> and load dw-demo.js.
   ========================================================================== */
:root{
  /* --- design tokens · app v0.1 ------------------------------------------ */
  --dw-bg:            #000000;
  --dw-surface:       rgba(255,255,255,.04);
  --dw-surface-hi:    rgba(255,255,255,.06);
  --dw-line:          rgba(255,255,255,.10);
  --dw-line-soft:     rgba(255,255,255,.07);
  --dw-text:          rgba(255,255,255,.92);
  --dw-text-2:        rgba(255,255,255,.45);
  --dw-text-3:        rgba(255,255,255,.25);
  --dw-accent:        #C8C8C8;                 /* silver */
  --dw-accent-dim:    rgba(200,200,200,.35);
  --dw-glow:          rgba(255,255,255,.10);
  --dw-radius:        14px;
  --dw-radius-lg:     22px;
  --dw-font:          inherit;                  /* app uses light system stack */
}

/* --- phone frame ---------------------------------------------------------- */
.dw-frame{
  width:min(330px,88vw); margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--dw-line); border-radius:34px;
  padding:20px 18px 16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 26px 80px rgba(0,0,0,.55), 0 0 40px var(--dw-glow);
  font-family:var(--dw-font); text-align:left; user-select:none;
}
.dw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dw-head-title{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dw-text-2); font-weight:300; }
.dw-head-dot{ width:5px; height:5px; border-radius:50%; background:rgba(120,200,120,.55); }

/* --- dials ---------------------------------------------------------------- */
.dw-dial{ margin:0 0 13px; }
.dw-dial-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.dw-dial-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dw-text-2); font-weight:300; }
.dw-dial-val{ font-size:11px; color:var(--dw-text-3); font-variant-numeric:tabular-nums; }
.dw-range{ -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; display:block; cursor:pointer; }
.dw-range::-webkit-slider-runnable-track{ height:1px; background:var(--dw-line); }
.dw-range::-moz-range-track{ height:1px; background:var(--dw-line); }
.dw-range::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--dw-accent); border:none; margin-top:-6.5px; box-shadow:0 0 12px var(--dw-accent-dim); }
.dw-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--dw-accent); border:none; box-shadow:0 0 12px var(--dw-accent-dim); }

/* --- body map ------------------------------------------------------------- */
.dw-body-wrap{ display:flex; gap:14px; align-items:center; margin:4px 0 12px; padding:10px 12px;
  background:var(--dw-surface); border:1px solid var(--dw-line-soft); border-radius:var(--dw-radius); }
.dw-body-svg{ flex-shrink:0; }
.dw-body-svg .dw-outline{ stroke:rgba(255,255,255,.16); fill:none; stroke-width:1; }
.dw-zone{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.10); stroke-width:.5; cursor:pointer; transition:fill .25s, filter .25s; }
.dw-zone.on{ fill:rgba(200,200,200,.38); filter:drop-shadow(0 0 6px rgba(200,200,200,.45)); }
.dw-body-cap{ font-size:11px; line-height:1.6; color:var(--dw-text-3); letter-spacing:.02em; }

/* --- reading line ---------------------------------------------------------- */
.dw-reading{ min-height:34px; margin:0 0 12px; font-size:13px; line-height:1.55; font-weight:300;
  color:var(--dw-text); letter-spacing:.01em; }
.dw-reading em{ font-style:normal; color:var(--dw-text-2); }

/* --- matched protocol (locked) --------------------------------------------- */
.dw-proto{ display:flex; align-items:center; gap:12px; padding:11px 13px; margin-bottom:12px;
  background:var(--dw-surface); border:1px solid var(--dw-line-soft); border-radius:var(--dw-radius);
  opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease; }
.dw-proto.show{ opacity:1; transform:none; }
.dw-proto-lock{ flex-shrink:0; opacity:.5; }
.dw-proto-main{ flex:1; min-width:0; }
.dw-proto-name{ font-size:12px; color:var(--dw-text); font-weight:300; letter-spacing:.02em; margin:0 0 2px; }
.dw-proto-sub{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dw-text-3); }
.dw-proto-cta{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dw-accent-dim); white-space:nowrap; }

/* --- reflect button --------------------------------------------------------- */
.dw-reflect{ display:block; width:100%; padding:11px 0; text-align:center; cursor:pointer;
  background:linear-gradient(180deg,rgba(200,200,200,.10),rgba(200,200,200,.03));
  border:1px solid var(--dw-accent-dim); border-radius:var(--dw-radius);
  color:var(--dw-accent); font-family:inherit; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .2s, color .2s, box-shadow .2s; }
.dw-reflect:hover{ border-color:var(--dw-accent); color:#fff; box-shadow:0 0 18px rgba(200,200,200,.15); }
.dw-note{ margin:10px 2px 0; font-size:10px; line-height:1.5; color:var(--dw-text-3); text-align:center; letter-spacing:.02em; }

/* --- phase strip (protocol anatomy, locked) -------------------------------- */
.dw-phases{ margin-top:28px; padding:18px 20px 16px; background:var(--dw-surface);
  border:1px solid var(--dw-line-soft); border-radius:var(--dw-radius-lg); }
.dw-phases-track{ display:flex; gap:4px; margin-bottom:10px; }
.dw-phase{ flex:1; }
.dw-phase-bar{ height:3px; border-radius:2px; background:linear-gradient(90deg,rgba(200,200,200,.45),rgba(200,200,200,.15)); margin-bottom:8px; }
.dw-phase:nth-child(2) .dw-phase-bar{ opacity:.75 } .dw-phase:nth-child(3) .dw-phase-bar{ opacity:.55 } .dw-phase:nth-child(4) .dw-phase-bar{ opacity:.4 }
.dw-phase-name{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dw-text-2); margin:0 0 2px; }
.dw-phase-len{ font-size:10px; color:var(--dw-text-3); font-variant-numeric:tabular-nums; }
.dw-wave{ display:block; width:100%; height:26px; margin:8px 0 4px; opacity:.5; }
.dw-wave rect{ fill:rgba(200,200,200,.35); }
.dw-blur{ margin-top:10px; }
.dw-blur-line{ height:7px; border-radius:4px; background:rgba(255,255,255,.10); filter:blur(3px); margin-bottom:7px; }
.dw-blur-line:nth-child(2){ width:86%; } .dw-blur-line:nth-child(3){ width:64%; }
.dw-phases-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.dw-phases-lock{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dw-accent-dim); display:flex; align-items:center; gap:7px; }
.dw-phases-lib{ font-size:11px; color:var(--dw-text-3); line-height:1.5; text-align:right; }

/* --- state chip + bubble (How Deywos speaks) -------------------------------- */
.dw-chipcard{ max-width:520px; margin:0 0 26px; padding:16px 18px; background:var(--dw-surface);
  border:1px solid var(--dw-line-soft); border-radius:var(--dw-radius-lg); }
.dw-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px; margin-bottom:12px;
  background:rgba(200,200,200,.07); border:1px solid var(--dw-line-soft); border-radius:20px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dw-text-2); }
.dw-chip-dot{ width:4px; height:4px; border-radius:50%; background:var(--dw-accent-dim); }
.dw-bubble{ font-size:14px; line-height:1.65; font-weight:300; color:var(--dw-text); }
.dw-bubble::before{ content:"Deywos"; display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--dw-text-3); margin-bottom:5px; }

/* --- hero two-column layout ------------------------------------------------- */
.dw-hero-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; text-align:center; }
@media (min-width:960px){
  /* Pin the columns to the top. The frame grows the moment a dial is touched
     (read line + matched protocol appear); with centred alignment the row
     re-centres and shoves the headline down at exactly the moment someone
     first interacts with the product. */
  .dw-hero-grid{ grid-template-columns:1.05fr .95fr; text-align:left; align-items:start; }
  .dw-hero-grid .title-row{ justify-content:flex-start; }
  .dw-hero-grid .points{ margin-left:0; }
  .dw-hero-grid .tagline{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .dw-proto{ transition:none } }