/* ============================================================
   UNITYESS · Cinematic Luxury Energy Experience — LIGHT THEME
   Ornate Solar — warm white + sunset orange + ornate blue glass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,200;0,300;0,400;0,500;0,700;0,900;1,300&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* light base */
  --bg:     #f7f5f0;   /* warm white */
  --bg-2:   #eef0ee;   /* cool alt section */
  --bg-3:   #ffffff;   /* pure card base */
  --paper:  #f4f1ea;   /* light text used on dark/image zones */

  /* brand */
  --orange:     #f47920;
  --orange-2:   #ef6a13;
  --orange-deep:#d9560b;
  --blue:       #016297;
  --blue-glow:  #0a85c2;
  --gold:       #e0922e;

  /* text on light */
  --t-hi:   rgba(15,20,30,0.96);
  --t-mid:  rgba(15,20,30,0.62);
  --t-low:  rgba(15,20,30,0.44);
  --t-faint:rgba(15,20,30,0.12);

  /* glass (light) */
  --glass-grad: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42));
  --glass-soft: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.30));
  --glass-line: rgba(15,20,30,0.08);   /* outer hairline */
  --glass-line-2:rgba(15,20,30,0.16);
  --glass-hi:   rgba(255,255,255,0.95); /* inner top highlight */
  --glass-shadow:0 28px 64px -28px rgba(22,30,48,0.28);
  --glass-blur: blur(20px) saturate(170%);

  --serif: 'Chivo', system-ui, sans-serif;
  --sans:  'Chivo', system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: cubic-bezier(0.22, 1, 0.36, 1);

  --wrap: 1320px;
  --gut: clamp(1.25rem, 4vw, 4rem);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--sans);
  color:var(--t-hi);
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(40rem 40rem at 8% 10%,  rgba(244,121,32,0.14), transparent 60%),
    radial-gradient(46rem 46rem at 96% 16%, rgba(1,98,151,0.12),  transparent 60%),
    radial-gradient(48rem 48rem at 28% 64%, rgba(224,146,46,0.10), transparent 62%),
    radial-gradient(52rem 52rem at 88% 92%, rgba(1,98,151,0.10),  transparent 62%);
  background-attachment:fixed;
}
@media (max-width:900px){ body{cursor:auto} }

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}

/* ---------- Type scale ---------- */
.display{ font-weight:200; font-size:clamp(2.7rem,8.2vw,8rem); line-height:0.98; letter-spacing:-0.035em; }
.h1{ font-weight:200; font-size:clamp(2.2rem,5.5vw,4.6rem); line-height:1.02; letter-spacing:-0.03em; }
.h2{ font-weight:200; font-size:clamp(1.9rem,4.6vw,3.7rem); line-height:1.05; letter-spacing:-0.025em; }
.h3{ font-weight:300; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.1; letter-spacing:-0.02em; }
.lead{ font-weight:300; font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.55; color:var(--t-mid); }
.muted{color:var(--t-low)}
.thin{font-weight:200}

.eyebrow{ font-size:.74rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:var(--orange-2); display:inline-flex; align-items:center; gap:.8em; }
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:linear-gradient(90deg,var(--orange),transparent); }
.eyebrow.center::before{display:none}

.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto; }
.pad{ padding-block:clamp(5rem, 12vh, 11rem); }

.grad{
  background:linear-gradient(120deg,var(--orange) 0%, var(--gold) 48%, var(--blue) 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor,.cursor-ring{ position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform; }
.cursor{ width:6px;height:6px;background:var(--orange);
  box-shadow:0 0 12px rgba(244,121,32,.8); }
.cursor-ring{ width:38px;height:38px;border:1px solid rgba(22,30,48,0.30);
  transition:width .4s var(--ease),height .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease); }
.cursor-ring.hot{ width:66px;height:66px;background:rgba(244,121,32,.10);border-color:var(--orange); }
@media (max-width:900px){ .cursor,.cursor-ring{display:none} }

/* ============================================================
   PRELOADER (light)
   ============================================================ */
.loader{ position:fixed;inset:0;z-index:9000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem; }
.loader-num{ font-weight:200;font-size:clamp(4rem,18vw,15rem);letter-spacing:-.04em;line-height:1;color:var(--t-hi); }
.loader-num small{ color:var(--orange); }
.loader-bar{ width:min(280px,60vw);height:1px;background:var(--t-faint);overflow:hidden;position:relative; }
.loader-bar i{ position:absolute;inset:0;background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);transform-origin:left; }
.loader-tag{ font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--t-low); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem var(--gut);
  transition:transform .6s var(--ease),background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
