/* ============================================================
   Metaverse Edge - shared stylesheet
   01. Design tokens   02. Reset   03. Typography   04. Layout
   05. Buttons         06. Header  07. Hero          08. Sections
   09. Cards           10. Tabs    11. Forms          12. Blog
   13. Footer          14. Animations   15. Utilities
   Palette: blue/violet dominant (from the logo), orange as a
   secondary accent only. Pure black ink, pure white paper.
   Type: Space Grotesk (display) + Inter (body/text).
   ============================================================ */

/* ---------- 01. Design tokens ---------- */
:root{
  --ink:#000000;
  --ink-muted:#000000;
  --ink-soft:#000000;
  --paper:#ffffff;
  --paper-soft:#f6f7f9;
  --line:#e3e6eb;
  --line-strong:#c9cdd6;

  --blue:#155fc9;
  --blue-ink:#0e3a9c;
  --violet:#4c3ed6;
  --orange:#b05c0a;

  --glow-blue:rgba(21,95,201,.32);
  --glow-violet:rgba(76,62,214,.28);

  --black:#000000;
  --dark:#07090d;
  --dark-surface:#10141d;
  --dark-surface-2:#171c28;
  --dark-line:rgba(255,255,255,.12);
  --dark-text-muted:rgba(255,255,255,.68);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;

  --transition-fast:160ms ease;
  --transition-base:280ms ease;
  --transition-slow:600ms cubic-bezier(.2,.8,.2,1);

  --shadow-soft:0 18px 40px -24px rgba(0,0,0,.18);
  --shadow-card:0 24px 60px -30px rgba(0,0,0,.35);
  --shadow-glow:0 14px 34px -12px var(--glow-blue);

  --maxw:1180px;
  --header-h:72px;
  --header-gap:14px;
}

/* ---------- 02. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- 03. Typography ---------- */
h1,h2,h3,h4{
  font-family:"Space Grotesk",Arial,sans-serif;
  color:var(--ink);
  margin:0;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
}
h2.h-title{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h1.h-title{font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-.03em}
.lede{color:var(--ink-muted);font-size:1.05rem;max-width:640px}

.gradient-text{
  background:linear-gradient(90deg,var(--blue),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- kicker / eyebrow ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink-muted);
  margin-bottom:14px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent,var(--blue));display:inline-block}
.k-blue{--accent:var(--blue)}
.k-orange{--accent:var(--orange)}
.k-violet{--accent:var(--violet)}

/* ---------- 04. Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
@media (max-width:640px){.wrap{padding:0 12px}}

section{position:relative}
.section-pad{padding:96px 0}
.section-pad-sm{padding:64px 0}
@media (max-width:900px){
  .section-pad{padding:64px 0}
  .section-pad-sm{padding:44px 0}
}
.tint{background:var(--paper-soft)}

/* ---------- 05. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;
  font-size:.95rem;font-weight:600;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base),transform var(--transition-fast),box-shadow var(--transition-base);
  white-space:nowrap;
}
.btn-primary{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff;
  box-shadow:0 14px 32px -14px var(--glow-blue);
}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px var(--glow-violet)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-soft)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
.btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ============================================================
   06. Header
   ============================================================ */
