/* ============================================================
   Case-study page styles — Apple-inspired design system
   Tokens: text #1d1d1f / secondary #6e6e73 / accent #0071E3
   bg #fff / dark #0a0a0d / surface #f5f5f7 / border #ededf2
   ============================================================ */

:root{
  --ink:#1d1d1f; --ink2:#6e6e73; --accent:#0071E3; --accent-h:#006EDB;
  --bg:#ffffff; --dark:#0a0a0d; --surface:#f5f5f7; --border:#ededf2;
  --maxw:1200px;
}

.case-page{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.case-page *{box-sizing:border-box;}
.case-page a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---- Nav ---- */
.cnav{position:fixed;top:0;left:0;width:100%;height:56px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  background:rgba(255,255,255,0.8);border-bottom:1px solid rgba(0,0,0,0.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);}
.cnav .brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-0.01em;white-space:nowrap;}
.cnav .brand svg{transition:transform .25s ease;}
.cnav .brand:hover svg{transform:translateX(-3px);}
.cnav-links{display:flex;align-items:center;gap:28px;}
.cnav-links a{font-size:15px;font-weight:500;color:var(--ink2);transition:color .2s ease;}
.cnav-links a:hover{color:var(--ink);}
.cnav-links a.accent{color:var(--accent);font-weight:600;}
.cnav-links a.accent:hover{color:var(--accent-h);}

/* ---- Hero (dark) ---- */
.case-hero{background:var(--dark);color:#fff;padding:128px 0 64px;position:relative;overflow:hidden;}
.case-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% -10%,rgba(0,113,227,0.20),transparent 60%);}
.case-hero .wrap{position:relative;z-index:1;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;font-weight:600;color:#9fb6d6;margin-bottom:20px;}
.eyebrow .dot{opacity:.5;}
.case-hero h1{margin:0;max-width:16ch;font-size:clamp(34px,5.4vw,64px);line-height:1.04;
  letter-spacing:-0.03em;font-weight:600;}
.case-hero .lead{margin:22px 0 0;max-width:60ch;font-size:clamp(17px,2vw,20px);
  line-height:1.6;color:rgba(255,255,255,0.72);}
.meta-row{display:flex;flex-wrap:wrap;gap:36px;margin-top:40px;}
.meta-row .k{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:6px;}
.meta-row .v{font-size:16px;font-weight:500;color:rgba(255,255,255,0.92);}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.btn{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 26px;border-radius:980px;
  font-size:16px;font-weight:500;transition:background .2s ease,transform .2s ease,border-color .2s ease,color .2s ease;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.18);}