/* legibility scrim over the hero image; fades once nav goes glassy */
.nav::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,11,20,0.55) 0%, rgba(8,11,20,0.18) 55%, transparent 100%);
  transition:opacity .5s var(--ease); }
.nav.glassed::before{ opacity:0; }
.nav:not(.glassed) .brand,
.nav:not(.glassed) .nav-links a:not(.btn){ text-shadow:0 1px 14px rgba(0,0,0,0.28); }
/* glassed = scrolled onto the white body */
.nav.glassed{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--glass-line);
  box-shadow:0 12px 40px -24px rgba(22,30,48,0.30);
  padding-block:1rem;
}
.nav.hide{ transform:translateY(-115%); }

.brand{ display:flex;align-items:center;gap:.6rem;font-weight:300;letter-spacing:.12em;font-size:1.05rem;
  color:#fff;transition:color .5s var(--ease); }
.brand b{ font-weight:700;color:var(--orange); }
.brand .mark{ width:26px;height:26px; }
.nav.glassed .brand{ color:var(--t-hi); }

.nav-links{ display:flex;align-items:center;gap:2.2rem; }
.nav-links a:not(.btn){ font-size:.82rem;letter-spacing:.08em;color:rgba(255,255,255,0.94);position:relative;
  transition:color .4s var(--ease); }
.nav.glassed .nav-links a:not(.btn){ color:var(--t-mid); }
.nav-links a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--orange);transition:width .4s var(--ease); }
.nav-links a:not(.btn):hover{ color:#fff; }
.nav.glassed .nav-links a:not(.btn):hover{ color:var(--t-hi); }
.nav-links a:not(.btn):hover::after{ width:100%; }

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.82rem;letter-spacing:.06em;font-weight:500;
  padding:.78em 1.5em;border-radius:100px;
  background:linear-gradient(120deg,var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;border:1px solid rgba(255,255,255,.2);
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 10px 30px -12px rgba(244,121,32,.55);
}
.btn::after{ content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--orange),var(--gold));
  opacity:0;transition:opacity .5s var(--ease); }
.btn span,.btn svg{position:relative;z-index:1}
.btn:hover{ transform:translateY(-2px);box-shadow:0 16px 44px -12px rgba(244,121,32,.7); }
.btn:hover::after{opacity:1}
.btn.ghost{ background:var(--glass-soft);border:1px solid var(--glass-line-2);color:var(--t-hi);
  box-shadow:none;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur); }
.btn.ghost::after{background:rgba(255,255,255,0.5)}
.btn.ghost:hover{box-shadow:0 14px 36px -20px rgba(22,30,48,.4);border-color:var(--glass-line-2)}
/* ghost button over the hero image reads light */
.hero .btn.ghost{ color:#fff;background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.4); }
.hero .btn.ghost::after{ background:rgba(255,255,255,0.22); }

@media (max-width:760px){ .hide-sm{display:none} .nav-links{gap:1rem} }

/* ============================================================
   HERO (image zone — light text)
   ============================================================ */
.hero{ position:relative;height:100svh;min-height:640px;overflow:hidden;
  display:flex;align-items:flex-end;color:var(--paper); }
.hero-media{ position:absolute;inset:-12% 0;z-index:0;will-change:transform; }
.hero-media img,.hero-media video{ width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04); }
.hero-scrim{ position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(8,11,20,.55) 0%, rgba(8,11,20,.12) 26%, rgba(8,11,20,.35) 66%, rgba(8,11,20,.82) 100%),
    radial-gradient(80% 70% at 70% 30%, rgba(244,121,32,.12), transparent 60%);
}
.hero-inner{ position:relative;z-index:2;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  padding-bottom:clamp(4rem,12vh,8rem); }
.hero-sub{ font-weight:300;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.55;
  color:rgba(244,241,234,0.84);max-width:46ch;margin-top:1.6rem; }