.header-spacer{height:var(--header-h)}
.site-header{
  position:fixed;top:0;left:0;
  width:100%;
  z-index:1000;
  border-radius:0;
  background:rgba(7,9,13,.16);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);
}
body.is-scrolled .site-header{
  background:rgba(7,9,13,.72);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav > li{position:relative}
.nav > li > a{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:12px 14px;
  font-size:.92rem;font-weight:500;
  color:rgba(255,255,255,.86);
}
.nav > li > a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base);
}
.nav > li > a:hover,.nav > li.is-active > a{color:#fff}
.nav > li > a:hover::after,.nav > li.is-active > a::after{transform:scaleX(1)}
.nav .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7}
.nav-cta{
  margin-left:10px;
  padding:10px 22px !important;
  background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff !important;
  border-radius:var(--radius-pill);
  box-shadow:0 10px 26px -12px var(--glow-blue);
}
.nav-cta::after{display:none}
.nav-cta:hover{filter:brightness(1.08)}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:300px;
  background:rgba(10,14,22,.88);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius-md);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
  padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nav > li:hover .dropdown,.nav > li.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dropdown a{
  position:relative;
  display:flex;flex-direction:column;gap:2px;
  padding:11px 34px 11px 13px;border-radius:10px;
}
.dropdown a::after{
  content:"\2192";position:absolute;right:12px;top:50%;transform:translate(-4px,-50%);
  color:var(--blue);opacity:0;transition:opacity .2s ease,transform .2s ease;
}
.dropdown a:hover{background:rgba(255,255,255,.08)}
.dropdown a:hover::after{opacity:1;transform:translate(0,-50%)}
.dropdown .dd-label{font-size:.92rem;font-weight:600;color:#fff}
.dropdown .dd-desc{font-size:.8rem;color:var(--dark-text-muted)}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.hamburger span{width:22px;height:2px;background:#fff;display:block}

.mobile-panel{
  display:none;
  position:fixed;inset:var(--header-h) 0 0 0;
  background:#fff;z-index:490;
  overflow-y:auto;padding:16px 12px;
}
.mobile-panel.is-open{display:block}
.mobile-panel .m-top{
  display:block;padding:14px 10px;font-size:1.02rem;font-weight:600;
  border-bottom:1px solid var(--line);
}
.m-item{border-bottom:1px solid var(--line)}
.m-row{
  display:flex;align-items:stretch;
}
.m-row a{
  flex:1;display:block;padding:14px 10px;font-size:1.02rem;font-weight:600;
  border-bottom:0;
}
.m-toggle{
  background:var(--paper-soft);border:0;border-radius:8px;
  width:38px;margin:8px 0;margin-right:2px;
  display:flex;align-items:center;justify-content:center;
}
.m-chev{
  width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);transition:transform .18s ease;
}
.m-item.is-open .m-chev{transform:rotate(-135deg)}
.m-sub{display:none;padding:2px 0 10px 10px}
.m-item.is-open .m-sub{display:block}
.mobile-panel .m-sub a{
  display:block;font-size:.92rem;font-weight:500;color:var(--ink-muted);
  padding:10px 12px 10px 22px;border-bottom:0;
}

@media (max-width:980px){
  .nav{display:none}
  .hamburger{display:flex}
}

/* ---------- scroll progress + back to top ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  z-index:1100;transition:width .1s linear;
}
.back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:900;
  width:46px;height:46px;border-radius:50%;border:0;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -12px var(--glow-blue);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

/* ============================================================
   07. Hero (video)
   ============================================================ */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black);
}
.mini-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.hero video,.mini-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.94) 100%)}
.mini-hero .hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.92) 100%)}

.hero::before,.mini-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 85%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 85%);
}
.hero::after,.mini-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 78% 22%,var(--glow-violet),transparent 42%),
    radial-gradient(circle at 14% 78%,var(--glow-blue),transparent 38%);
}

