/* Project Value — styles. The page colours follow the sun over Athens (see theme.js):
   --sky1/--sky2 paint the background, data-theme="light|dark" picks readable foregrounds. */
:root{
  --navy:#0F2A3D;
  --accent:#E39B2D;
  --accent-dark:#B8761A;
  --radius:14px;
  --max:1140px;
  --sky1:#EEF4F9; --sky2:#FFFFFF;
  /* light tone */
  --fg:#0E2233; --fg2:#2B3F52; --muted:#5D6E7E; --heading:#0F2A3D;
  --line:rgba(15,42,61,.12); --card:rgba(255,255,255,.78); --card-hover:rgba(255,255,255,.95);
  --soft:rgba(255,255,255,.42); --head-bg:rgba(255,255,255,.7); --chip:#FDF3E3; --chip-fg:#B8761A;
  --input:#fff; --input-line:#CFD8E1; --pill:rgba(15,42,61,.06); --shadow:0 14px 34px rgba(15,42,61,.10);
  --ghost:rgba(15,42,61,.35); --ghost-fg:#0F2A3D; --scrim:rgba(255,255,255,.0);
}
html[data-theme="dark"]{
  --fg:#FFFFFF; --fg2:rgba(255,255,255,.84); --muted:rgba(255,255,255,.66); --heading:#FFFFFF;
  --line:rgba(255,255,255,.1); --card:rgba(12,32,48,.55); --card-hover:rgba(16,40,60,.7);
  --soft:rgba(255,255,255,.025); --head-bg:rgba(6,16,24,.5); --chip:rgba(227,155,45,.13); --chip-fg:#E39B2D;
  --input:rgba(255,255,255,.06); --input-line:rgba(255,255,255,.16); --pill:rgba(255,255,255,.08); --shadow:0 18px 40px rgba(0,0,0,.35);
  --ghost:rgba(255,255,255,.35); --ghost-fg:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--sky2)}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%) fixed;min-height:100vh;transition:color .8s}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:background .8s,border-color .8s}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--heading)}
.brand span b{color:var(--accent)}
.menu{display:flex;align-items:center;gap:6px;list-style:none}
.menu a{padding:8px 14px;border-radius:999px;font-weight:500;font-size:15px;color:var(--fg2);transition:background .15s,color .15s}
.menu a:hover,.menu a.active{background:var(--pill);color:var(--fg)}
.menu a.active{font-weight:600}
.lang{display:flex;gap:2px;margin-left:10px;padding:3px;border:1px solid var(--line);border-radius:999px}
.lang a{padding:4px 10px;font-size:13px;font-weight:600;border-radius:999px;color:var(--muted)}
.lang a.on{background:var(--accent);color:#1c1204}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;color:var(--heading)}

/* sun / theme toggle */
.theme-li{margin-left:6px}
.theme-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s}
.theme-btn:hover{background:var(--pill)}
.theme-btn svg{width:17px;height:17px;display:none}
html[data-mode="auto"] .theme-btn .i-auto,html[data-mode="light"] .theme-btn .i-sun,html[data-mode="dark"] .theme-btn .i-moon{display:block}
.theme-btn .i-auto{color:var(--accent)}
html:not([data-mode="auto"]) .phase-label{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:16px;transition:transform .15s,background .15s,box-shadow .15s;border:0;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:#1c1204}
.btn-primary:hover{background:#F0AE47;transform:translateY(-1px);box-shadow:0 8px 20px rgba(227,155,45,.3)}
.btn-ghost{color:var(--ghost-fg);border:1px solid var(--ghost)}
.btn-ghost:hover{background:var(--pill)}
.btn-lg{padding:18px 34px;font-size:18px;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,155,45,.55)}70%{box-shadow:0 0 0 18px rgba(227,155,45,0)}100%{box-shadow:0 0 0 0 rgba(227,155,45,0)}}

/* Sections */
section.block{padding:96px 0;position:relative}
section.soft{background:var(--soft)}
.head{max-width:680px;margin-bottom:48px}
.head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--heading);margin-bottom:14px}
.head p{color:var(--muted);font-size:18px}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .chap{color:var(--accent-dark)}
.chap{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.grid{display:grid;gap:22px}
.g1{grid-template-columns:1fr}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .2s,box-shadow .2s,border-color .2s,background .8s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 0 0 1px rgba(227,155,45,.18) inset;border-color:rgba(227,155,45,.45)}
.icon{width:48px;height:48px;border-radius:12px;background:var(--chip);color:var(--chip-fg);display:grid;place-items:center;margin-bottom:20px}
.card h3{font-size:19px;font-weight:700;color:var(--heading);margin-bottom:8px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15.5px}
.card ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.card li{position:relative;padding-left:22px;font-size:15px;color:var(--fg2)}
.card li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;background:var(--accent)}
.more{display:inline-flex;margin-top:28px;font-weight:600;color:var(--heading);border-bottom:2px solid var(--accent);padding-bottom:2px}

