/* ==========================================================================
   Yene Stock — marketing site v2
   Centered, card-panel layout. Dark by default, light when the OS asks.
   Plain CSS, no build step, no external requests.
   ========================================================================== */

/* ---- Dark palette (default) ----
   Surface/text/border values follow the violet-tinted dark theme the client
   asked for. The accent stays Yene Stock's own brand indigo (#5066FB) so the
   buttons match the app icon in the header. */
:root{
  --brand:#5B54F0;         /* buttons / glow — brand indigo, violet-leaning */
  --brand-2:#8A7BFF;
  --brand-text:#A495FF;    /* eyebrow + link hover on dark  */

  --page:#171522;          /* outermost background            */
  --panel:#1C182A;         /* the big rounded content panel   */
  --panel-2:#221E33;       /* nested panel inside it          */
  --card:#272139;          /* individual feature cards        */
  --border:#3D3654;
  --border-soft:#2E2842;

  --text:#EFEDFA;
  --text-2:#B8B0D0;
  --text-3:#847CA3;

  --badge-bg:#FFFFFF;
  --badge-fg:#171522;

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;

  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  --wrap:1060px;

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
         "Noto Sans Ethiopic", Arial, sans-serif;
}

/* ---- Light palette ----
   Tinted to the same violet family so light and dark read as one design. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --page:#F8F4FF;
    --panel:#FEFBFF;
    --panel-2:#F4EFFF;
    --card:#FFFFFF;
    --border:#DDD2F3;
    --border-soft:#E7DEF8;

    --text:#21183A;
    --text-2:#5F547C;
    --text-3:#8B81A6;

    --brand-text:#6B4FD4;

    --badge-bg:#21183A;
    --badge-fg:#FFFFFF;

    --shadow:0 24px 60px -24px rgba(83,60,166,.20);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,h4{margin:0 0 .5em; line-height:1.12; font-weight:700; letter-spacing:-.03em}
h1{font-size:clamp(2.1rem, 5.6vw, 3.5rem)}
h2{font-size:clamp(1.6rem, 3.4vw, 2.3rem)}
h3{font-size:1.06rem; letter-spacing:-.02em}
p{margin:0 0 1rem}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:12px 18px}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px}

/* The whole site sits in a centered column with breathing room on the sides. */
.page{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:18px 20px 0;
}

/* ==========================================================================
   Header — its own floating rounded bar
   ========================================================================== */
.topbar{
  position:sticky; top:14px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.02rem; letter-spacing:-.02em}
.brand img{border-radius:9px}

.nav{display:flex; align-items:center; gap:26px}
.nav a{font-size:.92rem; font-weight:600; color:var(--text-2); transition:color .15s ease}
.nav a:hover{color:var(--text)}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:9px;
  background:none; border:1px solid var(--border); border-radius:11px; cursor:pointer;
}
.nav-toggle span{display:block; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   Main panel — everything centered inside one big rounded card
   ========================================================================== */
.panel{
  margin-top:18px;
  padding:clamp(32px, 5vw, 60px) clamp(18px, 4vw, 48px) clamp(40px, 5vw, 64px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  text-align:center;
}

/* ---------- Hero ---------- */
.hero{position:relative}

.hero h1{margin-top:14px}
.lede{
  max-width:56ch; margin:0 auto 30px;
  font-size:clamp(1rem, 1.5vw, 1.14rem);
  color:var(--text-2);
}
.micro{margin:18px 0 0; font-size:.83rem; color:var(--text-3)}

/* Device cluster — big centre phone flanked by two smaller ones */
.devices{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:clamp(24px, 4vw, 40px);
  min-height:clamp(260px, 34vw, 380px);
}
.devices::after{                       /* soft brand glow behind the cluster */
  content:""; position:absolute; z-index:0;
  width:min(560px, 80%); height:74%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--brand) 34%, transparent), transparent 70%);
  filter:blur(56px);
}
.device{
  position:relative; z-index:1;
  border:6px solid #151221;
  background:#151221;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.6);
}
.device img{border-radius:19px}
.device.main{width:clamp(160px, 22vw, 216px); z-index:3}
.device.side{width:clamp(128px, 17.5vw, 172px); z-index:2; opacity:.94}
.device.side.left{transform:rotate(-7deg) translateX(16%)}
.device.side.right{transform:rotate(7deg) translateX(-16%)}

/* ---------- Store badges ----------
   Five platforms, so the row is capped and allowed to wrap into a balanced
   block rather than stretching into one long cramped line. */