.hero-body{position:relative;z-index:2;color:#fff;padding:calc(var(--header-h) + 40px) 0 64px;width:100%}
.mini-hero .hero-body{padding:calc(var(--header-h) + 24px) 0 44px}
.hero-body .kicker{color:#cbd5f5}
.hero-body .kicker::before{background:#fff}
.hero-body h1{color:#fff;max-width:780px}
.hero-body .lede{color:#fff;max-width:560px;margin-top:18px}
.mini-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-stats{display:flex;gap:48px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.25);flex-wrap:wrap}
.hero-stats .num{font-family:"Space Grotesk",sans-serif;font-size:2.1rem;font-weight:700;color:#fff}
.hero-stats .lbl{font-size:.82rem;color:#fff;margin-top:2px}

.scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.7);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  opacity:1;transition:opacity var(--transition-base);
}
.scroll-cue .line{width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:scrollCue 1.8s ease-in-out infinite}
body.is-scrolled .scroll-cue{opacity:0;pointer-events:none}
@keyframes scrollCue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* Staged hero entrance. Content is always visible (opacity:1) so
   the page never depends on this animation firing; it only nudges
   elements up into place. */
.hero-body > *{opacity:1;transform:translateY(0)}
body:not(.no-js) .hero-body.stage > *{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
body:not(.no-js) .hero-body.stage.is-ready > *{transform:translateY(0)}
.hero-body.stage > *:nth-child(1){transition-delay:.05s}
.hero-body.stage > *:nth-child(2){transition-delay:.15s}
.hero-body.stage > *:nth-child(3){transition-delay:.25s}
.hero-body.stage > *:nth-child(4){transition-delay:.35s}
.hero-body.stage > *:nth-child(5){transition-delay:.45s}

/* ============================================================
   Partner strip
   ============================================================ */
.partners{border-bottom:1px solid var(--line);padding:34px 0;overflow:hidden}
.partners .p-label{text-align:center;color:var(--ink-muted);font-size:.85rem;margin-bottom:22px}
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;align-items:center;gap:72px;width:max-content;animation:ticker 28s linear infinite}
.ticker-track img{height:42px;width:auto;filter:grayscale(1);opacity:.55;transition:filter var(--transition-base),opacity var(--transition-base),transform var(--transition-base)}
.ticker-track img:hover{filter:grayscale(0);opacity:1;transform:scale(1.04)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   08. Sections - index list rows (focus areas / services / why-us)
   ============================================================ */
.index-list{border-top:1px solid var(--line)}
.index-row{
  position:relative;
  display:grid;grid-template-columns:64px 1fr 1.3fr;gap:32px;
  padding:34px 44px 34px 0;border-bottom:1px solid var(--line);
  align-items:start;
  transition:background var(--transition-base);
}
.index-row::before{
  content:"";position:absolute;inset:0 0 -1px 0;opacity:0;
  background:linear-gradient(90deg,rgba(21,95,201,.06),rgba(76,62,214,.05) 60%,transparent);
  transition:opacity var(--transition-base);pointer-events:none;
}
.index-row::after{
  content:"\2192";position:absolute;right:6px;top:34px;
  color:var(--blue);font-family:"Space Grotesk",sans-serif;font-size:1.1rem;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--transition-base),transform var(--transition-base);
}
.index-row:hover::before{opacity:1}
.index-row:hover::after{opacity:1;transform:translateX(0)}
.index-row:hover .idx{color:var(--blue)}
.index-row .idx{font-family:"Space Grotesk",sans-serif;font-size:.85rem;color:var(--ink-soft);padding-top:4px;transition:color var(--transition-base);position:relative}
.index-row h3{font-size:1.18rem;margin-bottom:8px;position:relative}
.index-row p{color:var(--ink-muted);font-size:.96rem;position:relative}
.index-row .tag{display:inline-block;font-size:.76rem;color:var(--accent,var(--blue));font-weight:600;margin-bottom:6px;position:relative}
@media (max-width:760px){
  .index-row{grid-template-columns:40px 1fr;grid-template-areas:"idx title" "idx body"}
  .index-row .idx{grid-area:idx}
  .index-row h3{grid-area:title}
  .index-row p{grid-area:body}
  .index-row::after{display:none}
}

/* two-column index (services grid uses this) */
.index-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--line)}
.index-grid .index-row{grid-column:span 1}
@media (max-width:760px){.index-grid{grid-template-columns:1fr}}

/* ============================================================
   Feature / focus rows with accent bar
   ============================================================ */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:center;padding:80px 0;border-bottom:1px solid var(--line);
}
.feature-row:last-child{border-bottom:none}
.feature-row.reverse .f-visual{order:2}
.f-visual{
  border:1px solid var(--line);background:var(--paper-soft);
  border-radius:var(--radius-lg);padding:40px;min-height:260px;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.f-visual .f-stat{display:flex;gap:14px;align-items:flex-start}
.f-visual .f-stat .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.f-visual .f-stat strong{display:block;font-size:.96rem;color:var(--ink)}
.f-visual .f-stat span{font-size:.85rem;color:var(--ink-muted)}
@media (max-width:860px){
  .feature-row{grid-template-columns:1fr;padding:56px 0}
  .feature-row.reverse .f-visual{order:0}
}

/* ============================================================
   Process / approach - genuinely sequential steps
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:23px;left:0;right:0;height:1px;background:var(--line)}
.step{position:relative;padding-right:24px}
.step .s-num{
  width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.9rem;
  margin-bottom:20px;position:relative;z-index:1;
  transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base);
}
.step:hover .s-num{background:linear-gradient(135deg,var(--blue),var(--violet));border-color:transparent;color:#fff}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{color:var(--ink-muted);font-size:.92rem}
@media (max-width:820px){
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .steps::before{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============================================================
   Chips
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  font-size:.82rem;color:var(--ink-muted);
  transition:border-color var(--transition-base),color var(--transition-base),background var(--transition-base);
}
.chip:hover{border-color:var(--blue);color:var(--blue);background:rgba(21,95,201,.05)}

/* ============================================================
   09. Cards (service detail / consulting / support)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.plain-card{
  background:#fff;padding:32px 28px;border:1px solid var(--line);border-radius:var(--radius-md);
  transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);
}
.plain-card:hover{transform:translateY(-6px);border-color:rgba(21,95,201,.35);box-shadow:var(--shadow-card)}
.plain-card h3{font-size:1.08rem;margin-bottom:10px}
.plain-card p{color:var(--ink-muted);font-size:.92rem}
.plain-card .tag{display:block;font-size:.78rem;font-weight:600;color:var(--accent,var(--blue));margin-bottom:12px}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr}}

/* ============================================================
   10. Tabs (about / consulting / support)
   ============================================================ */
.tabbar{border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);background:#fff;z-index:80}
.tabbar .wrap{display:flex;gap:4px;overflow-x:auto}
.tab-btn{
  padding:20px 6px;margin-right:34px;
  font-size:.95rem;font-weight:600;color:var(--ink-muted);
  border-bottom:2px solid transparent;white-space:nowrap;
  background:none;border-top:0;border-left:0;border-right:0;
  transition:color var(--transition-base),border-color var(--transition-base);
}
.tab-btn.is-active{color:var(--ink);border-color:var(--ink)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:tabIn .4s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;margin-top:44px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.point-list{display:flex;flex-direction:column}
.point{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.point:last-child{padding-bottom:0}
.point .p-num{font-family:"Space Grotesk",sans-serif;font-size:.8rem;color:var(--ink-soft);padding-top:2px}
.point h4{font-size:.98rem;margin-bottom:4px}
.point p{color:var(--ink-muted);font-size:.9rem}
.panel-summary{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:.92rem}

/* values grid (about) */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.value-cell{
  background:#fff;padding:32px 28px;border:1px solid var(--line);border-radius:var(--radius-md);
  transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);
}
.value-cell:hover{transform:translateY(-6px);border-color:rgba(76,62,214,.35);box-shadow:var(--shadow-card)}
.value-cell h3{font-size:1.05rem;margin:14px 0 8px}
.value-cell p{color:var(--ink-muted);font-size:.9rem}
.value-cell .v-ic{width:34px;height:34px}
@media (max-width:900px){.values-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr}}

/* pillars (vision) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.pillar{border-top:2px solid var(--accent,var(--blue));padding-top:20px}
.pillar h4{font-size:1.02rem;margin-bottom:8px}
.pillar p{color:var(--ink-muted);font-size:.92rem}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}

/* ============================================================
   CTA band (video)
   ============================================================ */
.cta-band{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:110px 0}
.cta-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0}
.cta-band .hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.92));z-index:0}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 30% 50%,#000 40%,transparent 85%);
  mask-image:radial-gradient(ellipse 80% 80% at 30% 50%,#000 40%,transparent 85%);
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,var(--glow-blue),transparent 42%),
    radial-gradient(circle at 85% 75%,var(--glow-violet),transparent 40%);
}
.cta-band .inner{position:relative;z-index:2;max-width:640px}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:20px}
.cta-band p{color:#fff;margin-bottom:32px}
.cta-band .btns{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   13. Footer
   ============================================================ */
.site-footer{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:72px 0 28px}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%,var(--glow-blue),transparent 40%),
    radial-gradient(circle at 90% 20%,var(--glow-violet),transparent 35%);
  opacity:.6;
}
.site-footer .wrap{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px}
.footer-brand img{height:36px;filter:brightness(0) invert(1);margin-bottom:16px}
.footer-brand p{font-size:.88rem;line-height:1.7;color:#fff;max-width:280px}
.footer-col h4{color:#fff;font-size:.88rem;margin-bottom:16px;font-weight:600}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:.87rem;color:#fff;text-decoration:none;border-bottom:1px solid transparent}
.footer-col a:hover{border-bottom-color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.3);font-size:.82rem;color:#fff;flex-wrap:wrap;gap:12px}
.footer-bottom a{margin-left:20px;color:#fff;border-bottom:1px solid transparent}
.footer-bottom a:hover{border-bottom-color:#fff}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:36px}.footer-brand{grid-column:span 2}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:span 1}}

/* ============================================================
   11. Contact page / Forms
   ============================================================ */
.contact-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.contact-info{padding:52px 48px;border-right:1px solid var(--line)}
.contact-form-panel{padding:52px 48px;background:var(--paper-soft)}
.contact-point{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.contact-point:first-of-type{border-top:none;margin-top:24px}
.contact-point .ic{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;color:var(--blue)}
.contact-point h3{font-size:.92rem;margin-bottom:4px}
.contact-point a,.contact-point p{font-size:.92rem;color:var(--ink-muted)}
.hours-box{display:flex;gap:32px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.hours-box strong{display:block;font-size:.85rem;margin-bottom:4px}
.hours-box span{font-size:.85rem;color:var(--ink-muted)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-family:inherit;font-size:.92rem;background:#f8fafc;
  transition:border-color var(--transition-base),box-shadow var(--transition-base);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(21,95,201,.12);
}
.field textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-size:.82rem;color:var(--ink-muted);margin-top:6px}
.map-frame{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;margin-top:-1px}
.map-frame iframe{width:100%;height:380px;display:block;border:0}
@media (max-width:860px){
  .contact-shell{grid-template-columns:1fr}
  .contact-info{border-right:none;border-bottom:1px solid var(--line)}
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   12. Blog page
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.blog-card{
  background:#fff;padding:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:rgba(21,95,201,.3)}
.blog-card-top{padding:22px 26px 0}
.blog-pill{display:inline-block;font-size:.76rem;font-weight:600;color:var(--accent,var(--blue))}
.blog-meta{font-size:.78rem;color:var(--ink-soft);margin-top:8px;display:flex;gap:10px}
.blog-card-body{padding:16px 26px 30px}
.blog-card-body h3{font-size:1.06rem;margin-bottom:10px}
.blog-card-body p{font-size:.9rem;color:var(--ink-muted);margin-bottom:16px}
.blog-card-link{position:relative;font-size:.86rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;padding-right:16px}
.blog-card-link::after{content:"\2192";position:absolute;right:0;top:0;transition:transform var(--transition-base)}
.blog-card:hover .blog-card-link::after{transform:translateX(4px)}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* ============================================================
   14. Animations - scroll reveal (restrained, never hides content)
   ============================================================ */
/* Content is visible by default (opacity:1). JS only nudges these
   into place once observed, so nothing depends on JS running for
   the page to be readable. */
.reveal{opacity:1;transform:translateY(10px);transition:transform .55s ease;transition-delay:var(--delay,0s)}
.reveal.in{transform:translateY(0)}
.reveal-left{opacity:1;transform:translateX(-18px);transition:transform .55s ease;transition-delay:var(--delay,0s)}
.reveal-left.in{transform:translateX(0)}
.reveal-right{opacity:1;transform:translateX(18px);transition:transform .55s ease;transition-delay:var(--delay,0s)}
.reveal-right.in{transform:translateX(0)}
.reveal-scale{opacity:1;transform:scale(.97);transition:transform .55s ease;transition-delay:var(--delay,0s)}
.reveal-scale.in{transform:scale(1)}

/* ---------- 15. Utilities ---------- */
.center{text-align:center;margin-left:auto;margin-right:auto}
.mt-lg{margin-top:56px}
.svc-header,.pg-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* ============================================================
   16. Timeline (About journey / Consulting process)
   ============================================================ */
.timeline{position:relative;padding-left:44px;margin-top:56px}
.timeline-track{position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--line)}
.timeline-fill{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(180deg,var(--blue),var(--violet));transition:height .1s linear}
.timeline-item{position:relative;padding-bottom:52px}
.timeline-item:last-child{padding-bottom:0}
.t-dot{
  position:absolute;left:-44px;top:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--line-strong);z-index:1;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.timeline-item.in .t-dot{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 0 5px rgba(21,95,201,.14)}
.t-year{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:.78rem;font-weight:700;color:var(--blue);margin-bottom:6px}
.timeline-item h3{font-size:1.12rem;margin-bottom:8px}
.timeline-item p{color:var(--ink-muted);font-size:.94rem;max-width:560px}

/* ============================================================
   18. Featured blog article
   ============================================================ */
.featured-article{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:48px;
}
.featured-visual{
  position:relative;overflow:hidden;background:var(--black);min-height:280px;
  display:flex;align-items:center;justify-content:center;
}
.featured-visual::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
}
.featured-visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,var(--glow-blue),transparent 45%),radial-gradient(circle at 75% 75%,var(--glow-violet),transparent 45%);
}
.featured-visual .f-mark{position:relative;z-index:1;font-family:"Space Grotesk",sans-serif;font-weight:700;color:rgba(255,255,255,.9);font-size:1rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.featured-visual .f-mark img{height:26px;filter:brightness(0) invert(1)}
.featured-body{padding:44px 44px;display:flex;flex-direction:column;justify-content:center}
.featured-body .blog-pill{font-size:.8rem}
.featured-body h3{font-size:1.6rem;margin:14px 0 16px}
.featured-body p{color:var(--ink-muted);font-size:1rem;margin-bottom:22px}
@media (max-width:860px){
  .featured-article{grid-template-columns:1fr}
  .featured-body{padding:32px}
}

/* ============================================================
   19. Page transition (fade out only - never fade content in from
   hidden, so the page never depends on JS to be visible)
   ============================================================ */
body.page-out{opacity:0;transition:opacity .22s ease}