.hero-cta{ display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.3rem; }

.scroll-cue{ position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(244,241,234,0.6); }
.scroll-cue .bar{ width:1px;height:48px;background:linear-gradient(var(--orange),transparent);position:relative;overflow:hidden; }
.scroll-cue .bar::after{ content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:#fff;animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{top:-50%}60%,100%{top:100%} }

.line-mask{ display:block;overflow:hidden; }
.line-mask>span{ display:block;will-change:transform; }

/* ============================================================
   STATS STRIP (frosted white card)
   ============================================================ */
.stats{ position:relative;z-index:5; }
.stats-inner{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--glass-grad);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-radius:20px;overflow:hidden;
  margin-top:clamp(-4rem,-6vh,-2.5rem);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.stat{ padding:clamp(1.6rem,3vw,2.6rem);border-right:1px solid var(--glass-line);
  display:flex;flex-direction:column;gap:.5rem; }
.stat:last-child{border-right:0}
.stat .num{ font-weight:200;font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.03em;line-height:1;color:var(--t-hi); }
.stat .num b{color:var(--orange-2);font-weight:200}
.stat .lbl{ font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low); }
@media (max-width:760px){ .stats-inner{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--glass-line)} }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head{ max-width:54rem; }
.sec-head .h2{ margin-top:1.1rem; }
.center-head{ text-align:center;max-width:50rem;margin-inline:auto; }

/* ============================================================
   IMAGE EXPAND (pinned)
   ============================================================ */
/* STORY — text-first + HORIZONTAL PARALLAX gallery (light) */
.hgal-sec{ position:relative;padding-top:clamp(5rem,12vh,11rem);padding-bottom:clamp(5rem,12vh,9rem); }
.hgal-head{ max-width:54rem;margin-bottom:clamp(2.5rem,6vw,4rem); }
.hint{ display:inline-flex;align-items:center;gap:.7em;margin-top:1.8rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t-low); }
.hint svg{ color:var(--orange-2); }

.hgal{ position:relative;overflow:hidden; }
.hgal-track{ display:flex;gap:clamp(1rem,2vw,1.7rem);padding-inline:var(--gut);
  align-items:center;width:max-content;will-change:transform; }
.hg{ position:relative;flex:0 0 auto;width:clamp(270px,32vw,430px); }
.hg-media{ position:relative;height:48vh;border-radius:16px;overflow:hidden;
  border:1px solid var(--glass-line);box-shadow:0 34px 70px -42px rgba(22,30,48,.45); }
.hg.tall .hg-media{ height:64vh; }
.hg-media::after{ content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,20,30,.5)); }
.hg-media img{ position:absolute;top:0;left:-15%;max-width:none;
  width:130%;height:100%;object-fit:cover;will-change:transform; }
.hg figcaption{ position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-size:.74rem;letter-spacing:.04em;color:#fff;font-weight:300;
  padding:.5em 1em;border-radius:100px;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%); }
@media (max-width:760px){
  .hgal{ overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory; }
  .hgal-track{ width:max-content; }
  .hg{ width:78vw;scroll-snap-align:center; }
  .hg-media,.hg.tall .hg-media{ height:60vh; }
  .hg-media img{ width:100%;left:0; }
}

/* ============================================================
   PRODUCTS (glass cards)
   ============================================================ */
.prod-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,5vw,4rem); }
.prod-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem; }
@media (max-width:900px){ .prod-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto} }

.card{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--glass-grad);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition:transform .7s var(--ease),border-color .7s var(--ease),box-shadow .7s var(--ease);
  will-change:transform;
}
.card:hover{ transform:translateY(-8px);border-color:var(--glass-line-2);
  box-shadow:0 50px 90px -42px rgba(22,30,48,.45), inset 0 1px 0 var(--glass-hi); }
.card .media{ aspect-ratio:4/3.4;overflow:hidden;position:relative; }
.card .media::after{ content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.35)); }
.card .media img{ width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--slow);
  transform:scale(1.04);will-change:transform; }
