:root{
  --paper:#ffffff; --paper-2:#ffffff;
  --text:#0d1527; --muted:#475569; --muted-2:#64748b;
  --accent:#0e7c7c; --accent-2:#25a9a9;
  --cta:#ff4d6d; --cta-2:#ff7a8f; --cta-text:#fff;
  --border:#e2e4e8; --ring:rgba(14,124,124,.5);
  --shadow:0 4px 12px rgba(0,0,0,.1);
  --radius:24px; --container:1280px; --gap:32px;
  --success:#059669; --error:#b91c1c;
  --focus: 0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent);
  --nav-h:88px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0b1220; --paper-2:#111a2c; --text:#e6eefb;
  --muted:#a5b6cf; --muted-2:#90a7c5; --border:#1f2a3f;
  --shadow:0 4px 12px rgba(0,0,0,.25);
  --focus: 0 0 0 4px color-mix(in oklab, var(--accent-2) 40%, transparent);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background: var(--paper);
  line-height:1.8; overflow-x:hidden; scroll-behavior:smooth;
}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
section, main{scroll-margin-top:calc(var(--nav-h) + 24px)}
.row{display:flex;gap:20px;flex-wrap:wrap}
.center{display:grid;place-items:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ===== top progress bar & header ===== */
.progress{position:fixed;top:0;left:0;height:5px;width:0;background:linear-gradient(90deg,var(--cta-2),var(--accent-2));z-index:110;box-shadow:0 2px 16px rgba(0,0,0,.2);transition:width 0.4s ease}
header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--border);transition:box-shadow .3s ease, background .3s ease}
.nav{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:16px 0;height:var(--nav-h)}
.nav.scrolled{box-shadow:0 12px 36px rgba(2,6,23,.12)}
.brand{display:flex;align-items:center;gap:14px;font-family:Poppins;font-weight:800;text-decoration:none;color:inherit;font-size:1.25rem}
.badge{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cta-2),var(--cta));color:#fff;box-shadow:var(--shadow);transition:transform 0.25s ease}
.menu-btn{display:none;border:1px solid var(--border);background:transparent;border-radius:16px;padding:14px;transition:background 0.3s ease, transform 0.25s ease}
nav.menu{display:flex;align-items:center;gap:12px;margin-left:auto}
nav.menu a{padding:14px 20px;border-radius:999px;text-decoration:none;color:inherit;font-weight:600;transition:background 0.3s ease, color 0.3s ease, transform 0.25s ease}
nav.menu a:hover, nav.menu a[aria-current="true"]{background:color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent-2); transform:translateY(-2px)}
.cta-mini{margin-left:10px}

