/* ============================================================
   HOMEMED — Case Study · Gabriel Radatovics
   7-in-1 home minilab launch site. Theme: obsidian + steel-blue,
   lifestyle / sport-tech, Space Grotesk display.
   ============================================================ */

:root{
  --accent:#245A6E;        /* deep steel — structure/links on light */
  --accent-d:#1A4454;      /* deepest steel */
  --teal:#2F8299;          /* steel-cyan — actions & labels */
  --accent-l:#79C0D4;      /* bright steel — on dark */
  --ink:#111A1D;           /* near-black text */
  --grey:#5B6B6F;          /* muted body on light */
  --light:#EDF1F2;         /* cool grey surface */
  --dark:#0C1213;          /* obsidian */
  --card-dark:#151F21;     /* raised obsidian card */
  --mute:#8CA0A5;          /* body on dark */
  --light-text:#DBE6E8;
  --line-l:rgba(17,26,29,.12);
  --line-d:rgba(219,230,232,.13);
  --serif:'Space Grotesk',-apple-system,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --gutter:max(24px, calc((100% - 1460px) / 2));
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);background:var(--light);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:100;background:var(--dark);border-bottom:3px solid var(--teal);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);}
.topbar .brand{font-weight:800;font-size:12px;letter-spacing:2px;color:#fff;}
.topbar .brand span{color:var(--accent-l);}
.topbar nav{display:flex;gap:30px;}
.topbar nav a{font-weight:700;font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.62);transition:color .2s;position:relative;}
.topbar nav a:hover,.topbar nav a.active{color:#fff;}
.topbar nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:3px;background:var(--teal);}
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:0;background:var(--accent-l);transition:width .08s linear;z-index:101;}
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.navtoggle span{display:block;width:24px;height:2px;background:#fff;transition:transform .25s,opacity .2s;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Section shell ---------- */
.sec{padding:112px var(--gutter) 104px;background:var(--light);scroll-margin-top:72px;}
.sec.dark{background:var(--dark);color:#fff;}
.sec.tint{background:linear-gradient(180deg,#E3E9EA,#EDF1F2);}

/* ---------- Section header ---------- */
.hdr{display:flex;gap:52px;align-items:flex-start;margin-bottom:60px;}
.hdr .num{font-family:var(--serif);font-weight:300;font-size:108px;line-height:100px;color:var(--teal);flex:none;letter-spacing:-3px;}
.sec.dark .hdr .num{color:var(--accent-l);}
.hdr .tblock{border-left:2px solid var(--teal);padding-left:30px;}
.eyebrow{font-weight:700;font-size:11px;letter-spacing:3px;color:var(--teal);text-transform:uppercase;}
.sec.dark .eyebrow{color:var(--accent-l);}
.hdr .title{font-family:var(--serif);font-weight:600;font-size:46px;line-height:52px;letter-spacing:-1.5px;color:var(--ink);margin:14px 0 18px;}
.sec.dark .hdr .title{color:#fff;}
.hdr .sub{font-weight:400;font-size:17px;line-height:27px;color:var(--grey);max-width:860px;}
.sec.dark .hdr .sub{color:var(--mute);}

.label{font-weight:700;font-size:11px;letter-spacing:3px;color:var(--teal);text-transform:uppercase;display:block;margin-bottom:20px;}
.sec.dark .label{color:var(--accent-l);}
.block{margin-top:52px;}
.block:first-child{margin-top:0;}
.center{text-align:center;}

/* ---------- Hero ---------- */
.hero{display:flex;align-items:center;gap:52px;}
.hero .left{flex:0 0 500px;max-width:500px;}
.hero .left .eyebrow{font-size:12px;letter-spacing:2px;}
.hero .left h1{font-family:var(--serif);font-weight:600;font-size:66px;line-height:66px;letter-spacing:-2.5px;color:#fff;margin:20px 0 24px;}
.hero .left h1 span{color:var(--accent-l);}
.hero .left .lede{font-weight:400;font-size:18px;line-height:29px;color:var(--mute);}
.hero .meta{display:flex;gap:40px;margin-top:38px;flex-wrap:wrap;}
.hero .meta .mi .k{display:block;font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--accent-l);text-transform:uppercase;}
.hero .meta .mi .v{display:block;font-weight:600;font-size:15px;color:#fff;margin-top:6px;}
.hero .right{flex:1;min-width:0;}

/* ---------- Browser frame ---------- */
.browser{width:100%;border:1px solid var(--line-l);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.18);}
.sec.dark .browser{border-color:rgba(255,255,255,.1);box-shadow:0 34px 80px rgba(0,0,0,.6);}
.browser .bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:#E6EBEC;border-bottom:1px solid var(--line-l);}
.sec.dark .browser .bar{background:#10191B;border-bottom-color:rgba(255,255,255,.08);}
.browser .dot{width:11px;height:11px;border-radius:50%;}
.browser .dot.r{background:#FF5F57;}.browser .dot.y{background:#FEBC2E;}.browser .dot.g{background:#28C840;}
.browser .url{margin-left:14px;height:24px;flex:1;max-width:460px;border-radius:7px;background:#fff;border:1px solid var(--line-l);display:flex;align-items:center;padding:0 12px;font-weight:500;font-size:11px;letter-spacing:.3px;color:var(--grey);}
.sec.dark .browser .url{background:#0C1213;border-color:rgba(255,255,255,.1);color:var(--mute);}
.browser .vp{max-height:var(--vph,620px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent-l) transparent;}
.browser .vp::-webkit-scrollbar{width:9px;}
.browser .vp::-webkit-scrollbar-thumb{background:rgba(47,130,153,.4);border-radius:6px;}
.browser .vp img{width:100%;display:block;}
.framecap{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:16px;}
.sec.dark .framecap{color:var(--mute);}
.framecap b{display:block;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin-bottom:6px;}
.sec.dark .framecap b{color:var(--accent-l);}
.scrollhint{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-l);}
.scrollhint::before{content:"";width:16px;height:16px;border:1.5px solid currentColor;border-radius:4px;background:linear-gradient(currentColor,currentColor) center/2px 6px no-repeat;}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}

/* ---------- Cards / rows ---------- */
.row{display:flex;gap:24px;align-items:stretch;}
.row.top{align-items:flex-start;}
.card{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:30px 32px;flex:1;}
.sec.dark .card{background:var(--card-dark);border-color:rgba(255,255,255,.08);}
.card.accent{border-top:3px solid var(--teal);box-shadow:0 8px 22px rgba(0,0,0,.06);}
.card .clabel{font-weight:700;font-size:11px;letter-spacing:2px;color:var(--teal);text-transform:uppercase;}
.sec.dark .card .clabel{color:var(--accent-l);}
.card h3{font-weight:700;font-size:20px;line-height:26px;color:var(--ink);margin-top:4px;}
.sec.dark .card h3{color:#fff;}
.card p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:14px;}
.sec.dark .card p{color:var(--mute);}
.card .metric{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1;letter-spacing:-1px;color:var(--teal);}
.sec.dark .card .metric{color:var(--accent-l);}
.card h4{font-weight:700;font-size:17px;color:var(--ink);margin-top:12px;}
.sec.dark .card h4{color:#fff;}
.card .cdesc{font-weight:400;font-size:14px;line-height:21px;color:var(--grey);margin-top:10px;}
.sec.dark .card .cdesc{color:var(--mute);}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.chip{border:1px solid var(--line-l);background:#fff;border-radius:24px;padding:11px 20px;font-weight:600;font-size:14px;color:var(--ink);}
.sec.dark .chip{background:var(--card-dark);border-color:rgba(255,255,255,.1);color:#fff;}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;}

/* two-column + facts */
.cols2{display:flex;gap:48px;align-items:flex-start;}
.cols2 .grow{flex:1;}
.narr p{font-weight:400;font-size:18px;line-height:30px;color:var(--ink);}
.sec.dark .narr p{color:var(--light-text);}
.narr p+p{margin-top:18px;color:var(--grey);}
.sec.dark .narr p+p{color:var(--mute);}
.facts{flex:0 0 430px;background:var(--dark);border-radius:16px;padding:10px 34px;}
.sec.dark .facts{background:#060B0C;border:1px solid rgba(255,255,255,.07);}
.facts .frow{padding:17px 0;border-top:1px solid rgba(255,255,255,.1);}
.facts .frow:first-child{border-top:none;}
.facts .frow .k{font-weight:700;font-size:10px;letter-spacing:2px;color:var(--accent-l);text-transform:uppercase;}
.facts .frow .v{font-weight:600;font-size:15px;line-height:21px;color:#fff;margin-top:4px;}

/* objective / callout */
.objective{display:flex;align-items:center;gap:44px;background:linear-gradient(120deg,var(--accent),var(--teal));border-radius:14px;padding:44px 52px;color:#fff;}
.objective .ol{font-weight:700;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.75);text-transform:uppercase;flex:none;}
.objective .od{width:1px;height:54px;background:rgba(255,255,255,.35);flex:none;}
.objective p{font-weight:600;font-size:23px;line-height:33px;color:#fff;}

/* pull quote */
.pull{display:flex;gap:30px;align-items:flex-start;}
.pull .bar{width:3px;flex:none;border-radius:2px;background:var(--teal);align-self:stretch;min-height:120px;}
.pull p{font-family:var(--serif);font-weight:500;font-size:36px;line-height:48px;letter-spacing:-1px;color:var(--ink);}
.sec.dark .pull p{color:#fff;}

/* steps */
.steps{display:flex;flex-direction:column;}
.steps .step{display:flex;gap:22px;padding:22px 0;border-top:1px solid var(--line-l);}
.sec.dark .steps .step{border-top-color:rgba(255,255,255,.08);}
.steps .step:first-child{border-top:none;}
.steps .si{flex:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal));color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
.steps .sb h4{font-weight:700;font-size:18px;color:var(--ink);}
.sec.dark .steps .sb h4{color:#fff;}
.steps .sb p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:6px;}
.sec.dark .steps .sb p{color:var(--mute);}

/* swatches */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.swatch .blk{height:92px;border-radius:12px;border:1px solid var(--line-l);}
.swatch .nm{font-weight:600;font-size:13.5px;color:var(--ink);margin-top:10px;}
.sec.dark .swatch .nm{color:#fff;}
.swatch .hex{font-weight:400;font-size:12.5px;color:var(--grey);}
.sec.dark .swatch .hex{color:var(--mute);}

/* stat boxes / outcomes */
.statbox{flex:1;background:#fff;border-top:3px solid var(--teal);border-radius:14px;padding:34px 30px;box-shadow:0 8px 20px rgba(0,0,0,.06);}
.sec.dark .statbox{background:var(--card-dark);border-top-color:var(--teal);}
.statbox .big{font-family:var(--serif);font-weight:500;font-size:56px;line-height:1;letter-spacing:-2px;color:var(--teal);}
.sec.dark .statbox .big{color:var(--accent-l);}
.statbox .lbl{font-weight:700;font-size:16px;line-height:22px;color:var(--ink);margin-top:14px;}
.sec.dark .statbox .lbl{color:#fff;}
.statbox .d{font-weight:400;font-size:14px;line-height:20px;color:var(--grey);margin-top:3px;}
.sec.dark .statbox .d{color:var(--mute);}
.outcome{flex:1;background:#fff;border-left:3px solid var(--teal);border-radius:12px;padding:30px 32px;}
.sec.dark .outcome{background:var(--card-dark);}
.outcome h3{font-weight:700;font-size:19px;line-height:25px;color:var(--ink);}
.sec.dark .outcome h3{color:#fff;}
.outcome p{font-weight:400;font-size:15px;line-height:23px;color:var(--grey);margin-top:12px;}
.sec.dark .outcome p{color:var(--mute);}

/* footer */
.footer{position:relative;background:var(--dark);border-top:3px solid var(--teal);padding:104px var(--gutter) 84px;overflow:hidden;}
.footer .wm{position:absolute;left:var(--gutter);bottom:-40px;font-family:var(--serif);font-weight:600;font-size:250px;letter-spacing:-10px;color:rgba(255,255,255,.04);pointer-events:none;line-height:1;}
.footer .fc{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer .role{font-weight:700;font-size:12px;letter-spacing:2px;color:var(--accent-l);}
.footer .name{font-family:var(--serif);font-weight:600;font-size:48px;line-height:52px;letter-spacing:-2px;color:#fff;margin-top:10px;}
.footer .fmeta{font-weight:500;font-size:15px;color:var(--mute);margin-top:16px;max-width:460px;line-height:23px;}
.footer .fright{text-align:right;}
.footer .fright .c1{font-weight:700;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5);}
.footer .fright .c2{font-weight:500;font-size:15px;color:#fff;margin-top:8px;}

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

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hero{flex-direction:column;align-items:flex-start;}
  .hero .left{flex:none;max-width:none;}
  .hero .right{width:100%;}
  .cols2{flex-direction:column;}
  .facts{flex:none;width:100%;}
  .row{flex-wrap:wrap;}
  .gallery{grid-template-columns:1fr;}
  .swatches{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .sec{padding:68px 22px 60px;}
  .hdr{gap:18px;margin-bottom:38px;}
  .hdr .num{font-size:60px;line-height:60px;}
  .hdr .title{font-size:30px;line-height:36px;}
  .hero .left h1{font-size:46px;line-height:48px;}
  .pull p{font-size:26px;line-height:36px;}
  .row,.objective{flex-direction:column;}
  .objective{align-items:flex-start;gap:18px;}.objective .od{display:none;}
  .swatches{grid-template-columns:repeat(2,1fr);}
  .footer .fc{flex-direction:column;}.footer .fright{text-align:left;}.footer .wm{font-size:110px;}
  .navtoggle{display:flex;}
  .topbar nav{position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--dark);border-bottom:3px solid var(--teal);padding:8px var(--gutter) 18px;transform:translateY(-135%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(0,0,0,.4);}
  .topbar nav.open{transform:translateY(0);}
  .topbar nav a{padding:15px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;}
  .topbar nav a.active::after{display:none;}
}