.card:hover .media img{ transform:scale(1.12); }
.card .body{ padding:1.6rem 1.7rem 1.9rem; }
.card .tag{ font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-2);font-weight:600; }
.card .name{ font-weight:400;font-size:1.5rem;letter-spacing:-.02em;margin-top:.6rem;color:var(--t-hi); }
.card .cap{ color:var(--t-mid);font-size:.92rem;margin-top:.5rem;font-weight:300; }
.card .go{ display:inline-flex;align-items:center;gap:.6em;margin-top:1.3rem;
  font-size:.8rem;letter-spacing:.08em;color:var(--t-hi); }
.card .go svg{ transition:transform .5s var(--ease); }
.card:hover .go svg{ transform:translateX(6px); }

/* ============================================================
   FEATURE / TECHNOLOGY rows
   ============================================================ */
.feat{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;
  padding-block:clamp(3rem,7vh,6rem); }
.feat:nth-child(even) .feat-media{ order:-1; }
@media (max-width:860px){ .feat{grid-template-columns:1fr;gap:2rem}
  .feat:nth-child(even) .feat-media{order:0} }
.feat-media{ position:relative;border-radius:16px;overflow:hidden;aspect-ratio:5/4;
  box-shadow:0 40px 90px -50px rgba(22,30,48,.5);border:1px solid var(--glass-line); }
.feat-media img{ width:100%;height:120%;object-fit:cover;will-change:transform; }
.num-mark{ font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--orange-2);font-weight:600;
  display:flex;align-items:center;gap:.8em; }

.chips{ display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem; }
.chip{ font-size:.78rem;letter-spacing:.04em;color:var(--t-mid);
  padding:.5em 1em;border-radius:100px;background:var(--glass-soft);border:1px solid var(--glass-line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 var(--glass-hi); }

/* ============================================================
   MANUFACTURING BANNER (image zone — light text)
   ============================================================ */
.banner{ position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;color:var(--paper); }
.banner-media{ position:absolute;inset:-12% 0;z-index:0; }
.banner-media img{ width:100%;height:100%;object-fit:cover;will-change:transform; }
.banner-scrim{ position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg, rgba(6,10,18,.9) 0%, rgba(6,10,18,.5) 55%, rgba(1,40,70,.4) 100%); }
.banner-inner{ position:relative;z-index:2;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto; }
.banner .hero-sub{ color:rgba(244,241,234,0.82); }
.big-num{ font-weight:200;font-size:clamp(4rem,13vw,11rem);line-height:.9;letter-spacing:-.04em;color:#fff; }
.big-num b{ color:var(--orange);font-weight:200; }

/* ============================================================
   HORIZONTAL SCROLL (applications — image cards)
   ============================================================ */
.hsec{ position:relative;overflow:hidden; }
.htrack{ display:flex;gap:1.4rem;will-change:transform;padding-inline:var(--gut); }
.hcard{ position:relative;flex:0 0 clamp(280px,38vw,440px);height:62vh;border-radius:18px;overflow:hidden;
  border:1px solid var(--glass-line);color:var(--paper);
  box-shadow:0 40px 90px -50px rgba(22,30,48,.5); }
.hcard .hbg{ position:absolute;inset:0; }
.hcard .hbg img{ width:100%;height:100%;object-fit:cover;transition:transform 1s var(--slow); }
.hcard:hover .hbg img{transform:scale(1.06)}
.hcard::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.15),rgba(6,10,18,.9)); }
.hcard-body{ position:absolute;inset:auto 0 0 0;z-index:2;padding:2rem; }
.hcard .idx{ font-size:.72rem;letter-spacing:.2em;color:var(--orange);font-weight:600; }
.hcard h4{ font-weight:400;font-size:1.5rem;letter-spacing:-.02em;margin-top:.6rem; }
.hcard p{ color:rgba(244,241,234,0.82);font-size:.92rem;margin-top:.6rem;font-weight:300;max-width:34ch; }

/* ============================================================
   GLASS PANEL (compare) — with its own colour pool behind
   ============================================================ */
#compare{ position:relative; }
#compare::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(30rem 30rem at 18% 30%, rgba(244,121,32,0.20), transparent 60%),
    radial-gradient(34rem 34rem at 86% 70%, rgba(1,98,151,0.18), transparent 60%); }
