/* ==========================================================================
   Technoverse Systems — Odoo ERP solutions + module store.
   Light background, deep navy (#040816) ink and bands, one blue highlight.
   Archivo for headings, Inter for text, IBM Plex Mono for small labels.
   Loaded by includes/head.php on every public page. JS: assets/js/app.js.
   ========================================================================== */

:root{
  --bg:#F3F6FB;
  --bg-2:#E6ECF5;
  --card:#FFFFFF;
  --ink:#040816;
  --ink-2:#1A2138;
  --muted:#667089;
  --line:rgba(4,8,22,.1);
  --line-2:rgba(4,8,22,.18);
  --accent:#1D4ED8;
  --accent-2:#1E3A8A;
  --accent-soft:#E2E9FB;
  --accent-rgb:29,78,216;
  --accent-light:#93B4FF;
  --aura-rgb:56,189,248;
  --dark:#040816;
  --green:#119C5A;
  --amber:#F2A516;

  --head:'Archivo', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --gutter:clamp(18px, 3.4vw, 48px);
  --max:1320px;
  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --shadow:0 1px 1px rgba(14,14,14,.04), 0 12px 32px -14px rgba(14,14,14,.18);
  --shadow-lg:0 2px 4px rgba(14,14,14,.04), 0 30px 60px -24px rgba(14,14,14,.28);
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img, svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, select, textarea{ font:inherit; color:inherit; }
::selection{ background:var(--ink); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Type ---------- */
h1, h2, h3, h4{ font-family:var(--head); font-weight:700; letter-spacing:-0.03em; font-stretch:108%; }
h1{ font-size:clamp(36px, 4.2vw, 64px); line-height:1.03; }
h2{ font-size:clamp(28px, 3.1vw, 46px); line-height:1.06; }
h3{ font-size:clamp(20px, 1.7vw, 26px); line-height:1.15; letter-spacing:-0.02em; }
h4{ font-size:17px; line-height:1.25; letter-spacing:-0.015em; }
.blue{ color:var(--accent); }
.muted{ color:var(--muted); }
.lead{ font-size:clamp(16.5px, 1.25vw, 19px); color:var(--ink-2); line-height:1.6; }
.label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.line-mask{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.line-mask > span{ display:block; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.section{ position:relative; padding:clamp(80px, 10vw, 140px) 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px, 4.5vw, 60px); }
.sec-head h2{ margin-top:14px; max-width:720px; }
.sec-head .lead{ max-width:400px; }
main{ display:block; overflow-x:clip; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:100px;
  font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; isolation:isolate; transition:color .45s var(--ease), border-color .45s, transform .45s var(--ease);
}
.btn::before{ content:""; position:absolute; left:50%; top:100%; width:170%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,0) scale(0); transition:transform .65s var(--ease); z-index:-1; }
.btn:hover::before{ transform:translate(-50%,-62%) scale(1); }
.btn svg{ width:16px; height:16px; transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink::before{ background:var(--accent); }
.btn-blue{ background:var(--accent); color:#fff; }
.btn-blue::before{ background:var(--ink); }
.btn-line{ border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.5); }
.btn-line::before{ background:var(--ink); }
.btn-line:hover{ color:#fff; border-color:var(--ink); }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.ulink{ position:relative; }
.ulink::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.ulink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Header ---------- */
.header{ position:fixed; top:14px; left:0; right:0; z-index:150; padding:0 var(--gutter); transition:transform .6s var(--ease); }
.header.is-hidden{ transform:translateY(-140%); }
.nav{
  max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:8px 8px 8px 18px; border-radius:100px; background:rgba(255,255,255,.72); border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:0 8px 30px -18px rgba(14,14,14,.3);
}
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:800; font-size:17px; letter-spacing:-0.02em; font-stretch:110%; }
.logo i{ width:28px; height:28px; border-radius:8px; background:var(--ink); position:relative; overflow:hidden; flex:0 0 auto; }
.logo i::after{ content:""; position:absolute; inset:7px; border-radius:3px; background:var(--accent); transition:transform .6s var(--ease); }
.logo:hover i::after{ transform:rotate(90deg) scale(.85); }
.nav-links{ display:flex; gap:2px; }
.nav-links a{ padding:8px 14px; border-radius:100px; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:background .25s, color .25s; }
.nav-links a:hover{ background:var(--bg-2); color:var(--ink); }
.nav-links a.is-active{ background:var(--ink); color:#fff; }
.nav-right{ display:flex; align-items:center; gap:6px; }
.icon-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:background .25s; }
.icon-btn:hover{ background:var(--bg-2); }
.icon-btn svg{ width:19px; height:19px; }
.count{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.count[data-count="0"]{ display:none; }
.burger{ display:none; }
.mnav{ position:fixed; top:84px; left:var(--gutter); right:var(--gutter); z-index:140; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); padding:10px; display:flex; flex-direction:column; opacity:0; transform:translateY(-10px) scale(.98); visibility:hidden; transition:opacity .3s, transform .45s var(--ease), visibility .3s; }
.mnav a{ padding:13px 14px; border-radius:14px; font-weight:500; }
.mnav a:hover{ background:var(--bg); }
.mnav .btn{ margin-top:8px; }
.nav-open .mnav{ opacity:1; transform:none; visibility:visible; }
@media (max-width:980px){ .nav-links, .nav-right .btn{ display:none; } .burger{ display:inline-flex; } }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 60px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
.hero h1{ margin:20px 0 20px; }
.hero .lead{ max-width:500px; }
.search{
  display:flex; align-items:center; gap:10px; margin-top:30px; max-width:520px; padding:7px 7px 7px 18px; border-radius:100px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); transition:box-shadow .3s, border-color .3s;
}
.search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.1), var(--shadow); }
.search svg{ width:19px; height:19px; color:var(--muted); flex:0 0 auto; }
.search input{ flex:1; min-width:0; border:none; background:none; font-size:15.5px; padding:8px 0; }
.search input:focus{ outline:none; }
.search .typed{ position:absolute; pointer-events:none; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:100px; border:1px solid var(--line-2); font-size:13.5px; font-weight:500; background:rgba(255,255,255,.5); transition:all .3s var(--ease); }
.chip:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }
.chip i{ width:8px; height:8px; border-radius:50%; }
.hero-meta{ display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.hero-meta div b{ display:block; font-family:var(--head); font-size:26px; font-weight:700; letter-spacing:-0.03em; }
.hero-meta div span{ font-size:13px; color:var(--muted); }

/* the tilted wall of module cards */
.wall{
  position:relative; height:min(760px, 86svh); perspective:1400px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite:intersect;
}
.wall-inner{ position:absolute; inset:-10% 3% -10% -12%; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; transform:rotateX(18deg) rotateY(-14deg) rotateZ(6deg); transform-style:preserve-3d; will-change:transform; }
.wall-col{ display:flex; flex-direction:column; gap:16px; will-change:transform; }
.wall-col > div{ display:flex; flex-direction:column; gap:16px; }
.pcard{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover{ transform:translateY(-4px) scale(1.02); box-shadow:var(--shadow-lg); }
.pcard-top{ display:flex; align-items:center; gap:12px; }
.pic{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pic svg{ width:22px; height:22px; }
.pcard .pcat{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pcard h4{ font-size:15.5px; margin-top:2px; }
.pcard p{ font-size:13px; color:var(--ink-2); line-height:1.5; }
.pcard-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid var(--line); }
.price{ font-family:var(--head); font-weight:700; font-size:18px; letter-spacing:-0.02em; }
.stars{ color:var(--amber); font-size:11px; letter-spacing:1px; }
.vers{ display:flex; gap:4px; }
.vers span{ font-family:var(--mono); font-size:10px; padding:3px 6px; border-radius:6px; background:var(--bg); color:var(--ink-2); }
.t-blue{ background:#E6EAFF; color:#2B4BFF; } .t-green{ background:#E3F5EC; color:var(--green); }
.t-violet{ background:#EFEAFF; color:#6A4DFF; } .t-amber{ background:#FFF3DC; color:#C47F00; }
.t-rose{ background:#FFE9EC; color:#DB3B50; } .t-teal{ background:#E0F5F3; color:#0E9384; } .t-ink{ background:#ECECE8; color:var(--ink); }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .wall{ height:520px; margin:0 calc(var(--gutter) * -1); }
  .wall-inner{ grid-template-columns:repeat(2, 1fr); inset:-10% -4%; }
  .wall-col:nth-child(3){ display:none; }
}

/* ---------- Trust strip ---------- */
.strip{ border-block:1px solid var(--line); background:rgba(255,255,255,.45); overflow:hidden; padding:18px 0; }
.strip-track{ display:flex; width:max-content; will-change:transform; }
.strip-group{ display:flex; align-items:center; gap:44px; padding-right:44px; }
.strip-item{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.strip-item svg{ width:18px; height:18px; color:var(--accent); }
.strip-dot{ width:5px; height:5px; border-radius:50%; background:var(--line-2); }

/* ---------- Spotlight (sticky product story) ---------- */
.spot{ position:relative; }
.spot-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.spot-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px, 5vw, 80px); align-items:center; width:100%; }
.spot-texts{ position:relative; display:grid; margin-top:26px; }
.spot-text{ grid-area:1 / 1; display:flex; flex-direction:column; justify-content:flex-start; opacity:0; pointer-events:none; }
.spot-text.is-on{ opacity:1; pointer-events:auto; }
.spot-text h3{ font-size:clamp(28px, 2.8vw, 42px); letter-spacing:-0.03em; margin:12px 0 14px; }
.spot-text ul{ list-style:none; margin:20px 0 26px; display:flex; flex-direction:column; gap:10px; }
.spot-text li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); }
.spot-text li svg{ width:20px; height:20px; flex:0 0 auto; color:var(--accent); margin-top:1px; }
.spot-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spot-price{ font-family:var(--head); font-weight:700; font-size:28px; letter-spacing:-0.03em; margin-right:8px; }
.spot-nav{ display:flex; gap:8px; margin-bottom:10px; }
.spot-nav button{ height:6px; width:28px; border-radius:6px; background:var(--line-2); transition:width .5s var(--ease), background .3s; }
.spot-nav button.is-on{ width:56px; background:var(--ink); }

.screen{ position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); overflow:hidden; height:520px; }
.screen-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); background:#FBFBF9; }
.screen-bar i{ width:10px; height:10px; border-radius:50%; background:#E2E2DD; }
.screen-bar span{ margin-left:10px; font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.screen-views{ position:absolute; inset:45px 0 0 0; }
.sview{ position:absolute; inset:0; padding:20px 20px 22px; display:flex; flex-direction:column; gap:12px; opacity:0; visibility:hidden; }
.sview.is-on{ opacity:1; visibility:visible; }
.sv-head{ display:flex; justify-content:space-between; align-items:center; }
.sv-head b{ font-family:var(--head); font-size:17px; letter-spacing:-0.02em; }
.sv-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.sv-kpi{ border:1px solid var(--line); border-radius:14px; padding:12px; }
.sv-kpi small{ display:block; font-size:11px; color:var(--muted); }
.sv-kpi b{ font-family:var(--head); font-size:22px; letter-spacing:-0.02em; }
.sv-rows{ display:flex; flex-direction:column; gap:8px; }
.sv-row{ display:grid; grid-template-columns:32px 1fr auto auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:13px; }
.sv-row .av{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.sv-row b{ font-weight:600; display:block; } .sv-row small{ color:var(--muted); font-size:11.5px; }
.pill{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:100px; white-space:nowrap; }
.pill.wait{ background:#FFF3DC; color:#A86A00; } .pill.done{ background:#E3F5EC; color:var(--green); } .pill.now{ background:var(--accent-soft); color:var(--accent); }
.quote-doc{ border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.sv-meta{ display:flex; gap:18px; font-size:12px; color:var(--muted); }
.sv-meta b{ color:var(--ink); font-weight:600; }
.sign-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.qline{ display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-bottom:1px dashed var(--line-2); }
.qtotal{ display:flex; justify-content:space-between; font-family:var(--head); font-weight:700; font-size:20px; padding-top:4px; }
.steps-mini{ display:flex; gap:8px; }
.steps-mini span{ flex:1; height:6px; border-radius:6px; background:var(--bg-2); overflow:hidden; }
.steps-mini span i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
.sign-btn{ align-self:flex-start; }
.matrix{ display:grid; grid-template-columns:1.4fr repeat(4, 1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:12.5px; }
.matrix > div{ padding:11px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.matrix > div:nth-child(5n+1){ justify-content:flex-start; font-weight:600; }
.matrix .mh{ background:#FBFBF9; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; color:var(--muted); }
.tgl{ width:30px; height:18px; border-radius:18px; background:var(--bg-2); position:relative; transition:background .35s; }
.tgl::after{ content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .35s var(--ease); }
.tgl.on{ background:var(--accent); }
.tgl.on::after{ transform:translateX(12px); }
.spot-progress{ position:absolute; left:0; right:0; bottom:28px; }
@media (max-width:980px){
  .spot{ height:auto !important; }
  .spot-sticky{ position:relative; height:auto; padding:80px 0; }
  .spot-grid{ grid-template-columns:1fr; }
}

/* ---------- Categories ---------- */
.cats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.cat{
  position:relative; padding:22px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); overflow:hidden; min-height:170px;
  display:flex; flex-direction:column; justify-content:space-between; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.cat::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .6s var(--ease); z-index:0; }
.cat > *{ position:relative; z-index:1; transition:color .4s; }
.cat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cat:hover::before{ transform:none; }
.cat:hover, .cat:hover .muted{ color:#fff; }
.cat .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.cat .n{ font-family:var(--mono); font-size:12px; }
.cat .arrow{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:transform .5s var(--ease), border-color .3s; }
.cat .arrow svg{ width:15px; height:15px; }
.cat:hover .arrow{ transform:rotate(-45deg); border-color:rgba(255,255,255,.4); }
.cat h3{ font-size:20px; }
.cat.is-big{ grid-column:span 2; background:var(--accent); color:#fff; border-color:transparent; }
.cat.is-big .muted{ color:rgba(255,255,255,.75); }
.cat.is-big .arrow{ border-color:rgba(255,255,255,.4); }
@media (max-width:980px){ .cats{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cats{ grid-template-columns:1fr; } .cat.is-big{ grid-column:auto; } }

/* ---------- Product grid ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{ padding:9px 15px; border-radius:100px; border:1px solid var(--line-2); font-size:14px; font-weight:500; transition:all .3s var(--ease); }
.tab:hover{ border-color:var(--ink); }
.tab.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:980px){ .pgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .pgrid{ grid-template-columns:1fr; } }

/* ---------- How buying works ---------- */
.how{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.how-line{ position:absolute; left:0; right:0; top:27px; height:1px; background:var(--line); }
.how-line i{ display:block; height:100%; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); }
.how-step{ position:relative; padding-right:20px; }
.how-num{ width:54px; height:54px; border-radius:50%; background:var(--bg); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:18px; margin-bottom:24px; transition:background .5s, color .5s, border-color .5s; }
.how-step.is-on .how-num{ background:var(--ink); color:#fff; border-color:var(--ink); }
.how-step h3{ margin-bottom:8px; }
.how-step p{ color:var(--ink-2); font-size:15px; }
@media (max-width:800px){ .how{ grid-template-columns:1fr; gap:30px; } .how-line{ display:none; } }

/* ---------- Services (compact) ---------- */
.svc-rows{ border-top:1px solid var(--line-2); }
.svc-row{ display:grid; grid-template-columns:60px 1.1fr 1.4fr 44px; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); transition:padding .5s var(--ease); }
.svc-row:hover{ padding-left:14px; }
.svc-row .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.svc-row h3{ transition:color .3s; }
.svc-row:hover h3{ color:var(--accent); }
.svc-row p{ color:var(--ink-2); font-size:15px; }
.svc-row .go{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:all .45s var(--ease); }
.svc-row .go svg{ width:16px; height:16px; }
.svc-row:hover .go{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(-45deg); }
@media (max-width:800px){ .svc-row{ grid-template-columns:40px 1fr 44px; } .svc-row p{ display:none; } }

/* ---------- Reviews ---------- */
.revs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.rev{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:16px; }
.rev p{ font-size:16px; line-height:1.6; flex:1; }
.rev .who{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.rev .av{ width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.rev b{ display:block; font-size:14.5px; } .rev small{ color:var(--muted); font-size:13px; }
@media (max-width:900px){ .revs{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 6vw, 90px); }
.faq-item{ border-bottom:1px solid var(--line-2); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 0; text-align:left; font-weight:600; font-size:17px; }
.faq-q i{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:background .3s, border-color .3s, transform .5s var(--ease); }
.faq-q i::before, .faq-q i::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px; background:currentColor; transition:transform .5s var(--ease); }
.faq-q i::after{ transform:rotate(90deg); }
.faq-item.is-open .faq-q i{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(180deg); }
.faq-item.is-open .faq-q i::after{ transform:rotate(0); }
.faq-a{ height:0; overflow:hidden; transition:height .5s var(--ease); }
.faq-a p{ padding-bottom:22px; color:var(--ink-2); max-width:620px; }
@media (max-width:800px){ .faq-grid{ grid-template-columns:1fr; } }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; border-radius:32px; background:var(--dark); color:#fff; padding:clamp(40px, 6vw, 80px); display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.cta h2{ color:#fff; }
.cta p{ color:rgba(255,255,255,.72); margin-top:16px; max-width:460px; font-size:17px; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cta .btn-line{ border-color:rgba(255,255,255,.3); color:#fff; background:transparent; }
.cta .btn-line::before{ background:#fff; }
.cta .btn-line:hover{ color:var(--ink); }
.cta-glow{ position:absolute; width:520px; height:520px; right:-160px; top:-240px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.55), transparent 65%); pointer-events:none; }
@media (max-width:800px){ .cta{ grid-template-columns:1fr; } .cta-actions{ justify-content:flex-start; } }

/* ---------- Footer ---------- */
.footer{ padding:20px 0 30px; }
.footer-grid a.logo{ display:inline-flex; padding:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:36px; padding-bottom:50px; border-bottom:1px solid var(--line-2); }
.footer p{ color:var(--ink-2); max-width:330px; margin-top:14px; font-size:15px; }
.footer h6{ font-family:var(--mono); font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px; }
.footer-grid a{ display:block; padding:4px 0; font-size:15px; }
.news{ display:flex; gap:6px; margin-top:22px; padding:5px; border-radius:100px; background:#fff; border:1px solid var(--line); max-width:360px; }
.news input{ flex:1; min-width:0; border:none; background:none; padding:0 14px; font-size:14.5px; }
.news input:focus{ outline:none; }
.footer-bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:22px; font-size:13.5px; color:var(--muted); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Cart drawer ---------- */
.overlay{ position:fixed; inset:0; z-index:300; background:rgba(14,14,14,.35); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.overlay.is-open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:10px; right:10px; bottom:10px; z-index:301; width:min(440px, calc(100vw - 20px)); background:#fff; border-radius:26px; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); transform:translateX(calc(100% + 20px)); transition:transform .6s var(--ease); }
.drawer.is-open{ transform:none; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line); }
.drawer-head h3{ font-size:22px; }
.drawer-body{ flex:1; overflow-y:auto; padding:6px 24px; }
.drawer-empty{ text-align:center; color:var(--muted); padding:60px 10px; }
.drawer-empty b{ display:block; font-family:var(--head); font-size:22px; color:var(--ink); margin-bottom:6px; }
.line-item{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.line-item b{ display:block; font-weight:600; }
.line-item span{ font-size:13px; color:var(--muted); }
.line-item .li-price{ font-family:var(--head); font-weight:700; font-size:16px; color:var(--ink); white-space:nowrap; }
.li-remove{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.li-remove:hover{ background:var(--ink); color:#fff; }
.li-remove svg{ width:12px; height:12px; }
.drawer-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); background:var(--bg); border-radius:0 0 26px 26px; }
.drawer-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-weight:600; }
.drawer-total b{ font-family:var(--head); font-size:28px; letter-spacing:-0.03em; }
.drawer-note{ font-size:12.5px; color:var(--muted); margin-top:10px; }
.form-msg{ font-size:14px; margin-top:10px; }
.form-msg.ok{ color:var(--green); } .form-msg.err{ color:#C8321B; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--ink-2); }
.field input{ width:100%; background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; font-size:15px; }
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.1); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- Chat + WhatsApp ---------- */
.fabs{ position:fixed; right:var(--gutter); bottom:20px; z-index:170; display:flex; gap:8px; transition:opacity .4s, transform .5s var(--ease); }
.fabs:not(.is-shown){ opacity:0; transform:translateY(16px); pointer-events:none; }
.fab{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -12px rgba(14,14,14,.45); transition:transform .4s var(--ease); }
.fab:hover{ transform:scale(1.07); }
.fab svg{ width:22px; height:22px; }
.fab-chat{ background:var(--ink); color:#fff; }
.fab-wa{ background:#25D366; color:#fff; }
.chat{ position:fixed; right:var(--gutter); bottom:84px; z-index:260; width:min(370px, calc(100vw - 28px)); height:min(520px, calc(100svh - 130px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transform-origin:100% 100%; transition:opacity .3s, transform .45s var(--ease), visibility .3s; }
.chat.is-open{ opacity:1; visibility:visible; transform:none; }
.chat-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.chat-head b{ display:block; font-family:var(--head); font-size:16px; }
.chat-head span{ font-size:12.5px; color:var(--green); }
.chat-close{ width:32px; height:32px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.chat-close svg{ width:13px; height:13px; }
.chat-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.msg{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.45; }
.msg.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.msg.typing{ display:flex; gap:4px; }
.msg.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing 1s infinite; }
.msg.typing i:nth-child(2){ animation-delay:.15s; } .msg.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 50%{ transform:translateY(-4px); opacity:.4; } }
.chat-chips{ display:flex; gap:6px; overflow-x:auto; padding:10px 14px; background:var(--bg); scrollbar-width:none; }
.chat-chips::-webkit-scrollbar{ display:none; }
.chat-chips button{ flex:0 0 auto; font-size:13px; padding:7px 12px; border-radius:100px; background:#fff; border:1px solid var(--line); white-space:nowrap; }
.chat-chips button:hover{ border-color:var(--ink); }
.chat-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat-input input{ flex:1; min-width:0; border:1px solid var(--line-2); border-radius:100px; padding:10px 15px; font-size:14.5px; }
.chat-input input:focus{ outline:none; border-color:var(--ink); }
.chat-input button{ width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.chat-input button svg{ width:16px; height:16px; }

/* ---------- Toast ---------- */
.toast{ position:fixed; left:50%; bottom:24px; z-index:400; width:max-content; max-width:calc(100vw - 32px); display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:100px; background:var(--ink); color:#fff; font-weight:500; font-size:14.5px; box-shadow:var(--shadow-lg); transform:translate(-50%, 160%); transition:transform .5s var(--ease); pointer-events:none; }
.toast::before{ content:"✓"; width:20px; height:20px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:11px; }
.toast.is-on{ transform:translate(-50%, 0); }

/* ---------- Reveal defaults (visible without JS / with reduced motion) ---------- */
.js [data-reveal], .js [data-stagger] > *{ opacity:0; }
.js .line-mask > span{ transform:translateY(105%); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-reveal], .js [data-stagger] > *{ opacity:1; }
  .js .line-mask > span{ transform:none; }
}

/* ---------- Small screens: the mock app screen gets a fixed height ---------- */
@media (max-width:600px){
  .screen{ height:480px; }
  .toast{ top:16px; bottom:auto; transform:translate(-50%, -180%); }
  .toast.is-on{ transform:translate(-50%, 0); }
  .sview{ padding:14px; gap:10px; }
  .sv-kpi{ padding:10px; } .sv-kpi b{ font-size:18px; }
  .sv-row{ grid-template-columns:32px 1fr auto; } .sv-row .t{ display:none; }
  .matrix{ font-size:11.5px; } .matrix > div{ padding:9px 6px; }
  .hero-meta{ gap:20px; }
}

/* ==========================================================================
   Motion pack: intro, cursor, statement, spotlight notes, tilt cards,
   dark services panel, review rows, footer reveal.
   ========================================================================== */
.js [data-hero], .js .wall .pcard, .js .pgrid > *, .js .how-ui{ opacity:0; }

/* ---------- Intro / page-transition curtain ---------- */
/* Loader: navy column curtain, masked logo/tagline reveal, big counter; columns lift away in a stagger */
.loader{ position:fixed; inset:0; z-index:600; color:#fff; display:none; }
.js .loader{ display:block; }
.js .loader.is-done{ display:none; }
.ld-cols{ position:absolute; inset:0; display:flex; }
.ld-col{ flex:1; height:100%; margin-right:-1px; background:var(--dark); transition:transform 1.4s cubic-bezier(.76,0,.24,1) calc(.35s + var(--i) * .12s); }
.loader.is-out .ld-col{ transform:translateY(-100%); }
.ld-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.ld-mask{ display:block; overflow:hidden; }
.ld-mask > *{ display:block; transform:translateY(110%); animation:ldUp 1.4s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.loader.is-out .ld-mask > *{ animation:ldUpOut .8s cubic-bezier(.7,0,.3,1) forwards; }
.ld-logo{ height:46px; width:auto; }
.ld-tag{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.ld-foot{ position:absolute; left:clamp(16px,4vw,48px); right:clamp(16px,4vw,48px); bottom:clamp(20px,4vw,44px); display:flex; justify-content:space-between; align-items:flex-end; gap:16px; transition:opacity .35s; }
.ld-meta{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.5); }
.ld-num{ font-size:clamp(72px,13vw,190px); font-weight:500; line-height:.78; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.ld-num::after{ content:'%'; font-size:.22em; letter-spacing:0; margin-left:.12em; vertical-align:top; color:rgba(255,255,255,.45); }
.ld-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.08); transition:opacity .35s; }
.ld-bar i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--p, 0)); }
.loader.is-out .ld-foot, .loader.is-out .ld-bar{ opacity:0; }
.loader.is-leaving .ld-col{ animation:ldColIn .9s cubic-bezier(.76,0,.24,1) calc(var(--i) * .09s) both; transition:none; }
.loader.is-leaving .ld-center, .loader.is-leaving .ld-foot, .loader.is-leaving .ld-bar{ opacity:0; }
@keyframes ldUp{ to{ transform:none; } }
@keyframes ldUpOut{ from{ transform:none; } to{ transform:translateY(-110%); } }
@keyframes ldColIn{ from{ transform:translateY(100%); } to{ transform:none; } }

/* ---------- Cursor (fine pointers only; the system cursor stays) ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:700; pointer-events:none; display:none; transition:opacity .3s; }
.has-cursor .cursor{ display:block; }
.cursor.is-hidden{ opacity:0; }
.cursor-dot{ position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--accent); }
.cursor-ring{
  position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1px solid rgba(14,14,14,.28);
  display:flex; align-items:center; justify-content:center;
  transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s, border-color .3s;
}
.cursor-ring b{ font-size:12px; font-weight:600; color:#fff; opacity:0; transition:opacity .2s; letter-spacing:.01em; }
.cursor.is-link .cursor-ring{ width:52px; height:52px; margin:-26px 0 0 -26px; border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.06); }
.cursor.is-label .cursor-ring{ width:74px; height:74px; margin:-37px 0 0 -37px; background:var(--ink); border-color:var(--ink); }
.cursor.is-label .cursor-ring b{ opacity:1; }
.cursor.is-label .cursor-dot{ opacity:0; }
.cursor.on-dark .cursor-ring{ border-color:rgba(255,255,255,.35); }
.cursor.on-dark .cursor-dot{ background:#fff; }

/* ---------- Hero extras ---------- */
.hero-aura{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-aura i{ position:absolute; border-radius:50%; will-change:transform; }
.hero-aura i:nth-child(1){ width:760px; height:760px; right:-200px; top:-260px; background:radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 62%); animation:aura1 16s ease-in-out infinite alternate; }
.hero-aura i:nth-child(2){ width:620px; height:620px; right:280px; bottom:-320px; background:radial-gradient(circle, rgba(var(--aura-rgb),.12), transparent 62%); animation:aura2 20s ease-in-out infinite alternate; }
@keyframes aura1{ to{ transform:translate(-180px, 140px) scale(1.12); } }
@keyframes aura2{ to{ transform:translate(160px, -120px) scale(.9); } }
.hero-grid{ position:relative; z-index:1; }
.hero-copy{ will-change:transform, opacity; }
.scroll-hint{ position:absolute; left:50%; bottom:22px; z-index:2; width:24px; height:38px; margin-left:-12px; border:1.5px solid var(--line-2); border-radius:14px; }
.scroll-hint span{ position:absolute; left:50%; top:8px; width:3px; height:7px; margin-left:-1.5px; border-radius:3px; background:var(--ink); animation:hint 1.8s var(--ease) infinite; }
@keyframes hint{ 0%{ opacity:0; transform:translateY(-3px); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(12px); } }
@media (max-width:980px){ .scroll-hint{ display:none; } }

/* ---------- Statement ---------- */
.statement{ padding:clamp(90px, 12vw, 170px) 0 clamp(50px, 7vw, 100px); }
.statement-text{ margin-top:22px; max-width:1120px; font-family:var(--head); font-stretch:108%; font-weight:600; font-size:clamp(26px, 3.1vw, 46px); line-height:1.24; letter-spacing:-0.025em; }
.st-pill{ display:inline-flex; align-items:center; gap:.3em; padding:.1em .5em .12em .38em; border-radius:100px; font-size:.7em; vertical-align:.14em; letter-spacing:-0.01em; transform-origin:50% 60%; }
.st-pill svg{ width:.9em; height:.9em; }

/* ---------- Spotlight extras ---------- */
.spot-nav{ margin-top:18px; }
.spot-nav button{ position:relative; overflow:hidden; }
.spot-nav button.is-on{ background:var(--line-2); }
.spot-nav button i{ position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); }
.screen-wrap{ position:relative; perspective:1600px; }
.screen{ will-change:transform; }
.note{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(12px) scale(.92); pointer-events:none; white-space:nowrap;
}
.note b{ display:block; font-size:13.5px; line-height:1.3; }
.note small{ font-size:12px; color:var(--muted); }
.note-ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.note-ic svg{ width:17px; height:17px; }
.note-a{ left:-46px; bottom:-38px; }
.note-b{ right:56px; top:-30px; }
.note-c{ right:-36px; bottom:-38px; }
@media (max-width:1200px){ .note-a{ left:12px; } .note-c{ right:12px; } }

/* ---------- Categories: icons ---------- */
.cat-ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:transform .6s var(--ease), background .3s, color .3s; }
.cat-ic svg{ width:20px; height:20px; }
.cat:hover .cat-ic{ transform:rotate(-8deg) scale(1.08); background:rgba(255,255,255,.14); color:#fff; }
.cat.is-big .cat-ic{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------- Tabs: sliding pill ---------- */
.tabs{ position:relative; }
.tab{ position:relative; z-index:1; transition:color .35s, border-color .35s; }
.tab-pill{ position:absolute; left:0; top:0; z-index:0; border-radius:100px; background:var(--ink); transition:transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease); }
.tabs:not(.has-pill) .tab-pill{ display:none; }
.tabs.has-pill .tab.is-on{ background:transparent; }

/* ---------- Products: tilt + glare ---------- */
.glare{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.55), transparent 42%), radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb),.07), transparent 55%);
}
.flyer{ position:fixed; z-index:450; pointer-events:none; margin:0; box-shadow:var(--shadow-lg); }
.fly-dot{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---------- How it works: mini animated UIs ---------- */
.how-ui{ margin-top:22px; height:66px; border-radius:16px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 14px; font-size:13px; box-shadow:var(--shadow); max-width:330px; }
.how-step:not(.is-on) .how-ui *, .how-step:not(.is-on) .how-ui *::after{ animation-play-state:paused !important; }
.ui-ver span{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-right:4px; }
.ui-ver b{ font-family:var(--mono); font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:100px; border:1px solid var(--line-2); animation:verPick 3.6s infinite; }
.ui-ver b:nth-of-type(2){ animation-delay:1.2s; }
.ui-ver b:nth-of-type(3){ animation-delay:2.4s; }
@keyframes verPick{ 0%, 30%{ background:var(--ink); color:#fff; border-color:var(--ink); } 34%, 100%{ background:transparent; color:var(--ink); border-color:var(--line-2); } }
.ui-card{ position:relative; flex:0 0 auto; width:48px; height:32px; border-radius:6px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ui-card i{ position:absolute; left:6px; border-radius:2px; }
.ui-card i:first-child{ top:7px; width:11px; height:8px; background:#F2C94C; }
.ui-card i:last-child{ bottom:6px; width:28px; height:3px; background:rgba(255,255,255,.7); }
.ui-paybtn{ position:relative; flex:1; height:36px; border-radius:100px; background:var(--ink); color:#fff; overflow:hidden; font-weight:600; }
.ui-paybtn em{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; animation:payA 3.2s var(--ease) infinite; }
.ui-paybtn em:last-child{ background:var(--green); animation-name:payB; }
@keyframes payA{ 0%, 42%{ transform:none; } 52%, 90%{ transform:translateY(-100%); } 100%{ transform:none; } }
@keyframes payB{ 0%, 42%{ transform:translateY(100%); } 52%, 90%{ transform:none; } 100%{ transform:translateY(100%); } }
.ui-dl{ flex-direction:column; align-items:stretch; justify-content:center; gap:9px; }
.ui-file{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; }
.ui-file::after{ content:"\2713"; color:var(--green); font-weight:700; opacity:0; animation:dlCheck 2.8s infinite; }
.ui-bar{ height:6px; border-radius:6px; background:var(--bg-2); overflow:hidden; }
.ui-bar i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; animation:dlBar 2.8s var(--ease) infinite; }
@keyframes dlBar{ 0%{ transform:scaleX(0); } 70%, 100%{ transform:scaleX(1); } }
@keyframes dlCheck{ 0%, 68%{ opacity:0; } 75%, 100%{ opacity:1; } }

/* ---------- Services: dark panel that opens to full width ---------- */
.dark-zone{ position:relative; padding:clamp(90px, 11vw, 150px) 0; color:#fff; isolation:isolate; }
.dark-bg{ position:absolute; inset:0; z-index:-1; background:var(--dark); overflow:hidden; clip-path:inset(0 var(--gutter) round 36px); }
.dark-bg::after{ content:""; position:absolute; width:760px; height:760px; left:-220px; top:-340px; background:radial-gradient(circle, rgba(var(--accent-rgb),.32), transparent 62%); }
.dark-zone .label{ color:rgba(255,255,255,.6); }
.dark-zone .dim{ color:rgba(255,255,255,.42); }
.dark-zone .svc-rows{ border-top-color:rgba(255,255,255,.22); }
.dark-zone .svc-row{ border-bottom-color:rgba(255,255,255,.12); }
.dark-zone .svc-row .n{ color:rgba(255,255,255,.5); }
.dark-zone .svc-row p{ color:rgba(255,255,255,.64); }
.dark-zone .svc-row:hover h3{ color:var(--accent-light); }
.dark-zone .svc-row .go{ border-color:rgba(255,255,255,.25); }
.dark-zone .svc-row:hover .go{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white::before{ background:var(--accent); }
.btn-white:hover{ color:#fff; }
.svc-preview{ position:fixed; left:0; top:0; z-index:140; width:300px; height:210px; margin:-105px 0 0 -150px; pointer-events:none; border-radius:20px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,.55); opacity:0; will-change:transform; }
.svc-slides{ height:100%; transition:transform .65s var(--ease); }
.svc-slide{ height:100%; padding:22px; display:flex; flex-direction:column; gap:12px; color:var(--ink); }
.svc-slide b{ font-family:var(--head); font-size:18px; letter-spacing:-0.02em; }
.s-blue{ background:linear-gradient(140deg, var(--accent-soft), #FAFAFA); }
.s-violet{ background:linear-gradient(140deg, #17172A, #2B2455); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); border-radius:20px; }
.s-green{ background:linear-gradient(140deg, #DDF4E8, #F3FBF6); }
.s-amber{ background:linear-gradient(140deg, #FFF0D2, #FFF9EE); }
.svc-slide ul{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.svc-slide li{ display:flex; align-items:center; gap:9px; }
.svc-slide li i{ width:15px; height:15px; border-radius:50%; background:var(--green); flex:0 0 auto; }
.svc-slide li.off i{ background:transparent; border:1.5px solid var(--line-2); }
.svc-slide code{ font-family:var(--mono); font-size:12px; line-height:1.75; color:#C9CCE8; }
.svc-slide code span{ color:#FF9AC1; }
.svc-slide code em{ color:#9AE6B4; font-style:normal; }
.mig{ display:flex; align-items:center; gap:14px; font-family:var(--head); font-size:36px; font-weight:700; letter-spacing:-0.03em; margin-top:6px; }
.mig svg{ width:26px; height:26px; color:var(--green); }
.svc-slide small{ color:var(--muted); font-size:13px; }
.bub{ align-self:flex-start; background:#fff; border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:13px; box-shadow:var(--shadow); }
.bub.me{ align-self:flex-end; background:var(--ink); color:#fff; border-radius:14px 14px 4px 14px; }

/* ---------- Reviews: two moving rows ---------- */
.rev-rows{ display:flex; flex-direction:column; gap:16px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-track{ display:flex; gap:16px; width:max-content; will-change:transform; }
.rev-track .rev{ width:min(400px, 82vw); flex:0 0 auto; }

/* ---------- CTA glow follows the pointer ---------- */
.cta-glow{ left:0; top:0; right:auto; margin:-260px 0 0 -260px; }
.cta h2 .line-mask > span{ color:#fff; }

/* ---------- Toast with an action ---------- */
.toast.is-on{ pointer-events:auto; }
.toast button{ margin-left:4px; padding:6px 12px; border-radius:100px; background:#fff; color:var(--ink); font-size:13px; font-weight:600; }

/* ---------- Footer revealed from under the page ---------- */
.to-top{ color:var(--ink-2); }
.screen-bar span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fab-chat{ box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 14px 30px -12px rgba(14,14,14,.45); }
@media (min-width:900px){ .footer-bottom{ padding-right:130px; } }
@media (min-width:900px) and (min-height:680px){
  main{ position:relative; z-index:2; background:var(--bg); border-radius:0 0 40px 40px; box-shadow:0 40px 60px -44px rgba(14,14,14,.35); }
  .footer{ position:sticky; bottom:0; z-index:1; background:var(--bg-2); margin-top:-40px; padding-top:100px; }
}

/* ---------- Hero badge + underline ---------- */
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border-radius:100px; background:rgba(255,255,255,.75);
  border:1px solid var(--line); box-shadow:var(--shadow); font-size:13.5px; font-weight:500; color:var(--ink-2); position:relative; overflow:hidden;
  transition:border-color .3s, transform .45s var(--ease);
}
.hero-badge:hover{ border-color:rgba(var(--accent-rgb), .45); transform:translateY(-2px); }
.hero-badge b{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:100px; background:var(--accent); color:#fff; letter-spacing:.01em; }
.hero-badge svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.hero-badge:hover svg{ transform:translateX(3px); }
.hero-badge::after{ content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); transform:skewX(-20deg); animation:shine 5s var(--ease) 2.5s infinite; }
@keyframes shine{ 0%{ left:-80px; } 22%, 100%{ left:calc(100% + 40px); } }
.line-mask.has-u{ padding-bottom:.24em; margin-bottom:-.24em; }
.u{ position:relative; display:inline-block; white-space:nowrap; }
.u svg{ position:absolute; left:-2%; width:104%; bottom:-.2em; height:.34em; overflow:visible; pointer-events:none; }
.u path{ fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.55; }
.no-js-u .u path, html:not(.js) .u path{ stroke-dashoffset:0; }

/* ---------- Product cards: versions ---------- */

/* ---------- Paper grain for a warmer, printed feel ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Small refinements ---------- */
.how-line i{ background:var(--accent); }
.how-step.is-on .how-num{ background:var(--accent); border-color:var(--accent); }
.nav-links a.is-active{ background:var(--ink); }
.cat.is-big::after{ content:""; position:absolute; width:320px; height:320px; right:-120px; bottom:-160px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events:none; }
.spot-price{ color:var(--ink); }

/* ==========================================================================
   ERP hero, navy bands
   ========================================================================== */
.hero-grid{ grid-template-columns:1.1fr .9fr; }
.hero h1{ font-size:clamp(34px, 3.9vw, 58px); font-stretch:104%; margin:22px 0 22px; }
.hero .lead{ max-width:540px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-meta{ margin-top:38px; }
.hero-visual{ position:relative; }
.js .impact{ opacity:0; }
.impact{
  position:absolute; left:-36px; bottom:56px; z-index:3; width:290px; padding:16px 18px 18px; border-radius:20px;
  background:rgba(255,255,255,.9); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.impact-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.impact-head b{ display:block; font-family:var(--head); font-size:15px; letter-spacing:-0.01em; }
.impact-head small{ font-size:12px; color:var(--muted); }
.impact-ic{ width:36px; height:36px; border-radius:11px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.impact-ic svg{ width:18px; height:18px; }
.imp-row{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; font-size:12.5px; margin-top:10px; }
.imp-row span{ color:var(--ink-2); font-weight:500; }
.imp-row em{ font-style:normal; font-weight:700; color:var(--accent); font-size:12px; }
.imp-row i{ grid-column:1 / -1; height:6px; border-radius:6px; background:var(--bg-2); overflow:hidden; }
.imp-row u{ display:block; height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg, var(--accent-2), var(--accent), #38BDF8); transform-origin:0 50%; transform:scaleX(var(--to, .8)); }
.js .imp-row u{ transform:scaleX(0); }

/* app cards on the hero wall */
.pcard .status{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--green); }
.pcard .status i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(17,156,90,.16); }
.pcard .go-mini{ width:26px; height:26px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
.pcard .go-mini svg{ width:12px; height:12px; }

/* navy trust strip */
.strip{ background:var(--dark); border:0; }
.strip-item{ color:rgba(255,255,255,.86); }
.strip-item svg{ color:var(--accent-light); }
.strip-dot{ background:rgba(255,255,255,.25); }

/* navy footer */
.footer{ background:var(--dark); color:#fff; }
.footer p{ color:rgba(255,255,255,.66); }
.footer h6{ color:rgba(255,255,255,.45); }
.footer-grid a{ color:rgba(255,255,255,.86); transition:color .25s; }
.footer-grid a:hover{ color:#fff; }
.footer .logo{ color:#fff; }
.footer .logo i{ background:#fff; }
.footer-grid{ border-bottom-color:rgba(255,255,255,.14); }
.footer-bottom{ color:rgba(255,255,255,.5); }
.footer .to-top{ color:rgba(255,255,255,.75); }
.news{ border-color:transparent; }
.news .btn-ink{ background:var(--accent); }
@media (min-width:900px) and (min-height:680px){ .footer{ background:var(--dark); } }

.dark-zone + .spot{ margin-top:0; }
@media (max-width:980px){
  .impact{ left:12px; bottom:18px; width:250px; }
  .hero-grid{ grid-template-columns:1fr; }
}

/* cooler product art to sit with the navy palette */
.wall-inner{ inset:-10% 9% -10% -16%; }
@media (max-width:480px){ .hero-badge .hide-sm{ display:none; } .hero-badge{ font-size:13px; } }
@media (max-width:980px){ .wall-inner{ inset:-10% -4%; } }

/* ==========================================================================
   Inner pages (services, modules, pricing, contact, about, account, auth…)
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero{ position:relative; padding:clamp(140px, 16vw, 190px) 0 clamp(50px, 7vw, 90px); overflow:hidden; }
.page-hero .hero-aura i:nth-child(1){ right:-260px; top:-340px; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(34px, 4.4vw, 62px); line-height:1.04; margin:18px 0 20px; max-width:920px; font-stretch:104%; }
.page-hero .lead{ max-width:680px; }
.page-hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:end; }
.page-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.crumb a:hover{ color:var(--ink); }
.crumb span{ opacity:.5; }
@media (max-width:900px){ .page-hero-grid{ grid-template-columns:1fr; gap:30px; } }

/* ---------- Generic card + utilities ---------- */
.card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px, 2.4vw, 32px); box-shadow:var(--shadow); }
.card h3{ margin-bottom:10px; }
.tint{ background:var(--bg-2); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:10px; }
.muted-sm{ font-size:14px; color:var(--muted); }
.stars{ color:var(--amber); letter-spacing:1px; }
.pill-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:100px; background:var(--accent-soft); color:var(--accent); }
.pill-tag.live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(17,156,90,.18); }
.check-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); }
.check-list li svg{ width:19px; height:19px; flex:0 0 auto; color:var(--accent); margin-top:2px; }

/* ---------- Forms ---------- */
.field select, .field textarea{ width:100%; background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; font-size:15px; }
.field textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb), .1); }
.field .hint{ display:block; font-size:12.5px; color:var(--muted); margin-top:6px; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:26px; padding:clamp(24px, 3vw, 40px); box-shadow:var(--shadow-lg); }
.form-card h2, .form-card h3{ margin-bottom:8px; }
.form-card > p{ color:var(--ink-2); margin-bottom:24px; }
.form-actions{ margin-top:8px; }
.alert{ padding:13px 16px; border-radius:14px; font-size:14.5px; margin-bottom:18px; background:#FDECEC; color:#A8261B; border:1px solid rgba(200,50,27,.18); }
.alert.ok{ background:#E6F6EE; color:#0D7A47; border-color:rgba(17,156,90,.2); }
.alert.info{ background:var(--accent-soft); color:var(--accent-2); border-color:rgba(var(--accent-rgb), .2); }
.success-box{ display:none; text-align:center; padding:20px 0 6px; }
.success-box.is-on{ display:block; }
.check-ic{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#E6F6EE; color:var(--green); display:flex; align-items:center; justify-content:center; }
.check-ic svg{ width:30px; height:30px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Auth pages ---------- */
.auth{ padding:clamp(120px, 14vw, 160px) 0 clamp(70px, 8vw, 110px); }
.auth-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; max-width:1040px; margin:0 auto; border-radius:30px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); background:#fff; }
.auth-side{ position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:clamp(28px, 4vw, 50px); display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.auth-side::after{ content:""; position:absolute; width:520px; height:520px; right:-220px; bottom:-260px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb), .55), transparent 62%); pointer-events:none; }
.auth-side > *{ position:relative; z-index:1; }
.auth-side .logo{ color:#fff; }
.auth-side .logo i{ background:#fff; }
.auth-side h2{ color:#fff; font-size:clamp(26px, 2.6vw, 36px); margin-bottom:14px; }
.auth-side p{ color:rgba(255,255,255,.7); }
.auth-side .check-list li{ color:rgba(255,255,255,.85); }
.auth-side .check-list li svg{ color:var(--accent-light); }
.auth-main{ padding:clamp(28px, 4vw, 54px); }
.auth-main h1{ font-size:clamp(28px, 2.8vw, 38px); margin:12px 0 8px; }
.auth-main > p{ color:var(--ink-2); margin-bottom:26px; }
.auth-switch{ margin-top:20px; font-size:14.5px; color:var(--muted); }
.auth-switch a, .link{ color:var(--accent); font-weight:600; }
.auth-switch a:hover, .link:hover{ text-decoration:underline; }
.forgot-row{ display:flex; justify-content:flex-end; margin:-4px 0 14px; font-size:13.5px; }
@media (max-width:860px){ .auth-grid{ grid-template-columns:1fr; } .auth-side{ gap:20px; } .auth-side .check-list{ display:none; } }

/* ---------- Services ---------- */
.svc-feature{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; background:var(--dark); color:#fff; border-radius:32px; padding:clamp(30px, 5vw, 64px); }
.svc-feature::after{ content:""; position:absolute; width:620px; height:620px; right:-200px; top:-280px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb), .5), transparent 62%); pointer-events:none; }
.svc-feature > *{ position:relative; z-index:1; }
.svc-feature h2{ color:#fff; margin:14px 0 14px; }
.svc-feature p{ color:rgba(255,255,255,.72); max-width:520px; }
.svc-feature .label{ color:rgba(255,255,255,.6); }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; }
.tag-row span{ font-size:13px; padding:7px 12px; border-radius:100px; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.88); }
.flow{ display:flex; flex-direction:column; gap:10px; }
.flow-step{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.flow-step b{ width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; }
.flow-step span{ font-weight:600; }
.flow-step small{ display:block; font-size:12.5px; color:rgba(255,255,255,.6); font-weight:400; }
.svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.svc-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:12px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.svc-card .ic{ width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:6px; transition:transform .6s var(--ease), background .3s, color .3s; }
.svc-card:hover .ic{ background:var(--accent); color:#fff; transform:rotate(-6deg); }
.svc-card .ic svg{ width:22px; height:22px; }
.svc-card p{ color:var(--ink-2); font-size:15px; flex:1; }
.svc-card .more{ font-weight:600; font-size:14.5px; color:var(--accent); display:inline-flex; gap:6px; align-items:center; }
.svc-card .more svg{ width:15px; height:15px; transition:transform .4s var(--ease); }
.svc-card:hover .more svg{ transform:translateX(4px); }
@media (max-width:980px){ .svc-feature{ grid-template-columns:1fr; } .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Stats + about ---------- */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.stat b{ display:block; font-family:var(--head); font-size:clamp(32px, 3.4vw, 46px); letter-spacing:-0.04em; line-height:1; margin-bottom:8px; }
.stat b em{ font-style:normal; color:var(--accent); }
.stat span{ color:var(--muted); font-size:14px; }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px, 6vw, 90px); align-items:center; }
.portrait{ position:relative; aspect-ratio:4/4.6; border-radius:30px; overflow:hidden; background:var(--dark); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait .initials{ font-family:var(--head); font-weight:800; font-size:clamp(80px, 12vw, 160px); color:#fff; letter-spacing:-0.05em; }
.portrait::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 10%, rgba(var(--accent-rgb), .45), transparent 55%); pointer-events:none; }
.cert{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); font-weight:600; font-size:14.5px; }
.cert i{ width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:14px; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 90px); align-items:start; }
@media (max-width:900px){ .stats{ grid-template-columns:1fr 1fr; } .about-grid, .split{ grid-template-columns:1fr; } }

/* ---------- Store (modules page) ---------- */
.store-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; }
.store-bar .search{ margin:0; flex:1 1 320px; max-width:460px; }
.store-count{ font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }
.store-empty{ display:none; text-align:center; padding:60px 20px; color:var(--muted); }
.store-empty.is-on{ display:block; }
.store-empty b{ display:block; font-family:var(--head); font-size:24px; color:var(--ink); margin-bottom:6px; }

/* ---------- Module detail ---------- */
.md{ padding:clamp(130px, 15vw, 170px) 0 clamp(60px, 8vw, 100px); }
.md-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px, 5vw, 70px); align-items:start; margin-top:26px; }
.md h1{ font-size:clamp(32px, 3.8vw, 54px); margin:16px 0 16px; }
.md-desc{ color:var(--ink-2); font-size:clamp(16.5px, 1.25vw, 18.5px); }
.md-price{ display:flex; align-items:baseline; gap:8px; margin:26px 0 22px; font-family:var(--head); font-weight:700; font-size:clamp(36px, 3.6vw, 50px); letter-spacing:-0.04em; }
.md-price small{ font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.04em; color:var(--muted); }
.ver-label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:10px; }
.ver-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.version-chip{ padding:10px 16px; border-radius:100px; border:1px solid var(--line-2); font-weight:600; font-size:14px; background:#fff; transition:all .3s var(--ease); }
.version-chip:hover:not(:disabled){ border-color:var(--ink); }
.version-chip.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.version-chip:disabled{ opacity:.45; cursor:not-allowed; }
.md-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.md-trust{ display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); }
.md-trust span{ display:inline-flex; align-items:center; gap:8px; }
.md-trust svg{ width:17px; height:17px; color:var(--accent); }
.md-media{ position:sticky; top:110px; border-radius:28px; overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.md-media img{ width:100%; height:100%; object-fit:cover; }
.md-media .md-ic{ width:120px; height:120px; border-radius:32px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); }
.md-media .md-ic svg{ width:52px; height:52px; }
.md-media::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(4,8,22,.08) 1px, transparent 1.2px); background-size:16px 16px; -webkit-mask-image:radial-gradient(circle, #000, transparent 70%); mask-image:radial-gradient(circle, #000, transparent 70%); }
.feat-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.feat{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; }
.feat .fic{ width:38px; height:38px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.feat .fic svg{ width:18px; height:18px; }
.feat p{ color:var(--ink-2); font-size:15px; }
@media (max-width:900px){ .md-grid{ grid-template-columns:1fr; } .md-media{ position:relative; top:0; min-height:280px; } .feat-grid{ grid-template-columns:1fr; } }

/* ---------- Pricing ---------- */
.seg{ position:relative; display:inline-flex; gap:4px; padding:5px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.seg .tab{ border:0; }
.seg .tab-pill{ top:0; left:0; }
.price-group{ display:none; }
.price-group.is-on{ display:block; }
.price-head{ margin:40px 0 22px; }
.price-head h3{ font-size:clamp(22px, 2vw, 28px); }
.price-head p{ color:var(--ink-2); margin-top:6px; max-width:640px; }
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan-flag{ position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:100px; background:var(--accent); color:#fff; }
.plan h4{ font-size:20px; }
.plan-meta{ font-size:13px; color:var(--muted); margin-top:4px; }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin:20px 0 12px; }
.plan-price b{ font-family:var(--head); font-size:clamp(34px, 3vw, 42px); letter-spacing:-0.04em; }
.plan-price span{ color:var(--muted); font-size:14px; }
.plan > p{ color:var(--ink-2); font-size:14.5px; margin-bottom:18px; }
.plan .check-list{ margin-bottom:24px; flex:1; font-size:14.5px; }
.plan .btn{ width:100%; }
.plan.popular{ background:var(--dark); color:#fff; border-color:transparent; }
.plan.popular .plan-meta, .plan.popular .plan-price span{ color:rgba(255,255,255,.6); }
.plan.popular > p, .plan.popular .check-list li{ color:rgba(255,255,255,.8); }
.plan.popular .check-list li svg{ color:var(--accent-light); }
.plan.popular .btn-ink{ background:#fff; color:var(--ink); }
.plan.popular .btn-ink:hover{ color:#fff; }
.foot-note{ margin-top:40px; color:var(--muted); font-size:14.5px; max-width:900px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px, 4vw, 60px); align-items:start; }
.info-list{ display:flex; flex-direction:column; gap:12px; }
.info-tile{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
a.info-tile:hover{ transform:translateX(4px); box-shadow:var(--shadow); }
.info-tile .ic{ width:44px; height:44px; border-radius:13px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.info-tile .ic svg{ width:20px; height:20px; }
.info-tile b{ display:block; font-size:14px; }
.info-tile span{ color:var(--ink-2); font-size:14.5px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Industries + projects ---------- */
.ind-grid, .proj-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ind-card, .proj-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .4s; }
.ind-card:hover, .proj-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.ind-card .top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:34px; }
.ind-card .ic{ width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.ind-card .ic svg{ width:22px; height:22px; }
.ind-card .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.ind-card h3, .proj-card h4{ margin-bottom:8px; }
.ind-card p, .proj-card p{ color:var(--ink-2); font-size:15px; }
.proj-card .pill-tag{ margin-bottom:16px; }
.proj-group{ display:none; }
.proj-group.is-on{ display:grid; }
.case-list{ border-top:1px solid var(--line-2); }
.case-row{ display:grid; grid-template-columns:60px 1.2fr 1fr; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.case-row .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.case-row .tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.case-row .tags span{ font-size:12.5px; padding:5px 10px; border-radius:100px; background:var(--bg-2); color:var(--ink-2); }
@media (max-width:980px){ .ind-grid, .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .ind-grid, .proj-grid{ grid-template-columns:1fr; } .case-row{ grid-template-columns:40px 1fr; } .case-row .tags{ grid-column:2; justify-content:flex-start; } }

/* ---------- Reviews grid (inner pages) ---------- */
.revs .rev .stars{ font-size:14px; }

/* ---------- Account ---------- */
.acct{ padding:clamp(130px, 15vw, 170px) 0 clamp(70px, 8vw, 110px); }
.acct-grid{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; margin-top:30px; }
.acct-side{ position:sticky; top:100px; text-align:center; }
.acct-avatar{ width:72px; height:72px; margin:0 auto 14px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--head); font-size:28px; font-weight:700; }
.acct-side h4{ font-size:19px; }
.acct-side p{ color:var(--muted); font-size:14px; word-break:break-all; }
.acct-nav{ display:flex; flex-direction:column; gap:4px; margin:22px 0; text-align:left; }
.acct-nav a{ padding:11px 14px; border-radius:12px; font-weight:500; font-size:14.5px; }
.acct-nav a:hover{ background:var(--bg); }
.acct-main{ display:flex; flex-direction:column; gap:16px; }
.acct-notice{ display:flex; justify-content:space-between; align-items:center; gap:20px; background:var(--accent-soft); border-color:rgba(var(--accent-rgb), .2); }
.acct-notice p{ color:var(--ink-2); font-size:14.5px; margin-top:4px; }
.order-row{ display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
.order-row:last-child{ border-bottom:0; }
.order-row .id{ font-weight:700; }
.order-row .items{ color:var(--ink-2); font-size:14.5px; margin:3px 0; }
.order-row .date{ color:var(--muted); font-size:13px; }
.order-row .right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; }
.order-total{ font-family:var(--head); font-weight:700; font-size:18px; }
.status-pill{ font-size:12px; font-weight:700; padding:5px 11px; border-radius:100px; background:#FFF3DC; color:#A86A00; }
.status-pill.paid{ background:#E3F5EC; color:var(--green); }
.status-pill.cancelled{ background:#FDECEC; color:#A8261B; }
.empty-note{ color:var(--muted); padding:10px 0; }
.cart-line{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
@media (max-width:900px){ .acct-grid{ grid-template-columns:1fr; } .acct-side{ position:relative; top:0; } .acct-notice{ flex-direction:column; align-items:flex-start; } }

/* ---------- Thank you ---------- */
.thanks{ padding:clamp(140px, 16vw, 180px) 0 clamp(70px, 8vw, 110px); }
.thanks .card{ max-width:720px; margin:0 auto; text-align:center; padding:clamp(28px, 4vw, 50px); }
.thanks h1{ font-size:clamp(30px, 3.4vw, 46px); margin-bottom:12px; }
.thanks p{ color:var(--ink-2); max-width:540px; margin:0 auto 24px; }
.dl-list{ text-align:left; margin-top:10px; border-top:1px solid var(--line); }
.dl-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }

/* ---------- Footer contact + social, header breakpoint ---------- */
.footer-contact{ display:flex; flex-direction:column; gap:4px; margin-top:18px; font-size:15px; }
.footer-contact a, .footer-contact span{ color:rgba(255,255,255,.86); padding:0; }
.footer-contact a:hover{ color:#fff; }
.footer .social{ display:flex; gap:8px; margin-top:20px; }
.footer .social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; padding:0; transition:background .3s, border-color .3s; }
.footer .social a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.footer .social svg{ width:17px; height:17px; }
@media (max-width:1180px){ .nav-links a{ padding:8px 10px; font-size:14px; } }
@media (max-width:1100px){ .nav-links, .nav-right .btn{ display:none; } .burger{ display:inline-flex; } }
.plan.popular .btn-line{ border-color:rgba(255,255,255,.3); color:#fff; background:transparent; }
.plan.popular .btn-line::before{ background:#fff; }
.plan.popular .btn-line:hover{ color:var(--ink); }
[id]{ scroll-margin-top:110px; }
.btn-block.btn-sm{ width:100%; }
.plan{ max-width:440px; }

/* ==========================================================================
   Polish pass: blueprint grid, gradient highlights, depth, hero details,
   floating hero chips, footer wordmark, scroll progress.
   ========================================================================== */

/* ---------- Blueprint grid behind every hero ---------- */
.hero::before, .page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(4,8,22,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(4,8,22,.055) 1px, transparent 1px);
  background-size:64px 64px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 35% 35%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 75% 70% at 35% 35%, #000 10%, transparent 72%);
}
.hero .wrap, .page-hero .wrap{ position:relative; z-index:1; }

/* ---------- Gradient highlight inside headings ---------- */
h1 .blue, h2 .blue{
  background:linear-gradient(100deg, #1D4ED8 0%, #2F6BFF 45%, #0EA5E9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.u path{ stroke:#3B82F6; opacity:.5; }

/* ---------- Buttons with a little depth ---------- */
.btn-ink{ box-shadow:0 14px 26px -16px rgba(4,8,22,.75), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-blue{ box-shadow:0 14px 28px -14px rgba(29,78,216,.75), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-line{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn:active{ transform:scale(.97); }

/* ---------- Header: stronger glass once the page scrolls ---------- */
.nav{ transition:box-shadow .4s var(--ease), background .4s; }
.is-scrolled .nav{ background:rgba(255,255,255,.88); box-shadow:0 14px 40px -22px rgba(4,8,22,.45); }

/* ---------- Home hero details ---------- */
.hero-meta{ gap:0; }
.hero-meta > div{ padding-right:28px; }
.hero-meta > div + div{ padding-left:28px; border-left:1px solid var(--line-2); }
.wall{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 24%, #000 86%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 24%, #000 86%, transparent 100%);
}
.hero-badge{ background:rgba(255,255,255,.9); }
@media (max-width:600px){
  .hero-meta > div{ padding-right:18px; }
  .hero-meta > div + div{ padding-left:18px; }
  .hero-meta > div:nth-child(3){ border-left:0; padding-left:0; }
}

/* ---------- Floating chips on the inner-page heroes ---------- */
.hero-chips{ position:absolute; right:0; top:50%; z-index:2; width:300px; display:flex; flex-direction:column; gap:14px; transform:translateY(-38%); }
.hchip{
  display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; border-radius:18px; background:rgba(255,255,255,.86);
  border:1px solid var(--line); box-shadow:var(--shadow-lg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  animation:bob 6s ease-in-out infinite; will-change:transform;
}
.hchip:nth-child(2){ margin-left:-46px; animation-delay:-2s; }
.hchip:nth-child(3){ margin-left:22px; animation-delay:-4s; }
.hchip i{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-style:normal; }
.hchip i svg{ width:19px; height:19px; }
.hchip b{ display:block; font-size:14.5px; line-height:1.25; }
.hchip small{ display:block; font-size:12.5px; color:var(--muted); }
@keyframes bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (max-width:1180px){ .hero-chips{ display:none; } }

/* ---------- Categories + product cards ---------- */
.cat.is-big{ background:linear-gradient(135deg, #0A1A44 0%, #1D4ED8 120%); }
.cat.is-big::after{ background:radial-gradient(circle, rgba(56,189,248,.35), transparent 65%); }
.cat:not(.is-big):hover{ border-color:transparent; }

/* ---------- Section labels: small pill instead of a bare dot ---------- */
.sec-head .label, .statement .label, .faq-grid .label, .split .label, .spot .label{
  padding:6px 12px 6px 10px; border-radius:100px; background:rgba(255,255,255,.7); border:1px solid var(--line);
}
.dark-zone .label{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.spot-text .label{ padding:0; background:none; border:0; }

/* ---------- Stats + generic cards ---------- */
.stat{ position:relative; overflow:hidden; }
.stat::after{ content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb), .12), transparent 70%); }
.svc-card, .ind-card, .proj-card, .info-tile, .feat{ border-color:rgba(4,8,22,.08); }
.svc-card:hover, .ind-card:hover, .proj-card:hover{ border-color:rgba(var(--accent-rgb), .3); }

/* ---------- Footer wordmark ---------- */
.footer-mark{
  font-family:var(--head); font-weight:800; font-stretch:112%; letter-spacing:-0.055em; line-height:.78; white-space:nowrap; text-align:center;
  font-size:clamp(54px, 13.4vw, 196px); margin:46px 0 -0.14em; color:transparent; user-select:none; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 85%); -webkit-background-clip:text; background-clip:text;
}
.footer{ overflow:hidden; }

/* ---------- Scroll progress ---------- */
.progress{ position:fixed; left:0; right:0; top:0; z-index:160; height:2px; pointer-events:none; }
.progress i{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--accent), #0EA5E9); }
@media (min-width:1181px){ .page-hero:has(.hero-chips) h1{ max-width:780px; } .page-hero:has(.hero-chips) .lead{ max-width:600px; } }
@media (max-width:600px){
  .hero-meta{ display:grid; grid-template-columns:repeat(3, 1fr); }
  .hero-meta > div, .hero-meta > div + div{ padding:0 10px; }
  .hero-meta > div:first-child{ padding-left:0; }
  .hero-meta > div:nth-child(3){ border-left:1px solid var(--line-2); padding-left:10px; }
  .hero-meta div b{ font-size:22px; }
  .hero-meta div span{ font-size:12px; line-height:1.35; display:block; }
  /* let inner-page headings wrap naturally on phones instead of forcing the desktop line breaks */
  .page-hero h1 .line-mask, .page-hero h1 .line-mask > span{ display:inline; }
}

/* ==========================================================================
   Module cards (render_module_card in includes/functions.php).
   --c / --cbg are the category colour and its soft tint.
   ========================================================================== */
.mcard{
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:24px 24px 22px;
  background:#fff; border:1px solid rgba(4,8,22,.08); border-radius:24px;
  box-shadow:0 1px 2px rgba(4,8,22,.04), 0 18px 36px -28px rgba(4,8,22,.35);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.mcard::before{
  content:""; position:absolute; z-index:-1; width:300px; height:300px; right:-130px; top:-150px; border-radius:50%;
  background:radial-gradient(circle, var(--cbg) 0%, transparent 68%); transition:transform .9s var(--ease);
}
.mcard::after{
  content:""; position:absolute; left:26px; right:26px; top:0; height:3px; border-radius:0 0 4px 4px; background:var(--c);
  transform:scaleX(0); transition:transform .55s var(--ease);
}
.mcard:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 2px 4px rgba(4,8,22,.04), 0 34px 60px -30px rgba(4,8,22,.45); }
.mcard:hover::before{ transform:scale(1.35); }
.mcard:hover::after{ transform:scaleX(1); }
.has-cursor .mcard[data-tilt]{ transition:box-shadow .5s var(--ease), border-color .4s; }
.mcard:hover .glare{ opacity:1; }

.mcard-top{ display:flex; align-items:center; gap:13px; }
.mcard-ic{
  width:54px; height:54px; border-radius:17px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--cbg); color:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 20px -14px var(--c);
  transition:transform .6s var(--ease);
}
.mcard:hover .mcard-ic{ transform:rotate(-8deg) scale(1.07); }
.mcard-ic svg{ width:25px; height:25px; }
.mcard-ic img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.mcard-meta{ flex:1; min-width:0; }
.mcard-cat{ display:block; font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--c); }
.mcard-vers{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.mcard-vers span{ font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:6px; background:var(--bg); color:var(--ink-2); border:1px solid var(--line); }
.mcard-go{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); transition:background .35s, color .35s, border-color .35s, transform .5s var(--ease);
}
.mcard-go svg{ width:15px; height:15px; }
.mcard:hover .mcard-go{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(45deg); }
.mcard h3{ font-size:20px; line-height:1.22; letter-spacing:-0.02em; }
.mcard h3 a{ background:linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition:background-size .45s var(--ease); }
.mcard h3 a:hover{ background-size:100% 1.5px; }
.mcard-desc{ color:var(--ink-2); font-size:14.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mcard-feats{ list-style:none; display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px dashed var(--line-2); font-size:13.5px; color:var(--ink-2); }
.mcard-feats li{ display:flex; gap:9px; align-items:flex-start; }
.mcard-feats li span{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.mcard-feats svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--c); }
.mcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.mcard-price{ display:flex; align-items:baseline; gap:6px; }
.mcard-price b{ font-family:var(--head); font-size:30px; font-weight:700; letter-spacing:-0.04em; line-height:1; }
.mcard-price small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); }
.mcard-add{
  display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; white-space:nowrap; box-shadow:0 12px 22px -14px rgba(4,8,22,.75);
  transition:background .3s, transform .4s var(--ease), box-shadow .3s;
}
.mcard-add svg{ width:15px; height:15px; transition:transform .4s var(--ease); }
.mcard-add:hover{ background:var(--accent); box-shadow:0 14px 24px -12px rgba(var(--accent-rgb), .7); }
.mcard-add:hover svg{ transform:translateX(3px); }
.mcard-add:active{ transform:scale(.96); }
@media (max-width:620px){ .mcard{ padding:20px; } .mcard-price b{ font-size:26px; } }

/* ==========================================================================
   Contact form (includes/contact-form.php): service chips + home contact band
   ========================================================================== */
.svc-chips{ display:flex; flex-wrap:wrap; gap:8px; border:0; }
.svc-chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.svc-chips label{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:100px; border:1px solid var(--line-2); background:#fff;
  font-size:13.5px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:all .3s var(--ease);
}
.svc-chips label::before{ content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2); transition:all .3s; }
.svc-chips label:hover{ border-color:var(--ink); color:var(--ink); }
.svc-chips input:checked + label{ background:var(--ink); color:#fff; border-color:var(--ink); }
.svc-chips input:checked + label::before{ background:#38BDF8; border-color:#38BDF8; }
.svc-chips input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }
.field-legend{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink-2); }

.contact-band{
  position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px, 4vw, 60px); align-items:center;
  background:var(--dark); color:#fff; border-radius:32px; padding:clamp(28px, 5vw, 64px);
}
.contact-band::before{ content:""; position:absolute; z-index:-1; width:720px; height:720px; left:-260px; bottom:-420px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb), .5), transparent 62%); }
.contact-band::after{ content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 20% 50%, #000, transparent 70%); mask-image:radial-gradient(ellipse at 20% 50%, #000, transparent 70%); }
.contact-band > div:first-child h2{ color:#fff; margin:16px 0 14px; }
.contact-band > div:first-child > p{ color:rgba(255,255,255,.72); font-size:17px; max-width:440px; }
.contact-band .label{ color:rgba(255,255,255,.65); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 12px 6px 10px; border-radius:100px; }
.band-contacts{ display:flex; flex-direction:column; gap:10px; margin-top:30px; }
.band-contacts a{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .3s, transform .4s var(--ease); max-width:400px; }
.band-contacts a:hover{ background:rgba(255,255,255,.1); transform:translateX(4px); }
.band-contacts i{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.1); color:#9CC3FF; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.band-contacts i svg{ width:18px; height:18px; }
.band-contacts b{ display:block; font-size:13px; color:rgba(255,255,255,.6); font-weight:500; }
.band-contacts span{ font-size:15px; font-weight:600; }
.contact-band .form-card{ color:var(--ink); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); }
@media (max-width:980px){ .contact-band{ grid-template-columns:1fr; } }

/* ==========================================================================
   Write-a-review page: star picker + live preview
   ========================================================================== */
.rate{ border:0; margin-bottom:18px; }
.rate-row{ display:flex; align-items:center; gap:4px; }
.rate-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.rate-row label{ cursor:pointer; padding:3px; color:#D5DAE3; transition:transform .25s var(--ease), color .2s; }
.rate-row label svg{ width:34px; height:34px; display:block; }
.rate-row label:hover{ transform:scale(1.15); }
.rate-row label.is-on{ color:var(--amber); }
.rate-row input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.rate-say{ margin-left:12px; font-weight:600; font-size:14.5px; color:var(--ink-2); min-width:110px; }
.count-hint{ display:flex; justify-content:flex-end; font-size:12px; color:var(--muted); margin-top:6px; font-family:var(--mono); }

.rev-live{ position:relative; background:rgba(255,255,255,.96); color:var(--ink); border-radius:22px; padding:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transform:rotate(-1.5deg); transition:transform .5s var(--ease); }
.rev-live:hover{ transform:rotate(0); }
.rev-live-tag{ position:absolute; top:-12px; left:20px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:100px; background:var(--accent); color:#fff; }
.rev-live .stars{ font-size:18px; }
.rev-live p{ margin:10px 0 16px; font-size:15.5px; line-height:1.55; min-height:48px; color:var(--ink-2); word-break:break-word; }
.rev-live p.is-empty{ color:var(--muted); font-style:italic; }
.rev-live .who{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.rev-live .av{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.rev-live b{ display:block; font-size:14.5px; }
.rev-live small{ font-size:13px; color:var(--muted); }
.auth-side .side-note{ font-size:13.5px; color:rgba(255,255,255,.55); }
fieldset{ border:0; min-width:0; }

/* ==========================================================================
   Brand logo
   ========================================================================== */
.logo img{ display:block; height:38px; width:auto; }
.logo i{ display:none; }
.header .logo img{ height:40px; }
.loader .logo img{ height:34px; }
.footer .logo img{ height:40px; }
.auth-side .logo img{ height:36px; }
@media (max-width:600px){ .header .logo img{ height:30px; } }

/* ==========================================================================
   Navy sections (home modules + reviews, modules store, related modules)
   Glowing orbs behind frosted-glass cards.
   ========================================================================== */
.navy-sec{
  position:relative; isolation:isolate; overflow:hidden; background:var(--dark); color:#fff;
  margin-inline:clamp(8px, 1.6vw, 24px); border-radius:clamp(24px, 3vw, 40px);
}
.navy-sec::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%);
}
.orbs{ position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.orbs i{ position:absolute; border-radius:50%; will-change:transform; }
.orbs i:nth-child(1){ width:640px; height:640px; left:-180px; top:-140px; background:radial-gradient(circle, rgba(29,78,216,.75), transparent 62%); animation:orbA 18s ease-in-out infinite alternate; }
.orbs i:nth-child(2){ width:560px; height:560px; right:-160px; top:30%; background:radial-gradient(circle, rgba(14,165,233,.55), transparent 62%); animation:orbB 22s ease-in-out infinite alternate; }
.orbs i:nth-child(3){ width:520px; height:520px; left:30%; bottom:-260px; background:radial-gradient(circle, rgba(109,40,217,.45), transparent 62%); animation:orbA 26s ease-in-out infinite alternate-reverse; }
@keyframes orbA{ to{ transform:translate(160px, 120px) scale(1.12); } }
@keyframes orbB{ to{ transform:translate(-140px, -100px) scale(.9); } }
.navy-sec .wrap{ position:relative; z-index:1; }
.navy-sec h2, .navy-sec h3{ color:#fff; }
.navy-sec .lead{ color:rgba(255,255,255,.72); }
.navy-sec .muted, .navy-sec .muted-sm{ color:rgba(255,255,255,.6); }
.navy-sec .label{ color:rgba(255,255,255,.72); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.navy-sec .btn-line{ border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.04); }
.navy-sec .btn-line::before{ background:#fff; }
.navy-sec .btn-line:hover{ color:var(--ink); border-color:#fff; }
.navy-sec .tab{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.18); }
.navy-sec .tab:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.navy-sec .tab-pill{ background:#fff; }
.navy-sec .tabs.has-pill .tab.is-on{ color:var(--ink); border-color:transparent; }
.navy-sec .tabs:not(.has-pill) .tab.is-on{ background:#fff; color:var(--ink); }
.navy-sec .search{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow:none; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.navy-sec .search:focus-within{ border-color:rgba(255,255,255,.5); box-shadow:0 0 0 5px rgba(255,255,255,.06); }
.navy-sec .search input{ color:#fff; }
.navy-sec .search input::placeholder{ color:rgba(255,255,255,.5); }
.navy-sec .search svg{ color:rgba(255,255,255,.6); }
.navy-sec .store-count{ color:rgba(255,255,255,.55); }
.navy-sec .store-empty{ color:rgba(255,255,255,.6); }
.navy-sec .store-empty b{ color:#fff; }
.navy-sec .link{ color:#93B4FF; }

/* ---------- Frosted-glass module cards ---------- */
.navy-sec .mcard{
  background:linear-gradient(155deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14); color:#fff;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -30px rgba(0,0,0,.65);
}
.navy-sec .mcard::before{ opacity:.28; }
.navy-sec .mcard:hover{ border-color:rgba(255,255,255,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 40px 80px -30px rgba(0,0,0,.8); }
.navy-sec .mcard .glare{ background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 45%); }
.navy-sec .mcard-ic{ box-shadow:0 12px 26px -14px rgba(0,0,0,.8); }
.navy-sec .mcard-cat{ color:#fff; opacity:.72; }
.navy-sec .mcard-vers span{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
.navy-sec .mcard-go{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff; }
.navy-sec .mcard:hover .mcard-go{ background:#fff; color:var(--ink); border-color:#fff; }
.navy-sec .mcard h3 a{ color:#fff; }
.navy-sec .mcard-desc{ color:rgba(255,255,255,.72); }
.navy-sec .mcard-feats{ color:rgba(255,255,255,.8); border-top-color:rgba(255,255,255,.14); }
.navy-sec .mcard-feats svg{ color:#7DD3FC; }
.navy-sec .mcard-foot{ border-top-color:rgba(255,255,255,.12); }
.navy-sec .mcard-price b{ color:#fff; }
.navy-sec .mcard-price small{ color:rgba(255,255,255,.5); }
.navy-sec .mcard-add{ background:#fff; color:var(--ink); box-shadow:0 14px 26px -14px rgba(0,0,0,.8); }
.navy-sec .mcard-add:hover{ background:var(--accent); color:#fff; box-shadow:0 14px 28px -12px rgba(var(--accent-rgb), .8); }

/* ---------- Glass review cards ---------- */
.navy-sec .rev{
  background:linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.13); color:#fff;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.navy-sec .rev p{ color:rgba(255,255,255,.86); }
.navy-sec .rev .who{ border-top-color:rgba(255,255,255,.12); }
.navy-sec .rev small{ color:rgba(255,255,255,.55); }
.navy-sec .rev .av{ box-shadow:0 0 0 2px rgba(255,255,255,.2); }
.navy-sec .card{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
@media (max-width:620px){ .navy-sec .mcard, .navy-sec .rev{ -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } }

/* ==========================================================================
   Write-a-review page: one calm card on a navy panel
   ========================================================================== */
.rv{ padding:clamp(96px, 11vw, 120px) 0 clamp(50px, 6vw, 80px); }
.rv .navy-sec{ padding:clamp(48px, 7vw, 90px) 0; }
.rv-inner{ max-width:640px; margin:0 auto; }
.rv-head{ text-align:center; margin-bottom:30px; }
.rv-badge{ width:56px; height:56px; margin:0 auto 18px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--amber); }
.rv-badge svg{ width:26px; height:26px; }
.rv-head h1{ color:#fff; font-size:clamp(32px, 3.6vw, 46px); margin-bottom:10px; }
.rv-head p{ color:rgba(255,255,255,.7); font-size:17px; }
.rv-card{ background:#fff; color:var(--ink); border-radius:28px; padding:clamp(24px, 4vw, 40px); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); }
.rv-card .rate{ text-align:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.rv-card .rate .field-legend{ margin:0 auto 10px; text-align:center; }
.rv-card .rate-row{ justify-content:center; flex-wrap:wrap; }
.rv-card .rate-row label svg{ width:38px; height:38px; }
.rv-card .rate-say{ flex-basis:100%; margin:8px 0 0; text-align:center; font-size:14px; color:var(--muted); }
.rv-card .field label{ font-weight:600; }
.rv-card .opt{ font-weight:400; color:var(--muted); }
.rv-note{ text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
.rv-card h3{ color:var(--ink); }
.rv-card .muted-sm{ color:var(--muted); }
.rv-card .link{ color:var(--accent); }
.navy-sec + section, .navy-sec + .section{ padding-top:clamp(56px, 7vw, 100px) !important; }

/* ==========================================================================
   Store v2: cart voucher, login options, order page, account tabs
   ========================================================================== */
.voucher{ display:flex; gap:6px; padding:5px; border-radius:100px; background:#fff; border:1px solid var(--line-2); margin-bottom:6px; }
.voucher input{ flex:1; min-width:0; border:0; background:none; padding:0 12px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.voucher input::placeholder{ text-transform:none; letter-spacing:0; }
.voucher input:focus{ outline:none; }
.voucher button{ padding:8px 14px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; }
.voucher .voucher-x{ background:var(--bg-2); color:var(--ink); padding:8px 12px; }
.voucher-msg{ font-size:12.5px; min-height:18px; margin:0 4px 8px; color:var(--muted); }
.voucher-msg.ok{ color:var(--green); font-weight:600; }
.voucher-msg.err{ color:#B42318; }
.drawer-lines{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; font-size:14px; color:var(--ink-2); }
.drawer-lines > div{ display:flex; justify-content:space-between; gap:10px; }
.drawer-lines .disc{ color:var(--green); font-weight:600; }
.drawer-lines .disc small{ font-family:var(--mono); font-size:11px; font-weight:500; }
.deploy-note{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-2); background:var(--accent-soft); border-radius:14px; padding:10px 12px; margin:0 0 14px; }
.deploy-note svg{ width:18px; height:18px; flex:0 0 auto; color:var(--accent); margin-top:1px; }
.login-opts{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:-4px 0 16px; font-size:13.5px; }
.remember{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; }
.remember input{ width:16px; height:16px; accent-color:var(--ink); }
.opt{ font-weight:400; color:var(--muted); }

/* ---------- Order page ---------- */
.ord{ padding:clamp(120px, 14vw, 150px) 0 clamp(60px, 8vw, 100px); }
.ord-empty{ max-width:640px; margin:0 auto; text-align:center; }
.ord-empty h1{ font-size:clamp(28px, 3vw, 38px); margin-bottom:10px; }
.ord-thanks{ display:flex; gap:18px; align-items:center; background:var(--dark); color:#fff; border-radius:24px; padding:22px 26px; margin-bottom:22px; }
.ord-thanks .check-ic{ margin:0; flex:0 0 auto; background:rgba(17,156,90,.18); color:#4ADE80; }
.ord-thanks h2{ color:#fff; font-size:clamp(22px, 2.2vw, 28px); margin-bottom:4px; }
.ord-thanks p{ color:rgba(255,255,255,.72); }
.ord-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.ord-head h1{ font-size:clamp(30px, 3.6vw, 48px); margin-top:12px; }
.ord-head .status-pill{ font-size:13px; padding:7px 14px; }
.ord-grid{ display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:start; }
.ord-main{ display:flex; flex-direction:column; gap:18px; }
.ord-summary{ position:sticky; top:100px; }
.sum-line{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.sum-line small{ display:block; font-size:12px; color:var(--muted); }
.muted-line{ color:var(--muted); border-bottom:0; padding-bottom:0; }
.disc-line{ color:var(--green); font-weight:600; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; font-weight:600; }
.sum-total b{ font-family:var(--head); font-size:30px; letter-spacing:-0.03em; }
.pay-ref{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin:16px 0; padding:14px 18px; border-radius:16px; background:var(--dark); color:#fff; font-size:14px; }
.pay-ref b{ font-family:var(--head); font-size:18px; margin-left:6px; }
.pay-ref span{ color:rgba(255,255,255,.75); }
.pay-ref span b{ color:#fff; font-size:15px; }
.pay-methods{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.pay-method{ border:1px solid var(--line-2); border-radius:18px; padding:16px 18px; background:var(--bg); }
.pm-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.pay-method dl > div{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed var(--line-2); font-size:13.5px; }
.pay-method dt{ color:var(--muted); }
.pay-method dd{ display:flex; align-items:center; gap:8px; font-weight:600; text-align:right; word-break:break-all; }
.copy-btn{ flex:0 0 auto; font-size:11px; font-weight:600; padding:4px 9px; border-radius:100px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); }
.copy-btn:hover{ border-color:var(--ink); color:var(--ink); }
.copy-btn.is-done{ background:var(--green); border-color:var(--green); color:#fff; }
.proof-form{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.proof-form h4, .proof-list h4{ margin-bottom:14px; }
.proof-form input[type=file]{ width:100%; font-size:13px; padding:9px; border:1px dashed var(--line-2); border-radius:12px; background:#fff; }
.proof-list{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.proof-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; font-size:14px; }
.proof-row small{ display:block; font-size:12px; color:var(--muted); }
.deploy-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.deploy-head h3{ margin-bottom:4px; }
.deploy-ic{ width:46px; height:46px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.deploy-ic svg{ width:22px; height:22px; }
.deploy-status{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:14.5px; }
.deploy-status p{ flex-basis:100%; }
.status-pill.new{ background:#FFF3DC; color:#A86A00; }
@media (max-width:980px){ .ord-grid{ grid-template-columns:1fr; } .ord-summary{ position:relative; top:0; order:-1; } }

/* ---------- Account ---------- */
.acct-nav a.is-on{ background:var(--ink); color:#fff; }
a.order-row{ color:inherit; border-radius:14px; padding-left:10px; padding-right:10px; margin:0 -10px; transition:background .25s; }
a.order-row:hover{ background:var(--bg); }
.order-open{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--accent); }
.order-open svg{ width:14px; height:14px; }
/* banner on module cards */
.mcard-media{ display:block; margin:-10px -10px 4px; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); }
.mcard-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.mcard:hover .mcard-media img{ transform:scale(1.05); }
.navy-sec .mcard-media{ background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(255,255,255,.08); }

/* ---------- module card "Details" + screenshots gallery ---------- */
.mcard-details{ margin-left:auto; font-size:13px; font-weight:600; padding:9px 14px; border-radius:999px; border:1px solid var(--line); color:inherit; text-decoration:none; transition:background .3s, border-color .3s; }
.mcard-details:hover{ border-color:var(--accent); color:var(--accent); }
.navy-sec .mcard-details{ border-color:rgba(255,255,255,.25); color:#fff; }
.navy-sec .mcard-details:hover{ background:rgba(255,255,255,.1); color:#fff; }
.shots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:22px; }
.shot{ margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 18px 40px -30px rgba(4,8,22,.45); }
.shot a{ display:block; aspect-ratio:16/10; overflow:hidden; background:#eef2f8; cursor:zoom-in; }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s var(--ease); }
.shot a:hover img{ transform:scale(1.04); }
.shot figcaption{ padding:14px 16px 16px; display:grid; gap:4px; }
.shot figcaption b{ font-size:15px; }
.shot figcaption span{ font-size:13.5px; color:var(--muted, #5b6478); line-height:1.5; }
.lb{ position:fixed; inset:0; z-index:9999; background:rgba(4,8,22,.9); display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:24px; }
.lb.open{ display:flex; }
.lb img{ max-width:min(1400px, 100%); max-height:80vh; border-radius:12px; background:#fff; }
.lb p{ color:#fff; max-width:900px; text-align:center; font-size:14.5px; margin:0; }
.lb button{ position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:34px; cursor:pointer; }
@media (max-width:640px){ .shots{ grid-template-columns:1fr; } .mcard-foot{ flex-wrap:wrap; } }

/* 6-digit code inputs (verify email / reset password) */
.code-input{ font-size:24px; letter-spacing:10px; text-align:center; font-family:"IBM Plex Mono", monospace; }

/* ---------- compact account cards (login / signup / verify / reset) ---------- */
.auth{ padding:clamp(110px, 12vw, 140px) 0 clamp(60px, 7vw, 90px); background:radial-gradient(900px 420px at 50% 0%, rgba(var(--accent-rgb), .08), transparent 70%); }
.auth-grid{ grid-template-columns:1fr; max-width:430px; border-radius:22px; box-shadow:0 30px 60px -40px rgba(4,8,22,.45); }
.auth-side{ display:none; }
.auth-logo{ display:flex; justify-content:center; padding:30px 30px 0; }
.auth-logo img{ height:34px; width:auto; }
.auth-main{ padding:22px 30px 30px; text-align:left; }
.auth-main > .label{ display:none; }
.auth-main h1{ font-size:26px; margin:0 0 6px; text-align:center; }
.auth-main > p{ font-size:14.5px; margin-bottom:22px; text-align:center; color:var(--muted, #5b6478); }
.auth-main .field{ margin-bottom:14px; }
.auth-main .field-row{ grid-template-columns:1fr; gap:0; }
.auth-main .muted-sm{ font-size:12.5px; }
.auth-main .alert{ font-size:14px; }
.auth-switch{ text-align:center; font-size:14px; }
@media (max-width:480px){ .auth-main{ padding:18px 20px 24px; } .auth-logo{ padding:24px 20px 0; } }

/* ---------- account cards: dark navy ---------- */
.auth-grid{ background:linear-gradient(160deg, #0b1633 0%, #040816 70%); border-color:rgba(255,255,255,.08); box-shadow:0 40px 80px -40px rgba(4,8,22,.8); position:relative; }
.auth-grid::before{ content:""; position:absolute; width:420px; height:420px; right:-200px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(29,78,216,.45), transparent 65%); pointer-events:none; }
.auth-grid > *{ position:relative; z-index:1; }
.auth-main h1{ color:#fff; }
.auth-main > p, .auth-main .muted-sm{ color:rgba(255,255,255,.62); }
.auth-main > p b{ color:#fff; }
.auth-main label{ color:rgba(255,255,255,.85); }
.auth-main input:not([type=checkbox]){ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; }
.auth-main input::placeholder{ color:rgba(255,255,255,.35); }
.auth-main input:not([type=checkbox]):focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25); background:rgba(255,255,255,.09); }
.auth-main .btn-ink{ background:#1D4ED8; color:#fff; }
.auth-main .btn-ink:hover{ background:#2563eb; }
.auth-main .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.2); background:transparent; }
.auth-main .remember, .auth-switch{ color:rgba(255,255,255,.6); }
.auth-main .link, .auth-switch a{ color:#7aa7ff; }
.auth-main .alert{ background:rgba(239,68,68,.12); color:#fecaca; border-color:rgba(239,68,68,.3); }
.auth-main .alert.ok{ background:rgba(34,197,94,.12); color:#bbf7d0; border-color:rgba(34,197,94,.3); }

/* numbered key-feature badges */
.feat .fic.fnum{ font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:15px; letter-spacing:.5px; color:#fff; background:linear-gradient(135deg, #1D4ED8, #040816); }

/* ---------- key feature cards (numbered, like the module description) ---------- */
.kf-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.kf-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 30px 32px; box-shadow:0 20px 40px -34px rgba(4,8,22,.4); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.kf-card:hover{ transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(4,8,22,.45); }
.kf-num{ display:block; font-family:"Archivo", sans-serif; font-weight:800; font-size:64px; line-height:1; font-style:italic; color:#040816; margin-bottom:18px; letter-spacing:-2px; }
.kf-card h3{ font-size:21px; line-height:1.3; margin:0 0 12px; color:#040816; }
.kf-card p{ font-size:15.5px; line-height:1.65; color:var(--muted, #5b6478); margin:0; }
@media (max-width:980px){ .kf-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .kf-grid{ grid-template-columns:1fr; } .kf-num{ font-size:52px; } }

/* ---------- screenshots: caption above each image ---------- */
.shot-list{ display:grid; gap:34px; max-width:1100px; margin:0 auto; }
.shot-row{ margin:0; background:#f4f6fb; border:1px solid var(--line); border-radius:22px; padding:34px 34px 30px; text-align:center; }
.shot-row figcaption{ margin-bottom:22px; }
.shot-step{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#1D4ED8; background:rgba(29,78,216,.08); border-radius:999px; padding:5px 12px; margin-bottom:10px; }
.shot-row h3{ font-size:20px; font-weight:600; margin:0; color:#040816; }
.shot-row p{ margin:8px auto 0; max-width:720px; color:var(--muted, #5b6478); font-size:15px; }
.shot-row a{ display:block; background:#fff; border-radius:14px; padding:12px; box-shadow:0 20px 50px -35px rgba(4,8,22,.45); cursor:zoom-in; }
.shot-row img{ width:100%; height:auto; border-radius:8px; display:block; }
@media (max-width:620px){ .shot-row{ padding:20px 14px; } }

/* Odoo edition badge */
.ed-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:middle;line-height:1.5}
.ed-com{background:#e7f6ee;color:#157a45}
.ed-ent{background:#f3e9ff;color:#6b2bbf}

/* Client project cards: name up front, logo and details slide up on hover / focus */
.client-card{ min-height:210px; display:flex; flex-direction:column; align-items:flex-start; cursor:default; outline:none; }
.client-card h4{ font-size:21px; margin-top:auto; }
.client-hint{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--ink-2); }
.client-hint svg{ width:14px; height:14px; }
.client-num{ position:absolute; top:24px; right:24px; font-family:var(--mono); font-size:12px; color:var(--ink-2); opacity:.6; }
.client-reveal{ position:absolute; inset:0; padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  background:var(--dark); color:#fff; transform:translateY(101%); transition:transform .55s var(--ease); }
.client-card:hover .client-reveal, .client-card:focus-visible .client-reveal, .client-card:focus .client-reveal{ transform:none; }
.client-logo{ display:flex; align-items:center; justify-content:center; height:96px; border-radius:14px; background:#fff; padding:14px 18px; }
.client-logo.dark{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.client-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.client-reveal p{ color:rgba(255,255,255,.75); font-size:14px; line-height:1.55; }

/* Module cards v2: clean store card, full-bleed thumbnail, one meta row, title, two-line description, price + cart */
.mcard{ padding:0; gap:0; border-radius:20px; }
.mcard::before, .mcard-ic, .mcard-go, .mcard-feats, .mcard-details{ display:none; }
.mcard::after{ left:0; right:0; z-index:2; border-radius:0; }
.mcard-media{ margin:0; border-radius:0; aspect-ratio:16/9; }
.mcard-top, .mcard h3, .mcard-desc{ margin:0 20px; }
.mcard-top{ margin-top:18px; }
.mcard-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.mcard-cat{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; }
.mcard-vers{ margin:0 0 0 auto; }
.mcard h3{ margin-top:10px; font-size:18.5px; line-height:1.25; }
.mcard-desc{ margin-top:6px; font-size:14px; }
.mcard-foot{ margin:18px 20px 20px; padding-top:16px; }
.mcard-price b{ font-size:25px; }
.mcard-add{ padding:10px 15px; font-size:13.5px; }
.mcard:hover{ transform:translateY(-5px); }
.navy-sec .mcard{
  background:#0A1230; border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
}
.navy-sec .mcard:hover{ border-color:rgba(147,180,255,.35); box-shadow:0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(147,180,255,.12); }
.navy-sec .mcard-media{ box-shadow:none; border-bottom:1px solid rgba(255,255,255,.07); }
.navy-sec .mcard-cat{ color:#93B4FF; opacity:1; }
.navy-sec .mcard-foot{ border-top-color:rgba(255,255,255,.08); }
@media (max-width:620px){ .mcard{ padding:0; } .mcard-top, .mcard h3, .mcard-desc{ margin-left:16px; margin-right:16px; } .mcard-foot{ margin:16px; } }
.mcard-media img{ transform:scale(1.1); }
.mcard:hover .mcard-media img{ transform:scale(1.15); }