.why{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.why-i{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:14px;padding:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.why b{display:block;font-size:17px;color:var(--heading);margin-bottom:6px}
.why span{color:var(--muted);font-size:15px}

.band{background:var(--navy);color:#fff;border-radius:22px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:var(--shadow)}
.band h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.2;max-width:620px}
.band p{color:rgba(255,255,255,.7);margin-top:8px}

/* Inner page hero */
.page-hero{background:linear-gradient(135deg,rgba(15,42,61,.96),rgba(20,54,80,.92));color:#fff;padding:80px 0 72px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0%,rgba(227,155,45,.18),transparent 60%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(32px,4.5vw,50px);letter-spacing:-.025em;line-height:1.1;font-weight:800;margin-bottom:14px}
.page-hero p{color:rgba(255,255,255,.75);font-size:19px;max-width:640px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.info-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.info-item:first-child{padding-top:0}
.info-item b{display:block;color:var(--heading)}
.info-item a,.info-item span{color:var(--muted)}
.info-item a:hover{color:var(--accent)}
form.card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--fg2)}
.field input,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--input-line);border-radius:10px;font:inherit;font-size:16px;color:var(--fg);background:var(--input);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(227,155,45,.18)}
.hp{position:absolute;left:-9999px}
.form-msg{margin-top:14px;font-size:15px;padding:12px 14px;border-radius:10px;display:none}
.form-msg.ok{display:block;background:#E8F5EE;color:#1E6B45}
.form-msg.err{display:block;background:#FCECEC;color:#8E2B2B}

/* Footer */
footer{position:relative;z-index:1;background:rgba(6,18,27,.94);color:rgba(255,255,255,.65);padding:56px 0 32px;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .brand{color:#fff;margin-bottom:12px}
footer h4{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:#fff}
.copy{padding-top:24px;font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copy .sky-note{opacity:.7}

/* ============ Home: scroll-driven 3D story ============ */
#scene3d{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
.immersive main{position:relative;z-index:1}
.hero{position:relative;color:var(--fg);min-height:100vh;display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--sky1) 0%,transparent 55%);opacity:.75}
.hero-inner{position:relative;width:100%;padding-top:80px;padding-bottom:60px;display:flex;flex-direction:column;gap:56px}
.hero-copy{max-width:680px}
.hero h1{font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.03em;font-weight:800;margin-bottom:22px;color:var(--heading)}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#F5C062,#E39B2D 50%,#F5C062);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
html[data-theme="light"] .hero h1 em{background-image:linear-gradient(90deg,#C9801A,#E39B2D 50%,#C9801A)}
@keyframes shine{to{background-position:-200% 0}}
.hero p.lead{font-size:19px;color:var(--fg2);max-width:540px;margin-bottom:34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-tilt{align-self:flex-start;max-width:900px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 26px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .25s ease-out,background .8s;box-shadow:var(--shadow)}
.tilt-label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{display:flex;gap:12px}
.step .n{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(227,155,45,.16);color:var(--accent);font-weight:700;font-size:14px;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(227,155,45,.3)}
html[data-theme="light"] .step .n{color:var(--accent-dark)}
.step b{display:block;font-weight:600;font-size:15.5px;color:var(--heading)}
.step span{font-size:13.5px;color:var(--muted);line-height:1.45;display:block}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{width:22px;height:36px;border:1.5px solid var(--ghost);border-radius:12px;position:relative}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

.immersive section.stage{min-height:100vh;display:flex;align-items:center}
.immersive section.stage > .wrap{width:100%}
.immersive section.tall{min-height:120vh}
.immersive .head h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.03em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.split.left .col{grid-column:1}
.split.right .col{grid-column:2}
.finale{min-height:110vh!important;align-items:flex-end!important;padding-bottom:80px!important}
.final{text-align:center;max-width:720px;margin:0 auto}
.final h2{font-size:clamp(32px,4.6vw,56px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-bottom:14px;color:var(--heading)}
.final p{color:var(--muted);font-size:19px;margin-bottom:30px}

.chapters{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px}
.chapters a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:12px;font-weight:600;letter-spacing:.06em;color:transparent;transition:color .3s}
.chapters a::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ghost);transition:all .3s}
.chapters a:hover,.chapters a.on{color:var(--fg2)}
.chapters a.on::after{background:var(--accent);box-shadow:0 0 12px var(--accent);height:22px;border-radius:5px}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.rise,.hero h1 em,.btn-lg{animation:none}}

/* Responsive */
@media (max-width:960px){
  .steps4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .phase-label{display:none}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split.left .col,.split.right .col{grid-column:1}
  .immersive section.stage{align-items:flex-end;padding-top:46vh}
  .hero{align-items:flex-end}
  .hero-inner{padding-top:44vh}
  .hero::after{background:linear-gradient(0deg,var(--sky2) 0%,var(--sky2) 35%,transparent 80%);opacity:.92}
  .immersive section.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--sky2) 0%,transparent 70%);opacity:.85}
  .chapters,.scroll-cue{display:none}
  .why{grid-template-columns:1fr}
  .finale{padding-top:52vh!important}
}
@media (max-width:720px){
  body{font-size:16px}
  .burger{display:grid;place-items:center}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--sky2);flex-direction:column;align-items:stretch;padding:12px 16px 20px;border-bottom:1px solid var(--line);gap:2px}
  .menu.open{display:flex}
  .menu a{padding:12px 14px;border-radius:10px}
  .lang,.theme-li{margin:10px 0 0;align-self:flex-start}
  .g3,.g2{grid-template-columns:1fr}
  section.block{padding:68px 0}
  .band{padding:36px 28px}
  .foot{grid-template-columns:1fr}
}