.btn-ghost:hover{background:rgba(255,255,255,0.14);transform:translateY(-1px);}
.btn-mail{background:#f5f5f7;color:#1d1d1f;border:1px solid #ededf2;}
.btn-mail:hover{background:#ededf2;border-color:#e0e0e6;transform:translateY(-1px);}
.btn svg{flex-shrink:0;}
.metrics{display:flex;flex-wrap:wrap;gap:44px;margin-top:52px;padding-top:34px;border-top:1px solid rgba(255,255,255,0.12);}
.metrics .num{font-size:clamp(30px,4vw,40px);font-weight:600;letter-spacing:-0.02em;line-height:1;}
.metrics .lab{margin-top:8px;font-size:13px;color:rgba(255,255,255,0.6);}

/* ---- Big screenshot ---- */
.shot{background:var(--bg);padding:0;}
.shot .frame{max-width:var(--maxw);margin:-40px auto 0;position:relative;z-index:2;
  border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--border);
  box-shadow:0 40px 90px -50px rgba(0,0,0,0.45);}
.shot .bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);}
.shot .bar i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.shot .bar .u{margin-left:14px;flex:1;max-width:320px;height:23px;border-radius:7px;background:#fff;
  border:1px solid #e6e6eb;display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--ink2);}
.shot .frame img{display:block;width:100%;height:auto;}

/* ---- Body ---- */
.case-body{padding:96px 0 24px;}
.sect{padding:0 0 72px;}
.sect .eyebrow{color:var(--accent);}
.sect h2{margin:0 0 20px;font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-0.025em;font-weight:600;}
.sect p{margin:0 0 16px;font-size:18px;line-height:1.68;color:#333336;max-width:68ch;}
.sect .lead-p{font-size:20px;color:var(--ink);}

.bullets{list-style:none;margin:0;padding:0;max-width:70ch;}
.bullets li{position:relative;padding:0 0 0 30px;margin:0 0 16px;font-size:18px;line-height:1.6;color:#333336;}
.bullets li::before{content:'';position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent);}

/* numbered process */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px;}
.step{border:1px solid var(--border);border-radius:14px;padding:30px 30px 32px;background:#fff;}
.step .n{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:0.04em;}
.step h3{margin:12px 0 10px;font-size:20px;font-weight:600;letter-spacing:-0.01em;}
.step p{margin:0;font-size:16px;line-height:1.6;color:var(--ink2);max-width:none;}

/* figma callout */
.callout{margin:8px 0 0;border:1px solid var(--border);border-radius:14px;background:var(--surface);
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.callout .t{font-size:16px;color:var(--ink2);max-width:52ch;}
.callout .t b{color:var(--ink);font-weight:600;}

/* link with arrow */
.arrow{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--accent);
  transition:gap .2s ease,color .2s ease;white-space:nowrap;}
.arrow:hover{gap:13px;color:var(--accent-h);}

/* results band */
.results{background:var(--surface);border-radius:20px;padding:48px;margin-top:4px;}
.results .row{display:flex;flex-wrap:wrap;gap:48px;}
.results .num{font-size:clamp(34px,4.4vw,48px);font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--ink);}
.results .lab{margin-top:10px;font-size:14px;color:var(--ink2);}

/* bottom CTA + prev/next */
.endcta{padding:8px 0 0;}
.endcta .box{border-top:1px solid var(--border);padding-top:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.endcta h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-0.02em;}
.endcta .links{display:flex;gap:14px;flex-wrap:wrap;}

.prevnext{display:flex;justify-content:space-between;gap:16px;padding:64px 0 0;}
.prevnext a{flex:1;border:1px solid var(--border);border-radius:14px;padding:22px 24px;transition:border-color .2s ease,transform .2s ease;}
.prevnext a:hover{border-color:#d6d6dc;transform:translateY(-2px);}
.prevnext .dir{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink2);}
.prevnext .ttl{margin-top:7px;font-size:17px;font-weight:600;color:var(--ink);}
.prevnext .next{text-align:right;}
.prevnext .ph{flex:1;}

/* footer */
.cfoot{background:var(--dark);color:#fff;margin-top:104px;padding:40px 0;}
.cfoot .row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.cfoot .name{font-weight:600;}
.cfoot a{color:rgba(255,255,255,0.7);font-size:14px;transition:color .2s ease;}
.cfoot a:hover{color:#fff;}
.cfoot .copy{font-size:13px;color:rgba(255,255,255,0.6);}

/* burger (shared visual with main site) */
.cnav-burger{display:none;background:none;border:0;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;}
.cnav-burger-box{position:relative;display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:background .2s ease;}
.cnav-burger-box::before,.cnav-burger-box::after{content:'';position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.cnav-burger-box::before{top:-7px;}
.cnav-burger-box::after{top:7px;}
.cnav.nav-open .cnav-burger-box{background:transparent;}
.cnav.nav-open .cnav-burger-box::before{transform:translateY(7px) rotate(45deg);}
.cnav.nav-open .cnav-burger-box::after{transform:translateY(-7px) rotate(-45deg);}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none;}}

/* ---- Responsive ---- */
@media (max-width:900px){
  .steps{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .cnav-links{display:none;}
  .cnav-burger{display:inline-flex;}
  .cnav-links.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:56px;left:0;right:0;background:rgba(255,255,255,0.97);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,0.08);padding:6px 0;}
  .cnav-links.open a{padding:15px 24px;font-size:17px;border-top:1px solid rgba(0,0,0,0.06);}
  .cnav-links.open a:first-child{border-top:0;}
  .case-hero{padding:104px 0 52px;}
  .case-body{padding:64px 0 8px;}
  .sect{padding-bottom:52px;}
  .results{padding:32px 24px;}
  .results .row{gap:32px;}
  .prevnext{flex-direction:column;}
  .cfoot{margin-top:72px;}
}

/* Accessibility: visible keyboard focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- UX rationale diagram ---- */
.ux-diagram{ margin:34px 0 0; padding:30px 24px 20px; background:#f6f6f8; border:1px solid #ececf0; border-radius:18px; }
.ux-diagram svg{ display:block; max-width:430px; margin:0 auto; height:auto; }
.ux-diagram figcaption{ margin-top:16px; text-align:center; font-size:14px; color:#6e6e73; }

/* ---- Page-structure map ---- */
.ux-map svg{ max-width:360px; }
/* ---- Before -> after ---- */
.ba-grid{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.ba-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:12px; }
.ba-cell{ border-radius:14px; padding:15px 18px; font-size:15.5px; line-height:1.5; }
.ba-before{ background:#f6f6f8; border:1px solid #ececf0; color:#6e6e73; }
.ba-after{ background:#eef5ff; border:1px solid #d7e6fb; color:#1d1d1f; }
.ba-tag{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.ba-before .ba-tag{ color:#9a9aa2; }
.ba-after .ba-tag{ color:#0071e3; }
.ba-arrow{ display:flex; align-items:center; justify-content:center; color:#0071e3; font-size:22px; font-weight:700; }
@media (max-width:600px){
  .ba-row{ grid-template-columns:1fr; gap:0; }
  .ba-arrow{ transform:rotate(90deg); padding:4px 0; }
}