/* ============================================================================
   Maldeka v2 shared stylesheet
   The design system + site chrome shared by every page: tokens, reset,
   typography helpers, buttons, the header (floating pill), the mobile menu,
   the porcelain CTA band, the crest footer, and shared motion utilities.
   Page-specific CSS (heroes, section layouts, page visuals) stays in each
   page's own <style> block. Source of truth for the chrome is index.html.
   ============================================================================ */

/* ============ VIEW TRANSITIONS (native cross-page nav) ============ */
@view-transition{navigation:auto;}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none;}}
::view-transition-group(*){animation-duration:560ms;animation-timing-function:cubic-bezier(.16,1,.3,1);}

/* ============ TOKENS ============ */
:root{
  --font-display:'Michroma',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-display:clamp(2.25rem,5.2vw,3.25rem);
  --text-statement:clamp(1.75rem,3.6vw,2.25rem);
  --text-3xl:30px;--text-2xl:24px;--text-xl:20px;--text-lg:18px;
  --text-base:16px;--text-sm:14px;--text-xs:12.5px;--text-overline:11px;

  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;

  --layout-max:1240px;
  --ease-fast:150ms ease;
  --ease-base:300ms cubic-bezier(0.22,1,0.36,1);
  --ease-reveal:700ms cubic-bezier(0.16,1,0.3,1);
  --ease-slide:600ms cubic-bezier(0.16,1,0.3,1);

  --z-sticky:1100;
  --z-menu-overlay:1080;
}
/* ---- LIGHT ---- */
html[data-theme="light"]{
  --accent:#0a54af; --accent-hover:#094a9c; --accent-active:#083f86;
  --accent-ink:#0a54af; --accent-tint:#e7eefb; --accent-tint-strong:#cdddf6;
  --on-accent:#f8fafe;
  --success:#1f7a57; --success-ink:#155a3f; --success-tint:#e6f1ec;

  --ink:#171a1f; --text:#171a1f; --text-muted:#3c424c; --text-subtle:#5a616c;
  --bg:#f4f5f7; --surface:#fbfcfd; --surface-2:#eceef1;
  --border:#dde0e5; --border-strong:#c7ccd3; --border-subtle:#eceef1;

  --invert-bg:#171a1f; --invert-surface:#23272e; --invert-text:#f4f5f7;
  --invert-muted:#a9afb9; --invert-border:#2c313a;
  --footer-bg:#171a1f;

  --shadow-sm:0 1px 3px rgba(20,24,31,.06),0 1px 2px rgba(20,24,31,.04);
  --shadow-md:0 4px 8px -2px rgba(20,24,31,.08),0 2px 4px -2px rgba(20,24,31,.05);
  --shadow-lg:0 18px 34px -16px rgba(20,24,31,.20);
  --shadow-xl:0 36px 70px -34px rgba(10,46,120,.34);
  color-scheme:light;
}
/* ---- DARK (neutral charcoal, not navy) ---- */
html[data-theme="dark"]{
  --accent:#3d82e6; --accent-hover:#5a97ec; --accent-active:#2f6fd0;
  --accent-ink:#85b4f4; --accent-tint:#16243b; --accent-tint-strong:#1f3a5e;
  --on-accent:#f8fafe;
  --success:#3ba47b; --success-ink:#62c89c; --success-tint:#16241e;

  --ink:#eef0f3; --text:#eef0f3; --text-muted:#c2c7cf; --text-subtle:#8b929c;
  /* Neutral ramp retuned for parity with light: this system carries depth with borders, so the
     dark borders are lifted well clear of their surfaces (border/surface ~1.47, was ~1.17) and
     the card fill steps modestly off the page. Text stays comfortably above AA. */
  --bg:#14161b; --surface:#1c2028; --surface-2:#262b34;
  --border:#363c47; --border-strong:#4a515d; --border-subtle:#2c313b;

  --invert-bg:#1c2028; --invert-surface:#262b34; --invert-text:#eef0f3;
  --invert-muted:#a9afb9; --invert-border:#3a4150;
  /* Footer is the page's bedrock: the darkest layer, below the page bg, so it grounds the
     scroll instead of blending into it the way a raised --invert-bg surface does. */
  --footer-bg:#0e1013;

  --shadow-sm:0 1px 3px rgba(0,0,0,.30);
  --shadow-md:0 4px 10px -2px rgba(0,0,0,.40);
  --shadow-lg:0 18px 34px -16px rgba(0,0,0,.55);
  --shadow-xl:0 36px 70px -34px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ============ RESET + BASE ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);transition:background .3s ease;scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);background:var(--bg);color:var(--text);
  font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow-x:hidden` promotes overflow-y to auto, making <body> a scroll
     container, which breaks position:fixed on iOS Safari (the header scrolls away with the page).
     `overflow-x:clip` still hides horizontal overflow but keeps the header fixed to the viewport. */
  overflow-x:clip;transition:background .3s ease,color .3s ease;
}
a{color:inherit;text-decoration:none;}
.mich{font-family:var(--font-display);font-weight:400;}
/* horizontal gutter only (padding-inline) so combining .wrap with a vertically-padded
   class like .ft-top never clobbers that element's top/bottom padding */
.wrap{max-width:var(--layout-max);margin:0 auto;padding-inline:24px;}
::selection{background:var(--accent);color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* ---- mark + wordmark ---- */
.mark{height:26px;width:auto;display:block;}
.mark .poly{fill:var(--accent);transition:fill .3s ease;}
.lockup{display:flex;align-items:center;gap:11px;}
.lockup .word{font-family:var(--font-display);font-size:17px;letter-spacing:.14em;color:var(--text);}

/* ============ BUTTONS ============ */
.btn{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);letter-spacing:.01em;
  border:none;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;transition:background var(--ease-fast),border-color var(--ease-fast),transform var(--ease-fast);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-primary:active{background:var(--accent-active);transform:scale(.985);}
.btn-ghost{background:transparent;color:var(--text-muted);font-weight:500;padding:8px 14px;}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border-strong);}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--text-subtle);}
.btn-lg{padding:14px 28px;font-size:15px;}
/* invert variants: for buttons that sit on a dark (--invert-bg) surface, e.g. dark feature panels */
.btn.on-invert{background:var(--accent);color:var(--on-accent);}
.btn.on-invert:hover{background:var(--accent-hover);}
.btn.on-invert:active{background:var(--accent-active);transform:scale(.985);}
.btn-sec-invert{background:transparent;color:var(--invert-text);border:1.5px solid var(--invert-border);}
.btn-sec-invert:hover{background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--invert-text) 30%,var(--invert-border));}

/* ============ NAV ============ */
header.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);
  background:transparent;view-transition-name:site-header;}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px;}
/* Floating pill: over the hero the header is bare; on scroll a bordered, blurred capsule
   materialises behind the lockup + burger, detached from the top and side edges. The pill's
   horizontal reach is set so the lockup mark holds the same screen x in both states (no jump);
   it rises + fades in rather than hard-cutting. */
.nav-in::before{content:"";position:absolute;z-index:-1;inset:9px 16px;
  border-radius:var(--radius-full);
  background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-7px) scale(.98);
  transition:opacity var(--ease-base),transform var(--ease-base);pointer-events:none;}
header.nav.scrolled .nav-in::before{opacity:1;transform:none;}
/* while the mobile menu is open the pill would sit behind the overlay; keep it out of the way.
   Selector must out-specify `header.nav.scrolled .nav-in::before` or the pill stays lit in the menu. */
body.menu-open header.nav .nav-in::before{opacity:0;transform:translateY(-7px) scale(.98);}
@media(prefers-reduced-motion:reduce){
  .nav-in::before{transition:opacity var(--ease-fast);transform:none;}
  header.nav.scrolled .nav-in::before{transform:none;}
  body.menu-open header.nav .nav-in::before{transform:none;}
}
/* lock the page behind the open menu (no scroll-through on touch). JS pins the offset via
   inline `top` so scroll position is preserved when the menu closes. */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
nav.links{display:flex;gap:30px;font-size:var(--text-sm);color:var(--text-subtle);font-weight:400;}
nav.links a{transition:color var(--ease-fast);}
nav.links a:hover{color:var(--text);}
.nav-right{display:flex;align-items:center;gap:10px;}
.toggle{width:38px;height:38px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:all var(--ease-fast);}
.toggle:hover{color:var(--text);border-color:var(--border-strong);}
.toggle svg{width:18px;height:18px;}
.toggle .moon{display:none;} html[data-theme="dark"] .toggle .sun{display:none;} html[data-theme="dark"] .toggle .moon{display:block;}

/* ---- language selector: desktop dropdown (header) ---- */
/* Compact mono trigger (globe + current code + caret) styled as a sibling of the old toggle pill,
   so the header's right cluster keeps its weight after the theme control moves to the footer. The
   menu is a surface popover; it escapes downward out of the transparent header (nothing clips it). */
.lang{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 9px 0 10px;
  border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.02em;
  cursor:pointer;transition:color var(--ease-fast),border-color var(--ease-fast);}
.lang-btn:hover{color:var(--text);border-color:var(--border-strong);}
.lang-globe{width:16px;height:16px;flex-shrink:0;}
.lang-code{line-height:1;}
.lang-caret{width:11px;height:11px;flex-shrink:0;opacity:.7;transition:transform var(--ease-base);}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:176px;z-index:10;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;
  transform-origin:top right;animation:lang-pop .18s cubic-bezier(.16,1,.3,1);}
.lang-menu[hidden]{display:none;}
@keyframes lang-pop{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;
  background:transparent;border-radius:var(--radius-sm);cursor:pointer;text-align:left;
  color:var(--text-muted);transition:background var(--ease-fast),color var(--ease-fast);}
.lang-opt:hover{background:var(--surface-2);color:var(--text);}
.lang-opt-code{font-family:var(--font-mono);font-size:12px;font-weight:600;width:22px;flex-shrink:0;color:var(--text-subtle);}
.lang-opt-name{font-size:var(--text-sm);flex:1;}
.lang-opt[aria-checked="true"]{color:var(--ink);}
.lang-opt[aria-checked="true"] .lang-opt-code{color:var(--ink);}
.lang-check{width:15px;height:15px;flex-shrink:0;color:var(--text-subtle);opacity:0;}
.lang-opt[aria-checked="true"] .lang-check{opacity:1;}
/* Desktop pill: the capsule's rounded end-caps (~27px radius) sit where the logo and the CTA are,
   clipping their outer corners (the logo felt cramped, the CTA poked out of the pill). On the wide
   bar, float the pill a touch closer to the column edge and inset the lockup + CTA clear of the caps
   so the capsule fully wraps both with even breathing room. Mobile's narrower pill is left as-is. */
@media(min-width:861px){
  .nav-in::before{inset:9px 12px;}
  .nav-in .lockup{margin-left:20px;}
  .nav-right{margin-right:20px;}
}
@media(max-width:860px){nav.links{display:none;}}

/* ---- burger trigger: borderless, just an asymmetric two-rule mark that closes into an X ---- */
.burger{display:none;position:relative;width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--ink);
  align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--ease-fast),color var(--ease-fast);}
.burger{-webkit-tap-highlight-color:transparent;}
/* press feedback is a circle inset within the 44px tap target, so it echoes the rounded header
   pill instead of a hard square. Hover is scoped to real hover devices so it never sticks after
   a touch; touch gets a brief :active pulse instead. */
.burger::before{content:"";position:absolute;inset:6px;border-radius:var(--radius-full);
  background:transparent;transition:background var(--ease-fast);}
@media(hover:hover){.burger:hover::before{background:color-mix(in srgb,var(--ink) 8%,transparent);}}
.burger:active::before{background:color-mix(in srgb,var(--ink) 12%,transparent);}
.burger-box{position:relative;width:18px;height:13px;}
.burger-ln{position:absolute;left:0;height:1.7px;border-radius:2px;background:currentColor;
  transition:top .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}
.burger-ln.l1{top:1px;width:100%;}
.burger-ln.l2{top:9.5px;width:60%;}
.burger[aria-expanded="true"] .burger-ln{top:5.5px;width:100%;}
.burger[aria-expanded="true"] .burger-ln.l1{transform:rotate(45deg);}
.burger[aria-expanded="true"] .burger-ln.l2{transform:rotate(-45deg);}
@media(max-width:860px){
  .nav-right{display:none;}
  .burger{display:inline-flex;}
  .nav-in .lockup{margin-left:13px;}
}

/* ============ MOBILE MENU: angular facet wipe from the burger, nav rises ============ */
/* The reveal is a diamond-facet cut: a diagonal edge sweeps from the burger corner
   (top-right) to the opposite corner, led by a cobalt blade (the lit facet). Then the
   nav rises in, echoing the hero's masked-line motion. Fully themed, follows light/dark. */
.menu-overlay{position:fixed;inset:0;z-index:var(--z-menu-overlay);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(132px,20vh,164px) clamp(26px,7vw,38px) clamp(30px,5vh,42px);
  pointer-events:none;}
.menu-overlay.open{pointer-events:auto;}

/* two stacked facets cut along the diamond's facet angle. Opening: the cobalt blade sweeps
   in first from the burger (top-right), a full diagonal of cobalt; the page-coloured fill
   chases ~130ms behind and covers it. Closing reverses, the fill retreats first so the
   cobalt facet trails back out to the same corner. A visible "lit facet" wipe both ways. */
/* These two are aria-hidden decoration (the lit facet + the page-colour fill). They cover the
   full overlay (inset:0) and animate clip-path, so while the wipe plays they are composited
   full-screen layers. Without pointer-events:none the compositor can let them swallow taps
   aimed at the links stacked above, making the links feel unpressable until the wipe finishes.
   They must never be tap targets. Animation timing is unchanged. */
.menu-blade,.menu-sheet{position:absolute;inset:0;pointer-events:none;transition:clip-path .56s cubic-bezier(.16,1,.3,1);}
.menu-blade{z-index:0;background:var(--accent);clip-path:polygon(160% 0,100% 0,100% 100%,220% 100%);transition-delay:.13s;}
.menu-sheet{z-index:1;background:var(--bg);clip-path:polygon(160% 0,100% 0,100% 100%,220% 100%);}
.menu-overlay.open .menu-blade{clip-path:polygon(-60% 0,100% 0,100% 100%,0% 100%);transition-delay:0s;}
.menu-overlay.open .menu-sheet{clip-path:polygon(-60% 0,100% 0,100% 100%,0% 100%);transition-delay:.13s;}

/* nav: large confident labels separated by space, no rules; whitespace does the
   structuring. Each rises out masked and staggered (the hero move). */
.menu-links{position:relative;z-index:3;display:flex;flex-direction:column;gap:clamp(14px,2.6vh,24px);}
.menu-link{position:relative;display:block;overflow:hidden;}
.menu-link>span{display:block;padding:3px 2px 8px;font-family:var(--font-sans);font-weight:600;
  font-size:clamp(31px,9.4vw,42px);letter-spacing:-0.032em;line-height:1;color:var(--ink);
  transform:translateY(122%);transition:transform .72s cubic-bezier(.16,1,.3,1),color var(--ease-fast);}
.menu-link:hover>span,.menu-link:focus-visible>span{color:var(--accent);}
.menu-overlay.open .menu-link>span{transform:translateY(0);transition-delay:calc(.34s + var(--i) * .07s);}

/* foot: a utility row (theme toggle + language segments) over the full-width quote, rises last.
   The language control is inline segments, not a dropdown: the overlay is overflow:hidden, so a
   popover would clip. All three codes are shown at once, which reads faster on touch anyway. */
.menu-foot{position:relative;z-index:3;display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(22px);
  transition:transform .64s cubic-bezier(.16,1,.3,1),opacity .5s ease;}
.menu-utils{display:flex;gap:12px;height:54px;}
/* toggle keeps its bordered icon-pill form; sized to the utility row */
.menu-utils .toggle{width:54px;height:100%;flex-shrink:0;}
.menu-foot .btn-primary{width:100%;justify-content:center;padding:14px 22px;}
.lang-seg{flex:1;display:flex;gap:4px;padding:4px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface-2);}
.lang-seg-opt{flex:1;border:none;background:transparent;border-radius:5px;cursor:pointer;
  font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--text-subtle);
  transition:color var(--ease-fast),background var(--ease-fast),box-shadow var(--ease-fast);}
.lang-seg-opt:hover{color:var(--text);}
.lang-seg-opt[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.menu-overlay.open .menu-foot{opacity:1;transform:translateY(0);transition-delay:calc(.34s + var(--i) * .07s);}

/* centered brand: the logo takes the focal top spot while the menu is open (the header
   lockup steps aside for it). Bigger lockup, rises in with the sheet. */
.menu-brand{position:absolute;top:clamp(60px,9vh,80px);left:0;right:0;z-index:3;
  width:max-content;margin-inline:auto;border-radius:var(--radius-sm);
  display:flex;align-items:center;gap:13px;pointer-events:none;
  opacity:0;transform:translateY(-9px);
  /* fast fade on close so it clears before the sheet finishes retreating (no lingering artifact) */
  transition:opacity .16s ease,transform .16s ease;}
.menu-brand .mark{height:40px;}
.menu-brand .word{font-family:var(--font-display);font-size:24px;letter-spacing:.14em;color:var(--ink);}
.menu-overlay.open .menu-brand{opacity:1;transform:translateY(0);pointer-events:auto;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:.3s;}
/* the header lockup yields to the centered one while the menu is open */
body.menu-open header.nav .lockup{opacity:0;pointer-events:none;}
@media(max-width:560px){
  .menu-brand .mark{height:34px;}
  .menu-brand .word{font-size:21px;}
}
@media(min-width:861px){.menu-overlay{display:none;}}

/* ============ CTA (contained LIGHT panel, floats on porcelain) ============ */
/* The CTA is its own object: a raised light panel on the page background, distinct from the
   dark footer below it (the footer, not the CTA, carries the weight). No enclosing border and
   no decorative glow: containment comes from the lighter surface tone + a soft neutral shadow.
   Tone alone separates it from the dark footer, so no seam/hairline is needed anywhere.
   The bottom padding is porcelain room for the gem crest's top half (a peak ~1/3 of the
   viewport width tall) that rises out of the footer below into this space; it tracks vw so
   the peak always clears the panel. */
.cta-band{background:var(--bg);padding:clamp(40px,6.5vh,68px) 0 max(148px,calc(35vw + 34px));scroll-margin-top:76px;}
.cta-panel{position:relative;background:var(--surface);color:var(--ink);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:clamp(40px,9vw,76px) clamp(24px,7vw,64px);text-align:center;}
.cta-panel h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-statement);line-height:1.15;
  letter-spacing:-0.03em;max-width:20ch;margin:0 auto;text-wrap:balance;}
.cta-panel p{margin:18px auto 0;font-size:var(--text-lg);color:var(--text-muted);max-width:44ch;}
.cta-actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* Tablet + desktop (>=768px): the centred stack leaves the wide panel looking empty, so it
   becomes an asymmetric CTA band. A dominant Michroma statement with its lead line group on
   the left carry the weight; the actions become a defined stack anchored on the right, both
   vertically centred. Mobile (<768px) keeps the centred stack untouched. */
@media(min-width:768px){
  .cta-panel{
    display:grid;
    grid-template-columns:1fr minmax(200px,244px);
    grid-template-rows:auto auto;
    column-gap:clamp(40px,5vw,80px);
    align-items:center;
    text-align:left;
    padding:clamp(52px,6vw,84px) clamp(44px,5vw,68px);
  }
  .cta-panel h2{
    grid-column:1;grid-row:1;margin:0;max-width:15ch;
    font-size:clamp(2.1rem,3.9vw,3.05rem);letter-spacing:-0.035em;
  }
  .cta-panel p{
    grid-column:1;grid-row:2;align-self:start;
    margin:18px 0 0;max-width:54ch;
  }
  .cta-actions{
    grid-column:2;grid-row:1 / span 2;align-self:center;
    margin:0;flex-direction:column;align-items:stretch;gap:12px;
  }
  .cta-actions .btn{width:100%;justify-content:center;}
}

/* ============ FOOTER (dark, compact, borderless) ============ */
/* The footer is the dark anchor that grounds the page. It is full-bleed --invert-bg with NO
   top rule: the tone change from the porcelain CTA above is the divider, so there is no
   hairline seam. Structure is carried by spacing and mono metadata, not borders. A tight
   2-column link grid keeps the whole footer short on mobile rather than one long stack. */
footer.ft{position:relative;background:var(--footer-bg);color:var(--invert-muted);}
/* Light separates the footer from the page by tone alone (charcoal on porcelain). In dark both
   are near-black, so tone can't carry the seam; a defined top border draws the floor's edge the
   way the design system uses borders for depth in dark mode. */
html[data-theme="dark"] footer.ft{border-top:1px solid var(--border-strong);}

/* ---- crest: real logo rotated 90deg, filling the width, astride the footer's top edge ---- */
/* The gem fills the full screen width at its true 1.5:1 proportions (never stretched), pinned
   so its centre sits on the footer's top edge: the top half rises out of the dark cover into
   the porcelain above. The gem is painted in the footer's own colour, so that top half reads
   as the footer peaking upward, and its transparent facet cuts reveal the porcelain through
   it. MALDEKA sits in the clear centre, sized to fall inside the inner facet diamond.
   pointer-events:none so the transparent lower half of the crest box can never block the
   footer links beneath it. */
.ft-crest{position:absolute;top:0;left:0;right:0;height:0;z-index:2;pointer-events:none;}
.ft-gem{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:100%;height:auto;display:block;}
.ft-crest-word{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:400;color:var(--invert-text);
  font-size:clamp(16px,5vw,24px);letter-spacing:.09em;text-indent:.09em;
  line-height:1;white-space:nowrap;}
/* footer logo mark: mobile uses the wide straddling half-gem above, so hide this until >=768px */
.ft-logo{display:none;}
.ft-logo .poly{fill:var(--accent);}

/* Top padding clears the crest's lower half. The inner-diamond point dips deepest at the
   CENTRE (~19% of the width below the edge), but the two link columns sit at the far left/right
   where the facet arms are shallow, so they can ride higher toward the top without touching the
   gem. This value keeps the columns clear of the arms at every width (verified 390/768/1280). */
.ft-top{padding-block:max(64px,calc(10vw + 24px)) clamp(30px,4vh,42px);}

/* Services anchors the left, Company the right (right-aligned): the two groups flank the
   centred crest instead of clustering on one side. */
.ft-nav{display:flex;justify-content:space-between;gap:24px;}
.ft-col{display:flex;flex-direction:column;gap:11px;}
.ft-col-end{align-items:flex-end;text-align:right;}
.ft-h{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--invert-muted);}
.ft-col a{font-size:var(--text-sm);color:var(--invert-muted);width:fit-content;transition:color .2s ease;}
.ft-col a:hover{color:var(--invert-text);}

/* copyright row: separated by space, not a rule (no seam) */
.ft-bottom{padding-block:0 clamp(28px,5vh,40px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--invert-muted);}
.ft-top-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;
  color:var(--invert-muted);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.02em;cursor:pointer;padding:6px 2px;transition:color .2s ease;}
.ft-top-btn:hover{color:var(--invert-text);}
.ft-top-btn svg{width:13px;height:13px;transition:transform .25s var(--ease-base);}
.ft-top-btn:hover svg{transform:translateY(-3px);}
/* the theme control clusters with Back to top on the right. Footer-native: no bordered pill (that
   would read as pasted onto the dark floor), just mono icon + current-mode label like its sibling. */
.ft-utils{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);}
/* on mobile the theme toggle lives in the nav menu, so this desktop-footer control stays hidden
   until the header drops its own menu (>=861px), keeping exactly one theme control per breakpoint */
.ft-theme{display:none;}
.ft-theme .moon{display:none;} html[data-theme="dark"] .ft-theme .sun{display:none;}
html[data-theme="dark"] .ft-theme .moon{display:inline;}
.ft-theme .lbl-dark{display:none;} html[data-theme="dark"] .ft-theme .lbl-light{display:none;}
html[data-theme="dark"] .ft-theme .lbl-dark{display:inline;}
@media(min-width:861px){
  .ft-theme{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;
    color:var(--invert-muted);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
    letter-spacing:.02em;cursor:pointer;padding:6px 2px;transition:color .2s ease;}
  .ft-theme:hover{color:var(--invert-text);}
  .ft-theme svg{width:14px;height:14px;}
}

/* ---- Desktop / tablet footer (>=768px): a large cobalt logo mark, centred ---- */
/* Mobile keeps the wide half-gem straddling the top edge. On wider screens the footer shows a
   large cobalt version of the real logo mark (the masked cut-gem, same as the header) centred
   with MALDEKA below it, the two link columns flanking it and the copyright bar pinned beneath. */
@media(min-width:768px){
  /* the mobile crest rose out of the footer, so the CTA reserved a tall porcelain peak below
     itself; the logo lives inside the footer, so drop that to a normal section gap */
  .cta-band{padding-bottom:clamp(72px,8vh,104px);}
  .ft-gem{display:none;}
  footer.ft{min-height:clamp(300px,30vw,360px);}
  /* the crest box fills the footer and centres the logo lockup (mark + MALDEKA) in it */
  .ft-crest{inset:0;height:auto;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:clamp(16px,1.6vw,22px);}
  .ft-logo{display:block;height:clamp(140px,15.5vw,196px);width:auto;}
  .ft-crest-word{position:static;transform:none;color:var(--invert-text);
    font-size:clamp(16px,1.7vw,20px);letter-spacing:.16em;text-indent:.16em;}
  /* nav pins to the top, copyright to the bottom, both flanking the centred logo */
  .ft-top{padding-block:clamp(40px,4vw,56px) 0;position:relative;z-index:2;}
  .ft-bottom{position:absolute;left:0;right:0;bottom:0;padding-block:0 clamp(28px,4vh,40px);z-index:2;}
}


/* ---- scroll reveal: default visible; JS only hides briefly before animating in ---- */
.reveal-io{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);}
.reveal-io.pre{opacity:0;transform:translateY(22px);}

/* ============ MOTION ============ */
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.reveal-line>span{animation:rise var(--ease-reveal) both;}
.reveal-line:nth-child(1)>span{animation-delay:.05s;}
.reveal-line:nth-child(2)>span{animation-delay:.16s;}
.anim-fade{animation:fade .7s var(--ease-base) both;}
.d1{animation-delay:.30s;} .d2{animation-delay:.40s;} .d3{animation-delay:.50s;}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal-line>span{transform:none;}
  html{scroll-behavior:auto;}
}

/* ============ RESPONSIVE (shared chrome) ============ */
@media(max-width:560px){
  .wrap{padding-inline:18px;}
  .nav-in{height:66px;}
  .lockup .word{font-size:15px;letter-spacing:.12em;}
  .mark{height:22px;}
  .cta-panel p{font-size:var(--text-base);}
  .cta-actions .btn{width:100%;justify-content:center;}
}