/* ============ SAP Business One: the dive ============ */
#abyss{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 60% 40%,#06131F 0%,#03080E 60%,#010306 100%)}
#deep3d{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
.dive main{position:relative;z-index:1}
.dive section.layer{min-height:115vh;display:flex;align-items:center}
.dive section.layer > .wrap{width:100%}
.dive .hero{min-height:100vh}
.layer-copy{max-width:540px}
.dive .head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.03em}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feat{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:16px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.feat b{display:block;color:var(--heading);font-size:15.5px;margin-bottom:4px}
.feat span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.core-steps{margin:8px auto 34px;text-align:left}
.tm{margin-top:26px;font-size:12.5px;color:var(--muted);opacity:.8}

/* depth gauge */
.gauge{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;font-size:12px;color:var(--fg2)}
.g-read{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--head-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:92px}
.g-read span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.g-read b{font-size:20px;font-weight:800;color:var(--heading);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.g-read b i{font-style:normal;color:var(--accent);margin-right:1px}
.g-read b em{font-style:normal}
.g-body{display:flex;gap:12px;padding-left:4px}
.g-track{position:relative;width:3px;border-radius:3px;background:var(--line)}
.g-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:3px;background:linear-gradient(180deg,#8FB8DE,var(--accent));box-shadow:0 0 10px var(--accent)}
.gauge ol{list-style:none;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.gauge li a{display:block;color:var(--muted);font-weight:600;letter-spacing:.04em;transition:color .3s,transform .3s}
.gauge li.on a{color:var(--heading);transform:translateX(4px)}
.gauge li.on a::before{content:"▸ ";color:var(--accent)}
.dive .wrap{padding-left:max(24px,140px)}
@media (max-width:1180px){.menu a{padding:8px 10px}}
@media (max-width:860px){
  .dive .wrap{padding-left:24px}
  .gauge{left:auto;right:12px;top:auto;bottom:14px;transform:none}
  .g-body{display:none}
  .g-read{min-width:0;padding:8px 10px}
  .feats{grid-template-columns:1fr}
  .dive section.layer{align-items:flex-end;padding-top:48vh}
  .dive .hero{padding-top:0}
  .dive section.layer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(2,6,10,.92) 0%,rgba(2,6,10,.6) 50%,transparent 72%)}
  html[data-theme="light"] .dive .hero::before{background:linear-gradient(0deg,var(--sky2) 0%,var(--sky2) 35%,transparent 80%)}
}

/* ===== SAP B1: knowledge sections below the dive ===== */
.xwrap{position:relative;z-index:1;background:linear-gradient(180deg,rgba(3,9,15,0) 0,rgba(3,9,15,.88) 220px,rgba(3,9,15,.94) 100%);backdrop-filter:blur(2px)}
.xsec{padding:80px 0}
.xfirst{padding-top:180px}
.xh{font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--heading);margin-bottom:16px}
.xp{color:var(--muted);font-size:17.5px;line-height:1.65}
.xp a{color:var(--accent);text-decoration:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:26px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.stat b{display:block;font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,#E39B2D,#F6C978);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.what{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ticks{list-style:none;margin-top:22px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--fg2)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--chip);color:var(--chip-fg);font-size:12px;font-weight:800;display:grid;place-items:center}
.hub{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto}
.hub::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px dashed rgba(227,155,45,.35);animation:hubspin 40s linear infinite}
.hub-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;padding:10px;font-weight:800;font-size:15px;color:#0F2A3D;background:radial-gradient(circle at 35% 30%,#F8D58F,#E39B2D);box-shadow:0 0 60px rgba(227,155,45,.45)}
.hn{position:absolute;transform:translate(-50%,-50%);padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#0E2233;font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap;transition:border-color .2s,color .2s}
.hn:hover{border-color:var(--accent);color:var(--accent)}
@keyframes hubspin{to{transform:rotate(360deg)}}
.xgrid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.xcard{padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--card);transition:border-color .2s,transform .2s}
.xcard:hover{border-color:rgba(227,155,45,.5);transform:translateY(-3px)}
.xcard h3{font-size:18.5px;color:var(--heading);margin:6px 0 8px;letter-spacing:-.01em}
.xcard p{color:var(--muted);font-size:15.5px}
.xcard.sm{padding:22px}.xcard.sm h3{font-size:16.5px;margin-top:0}.xcard.sm p{font-size:14.5px}
.xn{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.1em}
.mtabs{border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
.mtab-list{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-bottom:1px solid var(--line)}
.mtab-list button{font:inherit;font-size:14.5px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .2s}
.mtab-list button:hover{color:var(--fg)}
.mtab-list button[aria-selected="true"]{background:var(--chip);color:var(--chip-fg);border-color:rgba(227,155,45,.4)}
.mpane{padding:30px 32px 34px;animation:paneIn .35s ease}
.mpane h3{font-size:24px;color:var(--heading);margin-bottom:20px}
.mpane h3 small{display:block;font-size:15px;font-weight:500;color:var(--muted);margin-top:4px}
.mpane ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.mpane li{position:relative;padding-left:22px;color:var(--fg2)}
.mpane li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--accent)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}}
.ba{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.ba h3{font-size:18px;color:var(--heading);margin-bottom:16px}
.ba-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba-row>div{padding:16px;border-radius:12px}
.ba-row em{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ba-row p{font-size:14.5px;color:var(--fg2)}
.ba-b{background:rgba(255,255,255,.03);border:1px dashed var(--line)}.ba-b em{color:var(--muted)}
.ba-a{background:rgba(227,155,45,.09);border:1px solid rgba(227,155,45,.3)}.ba-a em{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg2);font-size:15px;font-weight:500;transition:all .2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.meth{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:m;position:relative}
.meth::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,#E39B2D,rgba(227,155,45,.15))}
.meth li{position:relative}
.mn{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0B1C2A;border:2px solid var(--accent);color:var(--accent);font-weight:800;margin-bottom:14px}
.meth b{display:block;color:var(--heading);font-size:16.5px;margin-bottom:6px}
.meth p{color:var(--muted);font-size:14.5px}
.faq{display:grid;gap:10px;max-width:860px}
.faq-i{border:1px solid var(--line);border-radius:14px;background:var(--card);transition:border-color .2s}
.faq-i[open]{border-color:rgba(227,155,45,.45)}
.faq-i summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:650;color:var(--heading);position:relative}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);transition:transform .2s}
.faq-i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-i p{padding:0 22px 20px;color:var(--muted)}
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dive .tm.wrap{display:block;padding-top:10px;padding-bottom:40px;position:relative;z-index:1}
.dive .tm.wrap{background:rgba(3,9,15,.94);max-width:none;margin:0;padding-left:max(24px,calc((100vw - var(--max))/2 + 24px))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.meth{grid-template-columns:1fr;gap:20px}.meth::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}.meth li{padding-left:66px}.mn{position:absolute;left:0;top:0}.what,.demo{grid-template-columns:1fr}}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}.g2,.g3,.g4{grid-template-columns:1fr}.ba-row,.frow,.mpane ul{grid-template-columns:1fr}.mtab-list{flex-wrap:nowrap;overflow-x:auto}.mtab-list button{white-space:nowrap}.hn{font-size:11.5px;padding:6px 10px}.xsec{padding:60px 0}.xfirst{padding-top:120px}}
.gauge{transition:opacity .4s,transform .4s}.gauge.gone{opacity:0;transform:translateX(-20px);pointer-events:none}
/* ===== Home: 10 service tiles ===== */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tile{position:relative;padding:22px 18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .2s,border-color .2s,box-shadow .2s,background .8s}
.tile:hover{transform:translateY(-4px);border-color:rgba(227,155,45,.5);box-shadow:var(--shadow)}
.tile .icon{width:42px;height:42px;margin-bottom:14px}
.tile h3{font-size:16px;line-height:1.3;font-weight:700;color:var(--heading);margin-bottom:6px;letter-spacing:-.01em}
.tile p{font-size:13.5px;line-height:1.5;color:var(--muted)}
.tn{position:absolute;top:16px;right:16px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--accent);opacity:.8}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile{padding:18px 14px}.tile p{font-size:13px}}
@media (max-width:340px){.tiles{grid-template-columns:1fr}}
@media (max-width:420px){.tile h3{font-size:14.5px}.tile p{font-size:12.5px}.tile .icon{width:36px;height:36px;margin-bottom:10px}.tn{top:12px;right:12px}}