.store-badges{
  display:flex; flex-wrap:wrap; gap:11px; justify-content:center;
  max-width:720px; margin-inline:auto;
}
.store-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 13px; border-radius:12px;
  background:var(--badge-bg); color:var(--badge-fg);
  transition:transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}
.store-badge svg{width:23px; height:23px; fill:currentColor; flex:none}
.store-badge span{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.store-badge small{font-size:.64rem; opacity:.75}
.store-badge strong{font-size:.98rem; font-weight:600; letter-spacing:-.01em}

@media (prefers-reduced-motion: reduce){ .store-badge:hover{transform:none} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px;
  font-weight:600; font-size:.94rem; cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:#4C45E0; transform:translateY(-1px)}
.btn-ghost{border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-text)}

@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none} }

/* ==========================================================================
   Nested panel (Why / Pricing)
   ========================================================================== */
.inner-panel{
  margin-top:clamp(40px, 6vw, 76px);
  padding:clamp(32px, 4.5vw, 56px) clamp(20px, 3.5vw, 42px);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
    var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
}
.inner-panel.slim{padding-block:clamp(30px, 4vw, 44px)}

.eyebrow{
  margin:0 0 10px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  color:var(--brand-text);
}
.inner-panel .sub{
  max-width:58ch; margin:0 auto;
  color:var(--text-2); font-size:1rem;
}

/* ---------- Feature cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  margin-top:clamp(28px, 4vw, 42px);
  text-align:left;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 20px;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 40%, var(--border))}
.card h3{margin-bottom:7px}
.card p{margin:0; font-size:.9rem; color:var(--text-2); line-height:1.6}

@media (prefers-reduced-motion: reduce){ .card:hover{transform:none} }

.icon{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:15px}
.icon svg{width:21px; height:21px}

/* One accent per card, like the reference's multicoloured icon tiles. */
.i-indigo {background:rgba( 91, 84,240,.18)} .i-indigo  svg{fill:#A495FF}
.i-amber  {background:rgba(245,166, 35,.16)} .i-amber   svg{fill:#F5A623}
.i-emerald{background:rgba( 16,185,129,.16)} .i-emerald svg{fill:#10B981}
.i-sky    {background:rgba( 56,163,235,.16)} .i-sky     svg{fill:#38A3EB}
.i-violet {background:rgba(164,149,255,.18)} .i-violet  svg{fill:#C3B6FF}
.i-rose   {background:rgba(244, 99,133,.16)} .i-rose    svg{fill:#F46385}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .i-indigo svg{fill:#5B4FD8}
  :root:not([data-theme="dark"]) .i-violet svg{fill:#7A5FE6}
}

/* ---------- Pricing actions ---------- */
.price-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{padding:clamp(40px, 6vw, 64px) clamp(4px, 3vw, 30px) 40px; text-align:center}

.footer-cols{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  padding-bottom:34px; text-align:left;
  border-bottom:1px solid var(--border);
}
.site-footer h4{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--text-3); margin-bottom:13px; font-weight:700;
}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.site-footer ul a{font-size:.91rem; color:var(--text-2); transition:color .15s ease}
.site-footer ul a:hover{color:var(--brand-text)}

.copyright{margin:26px 0 0; font-size:.85rem; color:var(--text-3)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px){
  .cards{grid-template-columns:repeat(2, 1fr)}
  .footer-cols{grid-template-columns:repeat(2, 1fr); gap:30px}
}

/* Between the mobile stack and the full 5-across row, cap the badge row so it
   wraps to a balanced 3 + 2 instead of a lopsided 4 + 1. */
@media (min-width: 681px) and (max-width: 1000px){
  .store-badges{max-width:530px}
}

@media (max-width: 680px){
  .page{padding-inline:14px}
  .nav-toggle{display:flex}
  .nav{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; gap:0; align-items:stretch;
    padding:8px 16px 14px;
    background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    transform:scale(.97); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.open{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:13px 2px; border-bottom:1px solid var(--border-soft); font-size:.98rem}
  .nav a:last-child{border-bottom:none}

  .devices{min-height:230px}
  .device.side{opacity:.85}
  .device.side.left{transform:rotate(-8deg) translateX(26%)}
  .device.side.right{transform:rotate(8deg) translateX(-26%)}

  .store-badge{flex:1 1 100%; justify-content:center}
}

@media (max-width: 460px){
  .cards{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr; gap:24px}
  .device.side{display:none}
  .device.main{width:200px}
  .devices{min-height:auto}
  .devices::after{width:100%}
}

@media print{
  .topbar,.nav-toggle{display:none}
  .reveal{opacity:1; transform:none}
  .panel,.inner-panel{box-shadow:none; border-color:#ccc}
}