/* Modern circular theme toggle */
.theme-toggle{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,var(--paper),color-mix(in oklab,var(--paper-2) 92%, transparent));box-shadow:0 10px 24px rgba(2,6,23,.1);cursor:pointer;padding:0;margin-left:12px;transition:transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease}
.theme-toggle:hover{transform:scale(1.08); box-shadow:0 12px 28px rgba(2,6,23,.12)}
.theme-toggle:focus-visible{outline:none;box-shadow: var(--focus)}
.theme-toggle svg{width:24px;height:24px;display:block;transition:transform 0.3s ease, opacity 0.3s ease}
[data-theme="dark"] .theme-toggle{background:linear-gradient(180deg,#0f172a,#0b1220)}

@media(max-width:1024px){
  .menu-btn{display:inline-flex}
  nav.menu{display:none;position:fixed;left:0;right:0;top:var(--nav-h);background:var(--paper);border-bottom:1px solid var(--border);padding:20px 28px;box-shadow:0 16px 32px rgba(2,6,23,.15);flex-direction:column;align-items:flex-start;gap:20px}
  nav.menu.open{display:flex}
}

.btn{display:inline-flex;align-items:center;gap:16px;border-radius:999px;padding:18px 28px;font-weight:800;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .2s ease,filter .3s ease, box-shadow .3s ease, background 0.3s ease;white-space:nowrap;min-height:56px;min-width:max-content;line-height:1}
button.btn{-webkit-appearance:none;appearance:none}
.btn:focus-visible{outline: none; box-shadow: var(--focus)}
.btn .icon{width:24px;height:24px;display:inline-block}
.btn .icon svg{width:100%;height:100%;display:block}
.btn-primary{background:linear-gradient(180deg,var(--cta-2) 0%,var(--cta) 100%);color:var(--cta-text);box-shadow:0 16px 32px rgba(255,77,109,.45), 0 6px 12px rgba(255,77,109,.25)}
.btn-primary:hover{transform:translateY(-4px);filter:brightness(1.08);background:linear-gradient(180deg,var(--cta) 0%,var(--cta-2) 100%);box-shadow:0 20px 40px rgba(255,77,109,.5), 0 8px 16px rgba(255,77,109,.3)}
.btn-ghost{background:var(--paper);border:1px solid color-mix(in oklab, var(--border) 80%, transparent);color:inherit;box-shadow:0 10px 24px rgba(2,6,23,.1), 0 4px 8px rgba(2,6,23,.05)}
.btn-ghost:hover{transform:translateY(-3px);filter:brightness(1.05);box-shadow:0 16px 32px rgba(2,6,23,.12), 0 6px 12px rgba(2,6,23,.08)}

.hero{padding:120px 0 40px;transition:opacity 0.8s ease, transform 0.8s ease}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.kicker{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-size:14px;margin-bottom:12px;font-weight:600}
.h1{font-family:Poppins;font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1.05;margin:8px 0 24px;transition:color 0.3s ease}
.sub{color:var(--muted);font-size:20px;transition:color 0.3s ease}
.hero-micro{margin-top:16px;padding:16px 20px;border-radius:16px;background:var(--paper);border:1px solid var(--border);box-shadow:var(--shadow);font-size:17px;position:relative;z-index:0;margin-bottom:12px;transition:background 0.3s ease, border 0.3s ease, transform 0.25s ease}
.deadline{display:flex;align-items:center;gap:12px;margin-top:16px;color:#991b1b;font-weight:800;transition:color 0.3s ease}

section{padding:100px 0;opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease; will-change: opacity, transform}
section.visible{opacity:1;transform:translateY(0)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);transition:gap 0.3s ease}
.col-12{grid-column:span 12}.col-6{grid-column:span 6}.col-4{grid-column:span 4}
@media(max-width:1024px){.col-6{grid-column:span 12}}
@media(max-width:768px){.col-4{grid-column:span 12}}

.card{background:var(--paper-2);border:1px solid color-mix(in oklab, var(--border) 80%, transparent);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);transition:transform .2s ease, background 0.3s ease}
.section-title{font-family:Poppins;font-weight:800;text-align:center;margin:0 0 12px;font-size:56px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);transition:color 0.3s ease}
.section-sub{font-family:Poppins;text-align:center;margin:0 0 32px;color:var(--muted);font-size:22px;transition:color 0.3s ease}

.feature{display:flex;gap:20px;align-items:flex-start;transition:transform 0.3s ease}
.ico{min-width:52px;min-height:52px;border-radius:16px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--border);transition:background 0.3s ease, transform 0.25s ease}
.benefit{font-size:16px;color:#0e7490;font-weight:700;margin-top:8px;transition:color 0.3s ease}

.how-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);transition:gap 0.3s ease}
.how-card{display:flex;gap:20px;align-items:flex-start;background:var(--paper);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:28px;min-height:200px;transition:transform 0.3s ease, background 0.3s ease}
.how-card .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--border);transition:background 0.3s ease, transform 0.25s ease}
.how-card ul{padding-left:0;list-style:none;margin:0;transition:color 0.3s ease}
.how-card li{margin-bottom:8px;position:relative;padding-left:28px;transition:transform 0.3s ease}
.how-card li:before{content:'•';position:absolute;left:0;color:var(--muted)}

.input{padding:18px 20px;border-radius:16px;border:1px solid var(--border);background:var(--paper);width:100%;font:inherit;transition:border 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease}
.input:focus-visible{outline:none; box-shadow: var(--focus); border-color: var(--accent-2); transform:translateY(-2px)}
.help{font-size:15px;color:var(--muted-2);transition:color 0.3s ease}

