/* ============================================================
   MEDTREND — Case Study · Gabriel Radatovics
   Patient portal + webshop + education redesign for Di-Care Zrt.
   Theme: clinical blue (#0C60A8) + teal (#00909C), light & trustworthy
   ============================================================ */

:root{
  --accent:#0C60A8;        /* primary blue */
  --accent-d:#004890;      /* deep navy-blue */
  --teal:#00909C;          /* secondary teal */
  --accent-l:#3C90D8;      /* light blue, on dark */
  --ink:#122733;           /* near-black text */
  --grey:#586B76;          /* muted body on light */
  --light:#F2F7FB;         /* cool off-white page */
  --dark:#07293F;          /* deep navy section */
  --card-dark:#0E3A58;     /* raised navy card */
  --mute:#9DB6C6;          /* body on dark */
  --light-text:#DCEAF3;    /* brighter body on dark */
  --line-l:rgba(18,39,51,.12);
  --line-d:rgba(220,234,243,.14);
  --serif:'Fraunces',Georgia,'Times New Roman',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(--teal);}
.topbar nav{display:flex;gap:34px;}
.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,#E9F2F8,#F2F7FB);}

/* ---------- 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:120px;line-height:100px;color:var(--accent);flex:none;font-variant-numeric:lining-nums;}
.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:500;font-size:50px;line-height:56px;letter-spacing:-.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:500;font-size:74px;line-height:74px;letter-spacing:-1.5px;color:var(--ink);margin:20px 0 24px;}
.hero .left h1 span{color:var(--accent);}
.hero .left .lede{font-weight:400;font-size:18px;line-height:29px;color:var(--grey);}
.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(--teal);text-transform:uppercase;}
.hero .meta .mi .v{display:block;font-weight:600;font-size:15px;color:var(--ink);margin-top:6px;}
.hero .right{flex:1;min-width:0;display:flex;justify-content:center;align-items:flex-end;gap:0;position:relative;}

/* ---------- Browser frame (full page, scrolls inside) ---------- */
.browser{width:100%;border:1px solid var(--line-l);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(7,41,63,.18);}
.sec.dark .browser{border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.5);}
.browser .bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:#EDF1F4;border-bottom:1px solid var(--line-l);}
.sec.dark .browser .bar{background:#0A3350;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:#07293F;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(12,96,168,.35);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(--teal);}
.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 grid of browser frames */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}

/* ---------- Phones ---------- */
.phonerow{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
.phone{flex:0 0 auto;width:250px;}
.phone .device{border-radius:34px;padding:9px;background:#0B1E2B;box-shadow:0 26px 60px rgba(7,41,63,.30);}
.sec.dark .phone .device{box-shadow:0 26px 60px rgba(0,0,0,.55);}
.phone .screen{border-radius:26px;overflow:hidden;background:#fff;}
.phone .vp{max-height:500px;overflow-y:auto;scrollbar-width:none;}
.phone .vp::-webkit-scrollbar{display:none;}
.phone .vp img{width:100%;display:block;}
.phone .pc{text-align:center;font-weight:500;font-size:13px;line-height:19px;color:var(--grey);margin-top:16px;}
.sec.dark .phone .pc{color:var(--mute);}
.phone .pc .n{display:block;font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin-bottom:5px;}
.sec.dark .phone .pc .n{color:var(--accent-l);}

/* ---------- 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(7,41,63,.06);}
.card .clabel{font-weight:700;font-size:11px;letter-spacing:2px;color:var(--teal);text-transform:uppercase;}
.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:52px;line-height:1;color:var(--accent);}
.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);}
.chip.on{background:var(--accent);border-color:var(--accent);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);}
.narr p+p{margin-top:18px;color:var(--grey);}
.facts{flex:0 0 430px;background:var(--dark);border-radius:16px;padding:10px 34px;}
.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 bands */
.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,.72);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-style:italic;font-size:40px;line-height:50px;letter-spacing:-.5px;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);}

/* IA clusters */
.clusters{display:flex;gap:22px;align-items:flex-start;}
.cluster{flex:1;background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:26px;border-top:3px solid var(--teal);}
.cluster .ch{font-weight:800;font-size:17px;color:var(--ink);margin-bottom:14px;}
.cluster .mrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line-l);}
.cluster .mrow:first-of-type{border-top:none;}
.cluster .sq{width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none;}
.cluster .mn{font-weight:500;font-size:14.5px;color:var(--grey);}

/* 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;}
.swatch .hex{font-weight:400;font-size:12.5px;color:var(--grey);}

/* 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(7,41,63,.06);}
.statbox .big{font-family:var(--serif);font-weight:500;font-size:62px;line-height:1;color:var(--accent);}
.statbox .lbl{font-weight:700;font-size:16px;line-height:22px;color:var(--ink);margin-top:14px;}
.statbox .d{font-weight:400;font-size:14px;line-height:20px;color:var(--grey);margin-top:3px;}
.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:-46px;font-family:var(--serif);font-weight:500;font-size:270px;letter-spacing:-6px;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:500;font-size:52px;line-height:56px;letter-spacing:-.5px;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 + lightbox */
.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,.clusters{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:66px;line-height:66px;}
  .hdr .title{font-size:32px;line-height:38px;}
  .hero .left h1{font-size:52px;line-height:54px;}
  .pull p{font-size:28px;line-height:38px;}
  .row,.clusters,.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:120px;}
  .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;}
}