#compare .wrap{ position:relative;z-index:1; }
.glass-panel{
  background:var(--glass-grad);border:1px solid var(--glass-line);border-radius:22px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:clamp(1.6rem,3vw,3rem);overflow:hidden;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
table.spec{ width:100%;border-collapse:collapse;font-weight:300; }
table.spec th,table.spec td{ text-align:left;padding:1.05rem 1.1rem;border-bottom:1px solid var(--glass-line);font-size:.92rem; }
table.spec thead th{ font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2);font-weight:600; }
table.spec tbody th{ color:var(--t-mid);font-weight:400;width:24%; }
table.spec td{ color:var(--t-hi); }
table.spec tr:last-child td,table.spec tr:last-child th{border-bottom:0}
.backlink{ color:var(--orange-2);font-size:.86rem; }
@media (max-width:700px){ table.spec{font-size:.8rem;min-width:560px} .glass-panel{overflow-x:auto} }

/* ============================================================
   CTA
   ============================================================ */
.cta{ text-align:center; }
.cta .h2{ max-width:20ch;margin-inline:auto; }
.cta .lead{ max-width:46ch;margin:1.4rem auto 2.2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--glass-line);padding-block:clamp(3.5rem,7vh,6rem);background:var(--bg-2); }
.foot-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:2.4rem; }
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.footer .brand{ color:var(--t-hi); }
.foot-brand p{ color:var(--t-low);font-size:.9rem;font-weight:300;max-width:34ch;margin-top:1rem; }
.footer h5{ font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mid);margin-bottom:1rem;font-weight:600; }
.footer ul{ list-style:none;display:flex;flex-direction:column;gap:.7rem; }
.footer li,.footer li a{ color:var(--t-low);font-size:.9rem;font-weight:300;transition:color .4s; }
.footer li a:hover{ color:var(--orange-2); }
.foot-bottom{ display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--glass-line);
  font-size:.78rem;color:var(--t-low); }

/* alt section tint helper (Technology) */
.alt{ background:var(--bg-2); }

/* ============================================================
   PRODUCT PAGES (detail)
   ============================================================ */
.backlink{ display:inline-flex;align-items:center;gap:.5em;color:var(--orange-2);font-size:.86rem;
  letter-spacing:.02em;transition:gap .4s var(--ease); }
.backlink:hover{ gap:.9em; }
.hero .backlink{ color:#ffd2a6; text-shadow:0 1px 14px rgba(0,0,0,.3); }

.tick{ list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1.9rem; }
.tick li{ display:flex;align-items:flex-start;gap:.9rem;font-weight:300;color:var(--t-hi);
  font-size:1.02rem;line-height:1.4; }
.tick li svg{ flex:0 0 auto;margin-top:.18rem;color:var(--orange); }

.feat.media-left .feat-media{ order:-1; }
@media (max-width:860px){ .feat.media-left .feat-media{ order:0; } }

.spectable{ width:100%;border-collapse:collapse;font-weight:300; }
.spectable th,.spectable td{ text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--glass-line);
  font-size:.92rem;vertical-align:top; }
.spectable th{ color:var(--t-mid);font-weight:400;width:34%; }
.spectable td{ color:var(--t-hi); }
.spectable tr:last-child th,.spectable tr:last-child td{ border-bottom:0; }
@media (max-width:600px){ .spectable th{width:42%} .spectable th,.spectable td{font-size:.84rem;padding:.8rem .7rem} }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero .hero-img{ width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04); }

/* --- Image expansion (pinned frame grows to fullscreen) --- */
.expand-sec{ position:relative;height:100vh; }
.expand-pin{ position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.expand-frame{ position:relative;width:min(560px,86vw);height:60vh;border-radius:20px;overflow:hidden;
  border:1px solid var(--glass-line);box-shadow:0 50px 100px -46px rgba(22,30,48,.55);will-change:width,height,border-radius; }
.expand-frame img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);
  will-change:transform;filter:saturate(1.05) contrast(1.03); }
.expand-frame::after{ content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.28) 45%,rgba(6,10,18,.82) 100%); }
.expand-cap{ position:absolute;left:0;bottom:0;z-index:2;color:var(--paper);
  padding:clamp(1.6rem,4vw,3.4rem);opacity:0;will-change:opacity,transform; }
