/* JDGX Labs — shared site styles. Warm split-hero identity ("Option 2"). */
:root{
  --accent:#F5643C; --ink:#1A1613; --body:#5A5149; --muted:#9A9187;
  --line:#EFE9E2; --card:#FFFFFF; --canvas:#FBF8F4; --band:#1A1613;
  --maxw:1120px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas); color:var(--body);
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3,h4{color:var(--ink); font-weight:700; letter-spacing:-.025em; line-height:1.08}
a{color:inherit; text-decoration:none}
.soft{background:color-mix(in srgb, var(--accent) 10%, #fff)}

header{position:sticky; top:0; z-index:20; background:rgba(251,248,244,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:17px}
.logo{width:27px; height:27px; border-radius:9px; background:var(--accent); position:relative; flex:none}
.logo::after{content:""; position:absolute; inset:7px; border:2.4px solid #fff; border-radius:50%; border-top-color:transparent}
.navlinks{display:flex; gap:24px; font-size:14px; font-weight:500}
.navlinks a:hover{color:var(--accent)}
.btn{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; padding:11px 20px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:.15s}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:var(--accent)}
@media(max-width:760px){ .navlinks{gap:16px; font-size:13px} .navlinks .hide-sm{display:none} }

.kicker{font-size:13px; font-weight:600; color:var(--accent)}
.h2{font-size:clamp(27px,4.2vw,40px); margin:10px 0 8px}
.sub{font-size:16px; max-width:60ch; color:var(--body)}
section{padding:64px 0}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:68px 0 52px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent); padding:6px 13px; border-radius:20px; margin-bottom:20px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(36px,5.4vw,58px); font-weight:800}
.hero p.lead{font-size:clamp(16px,2vw,19px); max-width:46ch; margin:20px 0 28px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
@media(max-width:760px){ .hero{grid-template-columns:1fr; gap:32px; padding-top:48px} }

.panel{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 20px 50px -30px rgba(26,22,19,.4)}
.panel .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.panel .top b{color:var(--ink); font-size:15px} .panel .top span{font-size:12px; color:var(--muted)}
.rooms{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.room{border:1px solid var(--line); border-radius:14px; padding:13px 14px; display:flex; flex-direction:column; gap:8px}
.room.on{background:color-mix(in srgb, var(--accent) 9%, #fff); border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.room .rn{font-size:13px; color:var(--ink); font-weight:600; display:flex; justify-content:space-between; align-items:center}
.room .rs{font-size:11.5px; color:var(--muted)}
.toggle{width:34px; height:19px; border-radius:20px; background:#E2DBD2; position:relative; flex:none}
.toggle.on{background:var(--accent)}
.toggle::after{content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.15s}
.toggle.on::after{left:17px}
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.metric{border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.metric .mv{font-size:22px; font-weight:700; color:var(--ink)} .metric .ml{font-size:11.5px; color:var(--muted)}
.scene{margin-top:10px; background:var(--band); color:#fff; border-radius:14px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between}
.scene .sl{font-size:13px; font-weight:600} .scene .sb{font-size:11px; color:#B9B1A8}

.works{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:14px 0; color:var(--muted); font-size:13.5px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.works b{color:var(--ink)}

/* Hero visual — a website + an app, i.e. what we build */
.build-visual{position:relative; min-height:320px}
.browser{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 20px 50px -30px rgba(26,22,19,.45); max-width:400px}
.bbar{background:#F1ECE6; padding:9px 12px; display:flex; align-items:center; gap:7px}
.bd{width:9px; height:9px; border-radius:50%; background:#D6CEC4}
.burl{margin-left:8px; font-size:11px; color:var(--muted); background:#fff; padding:2px 12px; border-radius:20px}
.bbody{padding:16px}
.bhero{height:70px; border-radius:10px; background:color-mix(in srgb, var(--accent) 16%, #fff); margin-bottom:12px}
.bline{height:9px; border-radius:6px; background:#EAE3DB; margin-bottom:9px}
.bline.w70{width:70%} .bline.w45{width:45%}
.brow{display:flex; gap:8px; margin-top:14px}
.brow span{flex:1; height:44px; border-radius:9px; background:#F4EFE9; border:1px solid var(--line)}
.phone{position:absolute; right:0; bottom:-16px; width:150px; background:var(--band); border-radius:22px; padding:8px; box-shadow:0 24px 50px -24px rgba(26,22,19,.55)}
.pnotch{width:44px; height:5px; border-radius:6px; background:#3A342D; margin:5px auto 8px}
.pscreen{background:var(--canvas); border-radius:15px; padding:14px 12px}
.ptop{font-size:12px; font-weight:700; color:var(--ink); margin-bottom:10px}
.pcard{background:#fff; border:1px solid var(--line); border-left:4px solid #D6CEC4; border-radius:0 9px 9px 0; padding:8px 10px; font-size:11.5px; color:var(--body); margin-bottom:7px}
.pcard.on{border-left-color:var(--accent); color:var(--ink); font-weight:600}
@media(max-width:760px){ .build-visual{min-height:300px; margin-top:8px} .phone{bottom:0} }

.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:36px}
.fcard{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; transition:.15s}
.fcard:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.fnum{font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.04em}
.fcard h3{font-size:18px; margin:12px 0 7px} .fcard p{font-size:14.5px}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; margin-top:36px}
.step .sn{width:40px; height:40px; border-radius:12px; background:color-mix(in srgb, var(--accent) 13%, #fff); color:var(--accent); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.step h4{color:var(--ink); font-size:18px; margin-bottom:6px} .step p{font-size:14.5px}

.showcase{background:var(--band); border-radius:26px; padding:46px 40px; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-top:40px}
.showcase h2{color:#fff; font-size:clamp(24px,3.4vw,34px)} .showcase p{color:#B9B1A8; margin:12px 0 22px; max-width:44ch}
.badge{display:inline-block; font-size:12px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 20%, #1A1613); padding:5px 12px; border-radius:20px; margin-bottom:14px}
.stack{position:relative; width:170px; height:150px; margin:0 auto}
.tile{position:absolute; border-radius:15px; width:135px; height:82px}
.t1{background:#8FD3CC; top:0; left:20px}.t2{background:#2FA79C; top:34px; left:10px}.t3{background:var(--accent); top:68px; left:0}
@media(max-width:760px){ .showcase{grid-template-columns:1fr; text-align:center; padding:34px 24px} .stack{margin-top:6px} }

.cta-band{text-align:center; padding:70px 22px}
.cta-band h2{font-size:clamp(26px,4vw,38px)} .cta-band p{margin:12px auto 26px; max-width:44ch}

footer{border-top:1px solid var(--line); padding:40px 0 34px; color:var(--muted); font-size:14px; margin-top:20px}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px}
.foot-grid h5{color:var(--ink); font-size:13px; font-weight:700; margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em}
.foot-grid a{display:block; margin-bottom:7px; color:var(--body)} .foot-grid a:hover{color:var(--accent)}
.foot-bottom{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

.doc{max-width:800px; margin:0 auto; padding:52px 22px 70px}
.doc h1{font-size:clamp(30px,5vw,40px); font-weight:800}
.doc .updated{color:var(--muted); font-size:14px; margin:8px 0 6px}
.doc h2{font-size:21px; margin:34px 0 10px; color:var(--ink)}
.doc h3{font-size:16px; margin:22px 0 6px; color:var(--ink)}
.doc p, .doc li{font-size:15.5px; color:var(--body); margin-bottom:12px}
.doc ul{padding-left:22px; margin-bottom:12px} .doc li{margin-bottom:7px}
.doc a{color:var(--accent)} .doc strong{color:var(--ink); font-weight:600}
.doc table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14.5px}
.doc th,.doc td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
.doc th{background:color-mix(in srgb, var(--accent) 7%, #fff); font-weight:600; color:var(--ink)}
.doc .note{background:color-mix(in srgb, var(--accent) 8%, #fff); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius:12px; padding:14px 16px; font-size:14px; margin:18px 0}

/* Blog */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:38px}
.post{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:.15s}
.post:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.post .cover{aspect-ratio:16/9; display:flex; align-items:flex-end; padding:14px; position:relative}
.post .cat{font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); padding:4px 10px; border-radius:20px; letter-spacing:.03em}
.post .body{padding:18px 20px 20px}
.post h3{font-size:18px; line-height:1.25; margin-bottom:8px}
.post p{font-size:14px}
.post .meta{font-size:12.5px; color:var(--muted); margin-top:12px}
.post.soon{opacity:.62}
.cov-a{background:linear-gradient(135deg,#F5643C,#F59E0B)}
.cov-b{background:linear-gradient(135deg,#2FA79C,#3B82F6)}
.cov-c{background:linear-gradient(135deg,#7C3AED,#3B82F6)}
.cov-d{background:linear-gradient(135deg,#1A1613,#5A5149)}

/* Article */
.article{max-width:760px; margin:0 auto; padding:44px 22px 70px}
.article .back{font-size:14px; color:var(--accent); font-weight:600}
.article .cat{display:inline-block; font-size:12px; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff); padding:4px 12px; border-radius:20px; margin:20px 0 12px}
.article h1{font-size:clamp(28px,5vw,42px); font-weight:800; line-height:1.1}
.article .meta{color:var(--muted); font-size:14px; margin:12px 0 4px}
.article .cover{aspect-ratio:16/9; border-radius:18px; margin:26px 0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-weight:600}
.article p, .article li{font-size:16.5px; line-height:1.75; color:var(--body); margin-bottom:16px}
.article h2{font-size:24px; margin:34px 0 10px} .article h3{font-size:19px; margin:26px 0 8px}
.article a{color:var(--accent)} .article strong{color:var(--ink); font-weight:600}
.article ul{padding-left:22px; margin-bottom:16px} .article li{margin-bottom:8px}
.article img{width:100%; border-radius:16px; margin:22px 0}
.ph{aspect-ratio:16/9; border-radius:16px; margin:22px 0; background:color-mix(in srgb, var(--accent) 9%, #F1EDE8); border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:16px}
.embed{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin:22px 0; background:var(--band)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.playbtn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:#fff}
.playbtn .circ{width:60px; height:60px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px}