/* ===== Modal / Overlay (success popup) ===== */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;z-index:120;transition:opacity 0.4s ease, visibility 0.4s ease}
.overlay.open{display:flex;opacity:1;visibility:visible}
.modal{background:var(--paper);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);width:min(640px,94vw);padding:28px;position:relative;transition:transform 0.4s ease, opacity 0.4s ease}
.close{position:absolute;right:20px;top:20px;border:none;background:var(--paper);border:1px solid var(--border);width:44px;height:44px;border-radius:14px;cursor:pointer;transition:background 0.3s ease, transform 0.25s ease}

.sticky-cta{position:fixed;right:32px;bottom:32px;z-index:90;max-width:calc(100vw - 64px);transition:transform 0.3s ease}
.backtop{position:fixed;left:32px;bottom:32px;z-index:90;display:none;transition:opacity 0.3s ease, transform 0.3s ease}
.backtop.show{display:inline-flex;opacity:1}

footer.site-footer{background:#0f172a;color:#e5eef8;transition:background 0.3s ease}
footer.site-footer a{color:#e5eef8;transition:color 0.3s ease, transform 0.25s ease}
footer.site-footer .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:40px 0;transition:gap 0.3s ease}

/* === PHONE DEMO === */
.briq-demo{display:flex;justify-content:center;align-items:center;padding:28px; flex-direction: column; gap: 16px;transition:transform 0.3s ease}
.briq-phone{--rim:#1e1e1e;--rim-hi:#3a3a3a;--bg:#f0f0f0;--border:#d0d0d0;position:relative;width:300px;aspect-ratio:9/19.5;border-radius:72px;padding:6px;background:linear-gradient(180deg,var(--bg),#e0e0e0);box-shadow:0 60px 120px rgba(0,0,0,0.35), inset 0 -8px 16px rgba(0,0,0,0.15);transition:box-shadow 0.3s ease}
@media(max-width:520px){.briq-phone{width:280px}}
.briq-real:before,.briq-real:after{content:"";position:absolute;inset:0;border-radius:72px;pointer-events:none}
.briq-real:before{padding:6px;background:linear-gradient(145deg,var(--rim-hi),var(--rim));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.briq-real:after{box-shadow:inset 0 4px 4px rgba(255,255,255,0.5),inset 0 -4px 4px rgba(0,0,0,0.3),0 2px 4px rgba(255,255,255,0.4)}
.btns{position:absolute;top:110px;display:flex;flex-direction:column;gap:16px;z-index:0;transition:transform 0.3s ease}
.btns.left{left:-5px}.btns.right{right:-5px}
.pbtn{width:6px;height:52px;background:linear-gradient(180deg,#5a5a5a,#2a2a2a);border-radius:5px;box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)}
.pbtn.vol{height:42px}.pbtn.power{height:62px}
.briq-screen{position:relative;border-radius:68px;overflow:hidden;height:100%;background:linear-gradient(180deg,#ffffff,#f4f7fb);border:2px solid var(--border);box-shadow:inset 0 16px 40px rgba(2,6,23,.1);z-index:1;transition:background 0.3s ease, border 0.3s ease}
[data-theme="dark"] .briq-screen{background:linear-gradient(180deg,#0d1424,#0b1220);border-color:#22304b}
.dynamic-island{position:absolute;z-index:2;pointer-events:none;top:12px;left:50%;transform:translateX(-50%);width:140px;height:40px;background:rgba(15,23,42,.98);border-radius:999px;box-shadow:0 8px 20px rgba(2,6,23,.45)}
.homebar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:140px;height:6px;border-radius:999px;background:rgba(15,23,42,.3);pointer-events:none;z-index:1}
.glare{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%), linear-gradient(210deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.2) 12%,rgba(255,255,255,0) 40%),radial-gradient(1000px 200px at -20% 0%,rgba(255,255,255,.3),rgba(255,255,255,0) 70%); opacity:0.9}
.briq-ui{position:absolute;inset:0;padding:60px 18px 66px;display:flex;flex-direction:column;gap:14px;overflow:auto;z-index:5}
.briq-msg{max-width:88%;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:16px 18px;box-shadow:0 10px 24px rgba(2,6,23,.12)}
.briq-msg.ai{background:#e8f7f7;color:#0f172a}
.briq-msg.user{align-self:flex-end;background:#0f172a;color:#ffffff}
.briq-typing{align-self:flex-start;background:#e8f7f7;border:1px solid var(--border);border-radius:999px;height:36px;padding:0 14px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 24px rgba(2,6,23,.12)}
.briq-dot{width:8px;height:8px;border-radius:999px;background:#9aa4b2;animation:briqBounce 1.3s infinite}
.briq-dot:nth-child(2){animation-delay:.25s}.briq-dot:nth-child(3){animation-delay:.5s}
@keyframes briqBounce{0%,80%,100%{transform:translateY(0);opacity:.7}40%{transform:translateY(-6px);opacity:1}}
.composer{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:12px;background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:12px 14px;z-index:6;box-shadow:0 10px 28px rgba(2,6,23,.12)}
.compose-input{flex:1;border:none;outline:none;font:16px/1.4 Inter,system-ui;background:transparent}
.compose-input:disabled{opacity:.65}
.compose-send{border:1px solid var(--border);background:#0ea5a5;color:#fff;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}
.compose-send:disabled{opacity:.6;cursor:not-allowed}

/* Dark tweaks */
[data-theme="dark"] .briq-msg.ai{background:#dff4f4;color:#0b1220;border-color:color-mix(in oklab, #0b1220 18%, transparent)}
[data-theme="dark"] .briq-msg.user{background:#0f172a;color:#e6eefb;border-color:color-mix(in oklab, #e6eefb 18%, transparent)}
[data-theme="dark"] .briq-typing{background:#dff4f4;border-color:#1f2a3f}

.demo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.demo-col{grid-column:span 6}
@media(max-width:1024px){.demo-col{grid-column:span 12}}
.visually-hidden{clip:rect(0 0 0 0); clip-path: inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px;}
.rail{position:fixed;left:0;top:calc(var(--nav-h) + 24px);bottom:0;width:8px;background:linear-gradient(var(--accent-2), transparent);opacity:.18}

/* Command palette */
.cmdk-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.65);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:14vh 28px;z-index:130}
.cmdk-backdrop.open{display:flex}
.cmdk{width:min(800px,96vw);background:var(--paper);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.cmdk .cmdk-head{display:flex;align-items:center;gap:16px;padding:16px;border-bottom:1px solid var(--border)}
.cmdk input{flex:1;border:none;background:transparent;font:600 18px/1 Inter,system-ui;padding:14px 16px;border-radius:14px}
.cmdk input:focus{outline:none; border:1px solid var(--accent-2); box-shadow:var(--focus)}
.cmdk .cmdk-list{max-height:55vh;overflow:auto}
.cmdk .cmdk-item{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);cursor:pointer}
.kbd{border:1px solid var(--border);border-bottom-width:3px;border-radius:12px;padding:4px 8px;font:600 14px/1 Inter,system-ui;color:var(--muted)}

/* Print */
@media print{
  header, .rail, .sticky-cta, #demo, #faq, footer { display:none !important }
  body{ background:#fff }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  section { transition: none; transform: none; opacity: 1; }
  * { transition: none !important; animation: none !important; }
}

/* Small extras */
.video-demo { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.social-icons { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }
.social-icons a { color: var(--text); font-size: 28px; }
.animated { animation: fadeIn 1.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile */
@media(max-width:768px){
  .container{padding:0 24px}
  .hero{padding:100px 0 32px}
  .section-title{font-size:48px}
  .section-sub{font-size:20px}
  .h1{font-size:clamp(36px,9vw,56px)}
  .sub{font-size:18px}
  .grid{gap:24px}
  .card{padding:28px}
  .btn{padding:16px 24px;min-height:52px}
  .sticky-cta{right:24px;bottom:24px}
  .backtop{left:24px;bottom:24px}
}
@media(max-width:480px){
  .container{padding:0 20px}
  .hero-grid{gap:32px}
  .btn{padding:14px 22px;min-height:48px;font-size:16px}
  .input{padding:16px 18px}
  .modal{width:92vw;padding:24px}
}