@media (max-width:760px){ .expand-frame{ width:88vw;height:56vh; } }

/* --- Contact shell (form + details) --- */
.contact-shell{ display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start; }
@media (max-width:960px){ .contact-shell{ grid-template-columns:1fr;gap:3rem; } }

/* --- Form --- */
.cform{ margin-top:2.4rem;display:flex;flex-direction:column;gap:1.9rem; }
.frow{ display:grid;grid-template-columns:1fr 1fr;gap:1.6rem; }
@media (max-width:540px){ .frow{ grid-template-columns:1fr;gap:1.9rem; } }

.fgroup{ position:relative; }
.finput{
  width:100%;font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--t-hi);
  background:transparent;border:0;border-bottom:1px solid var(--glass-line-2);
  padding:.85rem 0 .7rem;outline:none;transition:border-color .5s var(--ease);
}
.finput::placeholder{ color:transparent; }
.ftext{ resize:vertical;min-height:3.4rem;line-height:1.5; }
.fselect{ cursor:none;appearance:none;-webkit-appearance:none;color:var(--t-hi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f47920' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;padding-right:1.6rem; }
@media (max-width:900px){ .fselect{ cursor:pointer; } }

/* floating label */
.flabel{ position:absolute;left:0;top:.9rem;pointer-events:none;
  font-size:1rem;font-weight:300;color:var(--t-low);letter-spacing:.01em;
  transition:transform .45s var(--ease),color .45s var(--ease),font-size .45s var(--ease); }
.flabel em{ font-style:normal;color:var(--t-faint);font-size:.82em; }
.finput:focus + .flabel,
.finput:not(:placeholder-shown) + .flabel,
.fselect:valid + .flabel{
  transform:translateY(-1.55rem);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2);
}
/* animated underline that draws in on focus */
.fline{ position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--orange),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease); }
.finput:focus ~ .fline{ transform:scaleX(1); }
.fgroup.invalid .finput{ border-bottom-color:var(--orange-deep); }
.fgroup.invalid .flabel{ color:var(--orange-deep); }

.fsubmit{ align-self:flex-start;margin-top:.4rem;padding:.95em 2em;cursor:none; }
@media (max-width:900px){ .fsubmit{ cursor:pointer; } }
.fsubmit svg{ transition:transform .5s var(--ease); }
.fsubmit:hover svg{ transform:translateX(5px); }
.fsubmit[disabled]{ opacity:.6;pointer-events:none; }
.fnote{ min-height:1.1rem;font-size:.86rem;font-weight:300;color:var(--t-mid);letter-spacing:.01em; }
.fnote.ok{ color:var(--blue-glow); }
.fnote.err{ color:var(--orange-deep); }

/* --- Details aside --- */
.detail-card{ padding:clamp(1.4rem,2.4vw,2rem)!important; }
.dc-row{ display:flex;align-items:flex-start;gap:1.1rem;padding:.35rem 0;color:var(--t-hi);
  transition:transform .5s var(--ease); }
a.dc-row:hover{ transform:translateX(4px); }
.dc-ico{ flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:var(--orange-2);background:var(--glass-soft);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi);transition:color .5s var(--ease),border-color .5s var(--ease); }
a.dc-row:hover .dc-ico{ color:var(--orange);border-color:var(--glass-line-2); }
.dc-row h5{ font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-low);font-weight:600;margin-bottom:.35rem; }
.dc-row p{ font-size:.98rem;font-weight:300;color:var(--t-hi);line-height:1.45; }
.dc-div{ height:1px;background:var(--glass-line);margin:1rem 0; }

.assure{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem;text-align:center; }
.assure-item{ padding:1.2rem .6rem;border-radius:14px;background:var(--glass-soft);border:1px solid var(--glass-line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 var(--glass-hi); }
.assure-item b{ display:block;font-weight:200;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--t-hi);letter-spacing:-.02em; }
.assure-item span{ display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-low);margin-top:.4rem; }

/* ============================================================
   ANIM STATE
   ============================================================ */
.reveal,.fade{ will-change:transform,opacity; }
.divider{ height:1px;background:linear-gradient(90deg,transparent,var(--glass-line-2),transparent); }