/* =========================================================
   SANCAI LIGHTING — B2B foreign-trade site
   Light · Tech · Premium
   ========================================================= */

:root{
  --bg:        #080a10;
  --bg-2:      #0d1018;
  --bg-3:      #131826;
  --panel:     rgba(255,255,255,0.045);
  --panel-2:   rgba(255,255,255,0.08);
  --line:      rgba(255,255,255,0.11);
  --line-soft: rgba(255,255,255,0.06);
  --text:      #eef1f7;
  --muted:     #9aa3b2;
  --muted-2:   #626b7c;
  --accent:    #5b8cff;
  --accent-2:  #25e0d6;
  --accent-glow: rgba(91,140,255,0.45);
  --grad:      linear-gradient(120deg,#5b8cff,#25e0d6);
  --serif:     "Cormorant Garamond", Georgia, serif;
  --sans:      "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif;
  --mono:      "Space Grotesk", "Inter", monospace;
  --ease:      cubic-bezier(.16,1,.3,1);
  --radius:    16px;
  --shadow:    0 28px 70px -30px rgba(0,0,0,0.85);
  --shadow-sm: 0 14px 36px -20px rgba(0,0,0,0.7);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(91,140,255,0.12), transparent 55%),
    radial-gradient(90% 60% at 90% 110%, rgba(37,224,214,0.08), transparent 60%),
    var(--bg);
  color:var(--text); font-family:var(--sans);
  font-weight:400; line-height:1.65; overflow-x:hidden; cursor:none;
  position:relative;
}
main, .footer{ position:relative; z-index:2; }
@media (max-width:860px){ body{ cursor:auto; } .cursor{ display:none !important; } }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }

/* tech grid backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 85%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 85%);
}
.grain{ display:none; }
.vignette{ display:none; }

/* cursor */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; }
.cursor-dot{ position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); }
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(91,140,255,.6); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s;
}
.cursor.is-hover .cursor-ring{ width:62px; height:62px; background:rgba(91,140,255,.10); border-color:rgba(91,140,255,.95); }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:9500;
  background:var(--grad); box-shadow:0 0 12px var(--accent-glow);
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  transition:background .5s var(--ease), border-color .5s, backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(8,10,16,.62); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line-soft); }
.nav-inner{ max-width:1320px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  font-size:20px; font-weight:700; color:#fff; background:var(--grad);
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  box-shadow:0 6px 18px -6px var(--accent-glow); letter-spacing:-2px;
}
.brand-text{ font-family:var(--mono); font-weight:600; letter-spacing:.16em; font-size:14px; }
.brand-text em{ color:var(--accent); font-style:normal; margin-left:7px; font-weight:400; }
.brand-cn{ font-size:11px; color:var(--muted-2); letter-spacing:.3em; margin-top:1px; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:13px; letter-spacing:.04em; color:var(--muted); position:relative; padding:6px 0; transition:color .3s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--grad); transition:width .35s var(--ease); }
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ margin-left:8px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-burger span{ width:24px; height:2px; background:var(--text); transition:.3s; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:13px; letter-spacing:.04em; padding:13px 24px; border-radius:100px;
  position:relative; overflow:hidden; transition:transform .4s var(--ease), color .4s, border-color .4s, box-shadow .4s;
  white-space:nowrap;
}
.btn span{ transition:transform .4s var(--ease); }
.btn:hover span{ transform:translate(3px,-3px); }
.btn-solid{ background:var(--grad); color:#fff; font-weight:600; box-shadow:0 14px 30px -14px var(--accent-glow); }
.btn-solid::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,#2c3bb0,#0891b2); transform:translateX(-101%); transition:transform .5s var(--ease); z-index:0; }
.btn-solid:hover::before{ transform:translateX(0); }
.btn-solid span, .btn-solid{ position:relative; z-index:1; }
.btn-line{ border:1px solid var(--line); color:var(--text); }
.btn-line:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); padding:11px 20px; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ============ SECTION COMMON ============ */
.wrap{ max-width:1320px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }
.section{ padding:130px 0; position:relative; }
.section.alt{ background:var(--bg-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section-head{ max-width:720px; margin-bottom:64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; display:inline-block; }
.section-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,60px); line-height:1.05; letter-spacing:-.01em; }
.section-lead{ color:var(--muted); margin-top:20px; font-size:16px; max-width:580px; }
.section-head.center .section-lead{ margin-left:auto; margin-right:auto; }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:160px 0 80px; overflow:hidden; }
.hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-mesh span{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.7; }
.m1{ width:560px; height:560px; background:radial-gradient(circle, rgba(59,78,214,.42), transparent 70%); top:-12%; left:4%; animation:float1 16s ease-in-out infinite; }
.m2{ width:480px; height:480px; background:radial-gradient(circle, rgba(6,182,212,.34), transparent 70%); bottom:0%; right:2%; animation:float2 20s ease-in-out infinite; }
.m3{ width:380px; height:380px; background:radial-gradient(circle, rgba(99,102,241,.28), transparent 70%); top:38%; left:52%; animation:float1 24s ease-in-out infinite reverse; }
@keyframes float1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-30px) scale(1.08);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,30px) scale(1.05);} }

.hero-content{ position:relative; z-index:2; max-width:920px; }
.hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(46px,8vw,104px); line-height:1.02; letter-spacing:-.02em; margin-bottom:28px; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 em{ font-style:italic; background:var(--grad); background-size:220% 220%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 7s linear infinite; }
@keyframes shimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:220% 50%; } }
.hero-sub{ font-size:clamp(15px,1.4vw,19px); color:var(--muted); max-width:560px; margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-scroll{ position:absolute; bottom:36px; left:32px; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted-2); z-index:2; }
.scroll-line{ width:60px; height:1.5px; background:var(--line); position:relative; overflow:hidden; }
.scroll-line::after{ content:""; position:absolute; inset:0; width:30%; background:var(--accent); animation:scrollSlide 2.4s var(--ease) infinite; }
@keyframes scrollSlide{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(330%);} }
.hero-meta{ position:absolute; bottom:36px; right:32px; display:flex; gap:42px; z-index:2; text-align:right; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{ font-family:var(--serif); font-size:30px; color:var(--text); }
.hero-meta span{ font-size:11px; letter-spacing:.12em; color:var(--muted-2); text-transform:uppercase; }

/* ============ MARQUEE ============ */
.marquee{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; padding:20px 0; background:var(--bg-2); }
.marquee-track{ display:flex; gap:28px; white-space:nowrap; width:max-content; animation:marquee 30s linear infinite; }
.marquee-track span{ font-family:var(--mono); font-size:18px; letter-spacing:.12em; color:var(--muted-2); text-transform:uppercase; }
.marquee-track span:nth-child(odd){ color:var(--accent); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ PAGE HERO (inner) ============ */
.page-hero{ padding:170px 0 70px; position:relative; overflow:hidden; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,6vw,76px); line-height:1.04; letter-spacing:-.01em; max-width:880px; }
.page-hero p{ color:var(--muted); margin-top:22px; font-size:17px; max-width:620px; }
.breadcrumb{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted-2); margin-bottom:26px; }
.breadcrumb a:hover{ color:var(--accent); }

/* ============ COLLECTIONS / CARDS ============ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{
  position:relative; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:32px 26px 28px; min-height:300px; overflow:hidden; display:flex; flex-direction:column;
  transform-style:preserve-3d; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease); will-change:transform;
}
.card:hover{ border-color:var(--line); box-shadow:var(--shadow); }
.card-glow{ position:absolute; inset:0; opacity:0; transition:opacity .5s; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(59,78,214,.10), transparent 60%); }
.card:hover .card-glow{ opacity:1; }
.card-num{ font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.1em; margin-bottom:auto; }
.card h3{ font-family:var(--serif); font-size:28px; font-weight:600; margin:28px 0 12px; }
.card p{ color:var(--muted); font-size:14px; }
.card-tag{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted-2); border-top:1px solid var(--line-soft); padding-top:14px; }

/* ============ CAPABILITIES ============ */
.cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cap{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:38px 30px; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.cap:hover{ border-color:var(--line); box-shadow:var(--shadow-sm); transform:translateY(-4px); }
.cap-ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:rgba(59,78,214,.10); color:var(--accent); font-size:20px; margin-bottom:20px; }
.cap h4{ font-size:18px; font-weight:600; margin-bottom:10px; }
.cap p{ color:var(--muted); font-size:14px; }

/* ============ PROCESS / TIMELINE ============ */
.timeline{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.timeline li{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:34px 30px; position:relative; transition:border-color .4s, box-shadow .4s; }
.timeline li:hover{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.t-step{ font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.1em; }
.timeline h4{ font-family:var(--serif); font-size:26px; font-weight:600; margin:12px 0 10px; }
.timeline p{ color:var(--muted); font-size:14px; }

/* ============ STATS ============ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:40px 30px; text-align:center; }
.stat strong{ font-family:var(--serif); font-size:clamp(40px,5vw,58px); font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; line-height:1; }
.stat span{ font-size:13px; color:var(--muted); letter-spacing:.04em; }

/* ============ CTA BANNER ============ */
.cta{ background:var(--grad); border-radius:24px; padding:64px 56px; color:#fff; position:relative; overflow:hidden; }
.cta::after{ content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(20px); }
.cta h2{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,48px); line-height:1.08; max-width:620px; position:relative; z-index:2; }
.cta p{ color:rgba(255,255,255,.85); margin:16px 0 28px; max-width:520px; position:relative; z-index:2; }
.cta .btn-line{ border-color:rgba(255,255,255,.5); color:#fff; }
.cta .btn-line:hover{ background:#fff; color:var(--accent); border-color:#fff; }

/* ============ FOOTER (dark anchor) ============ */
.footer{ background:#0c1322; color:#c7cedb; margin-top:0; }
.footer-inner{ max-width:1320px; margin:0 auto; padding:70px 32px 40px; display:grid; grid-template-columns:1.2fr 1.6fr; gap:50px; }
.footer-brand .brand-mark{ margin-bottom:16px; }
.footer-brand .brand-text{ font-size:15px; color:#fff; display:inline-block; }
.footer-brand p{ color:#8b94a3; font-size:13px; margin-top:14px; max-width:300px; }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.footer-cols h5{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b7585; margin-bottom:16px; }
.footer-cols a{ display:block; color:#aab2c0; font-size:14px; padding:5px 0; transition:color .3s; }
.footer-cols a:hover{ color:#fff; }
.footer-bottom{ max-width:1320px; margin:0 auto; padding:22px 32px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; font-size:12px; color:#6b7585; letter-spacing:.04em; }

/* ============ PRODUCTS PAGE ============ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
.filter{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:10px 18px; border-radius:100px; border:1px solid var(--line); color:var(--muted); background:var(--bg-2); cursor:none; transition:.3s; }
.filter:hover{ border-color:var(--accent); color:var(--accent); }
.filter.active{ background:var(--grad); color:#fff; border-color:transparent; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.product:hover{ border-color:var(--line); box-shadow:var(--shadow); transform:translateY(-5px); }
.product-vis{ height:220px; display:grid; place-items:center; background:linear-gradient(160deg,#131826,#0d1018); position:relative; overflow:hidden; }
.product-vis svg{ width:120px; height:120px; stroke:var(--accent); filter:drop-shadow(0 0 14px var(--accent-glow)); }
.product-vis .badge{ position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:5px 10px; border-radius:100px; background:rgba(255,255,255,.8); color:var(--accent); backdrop-filter:blur(6px); }
.product-body{ padding:22px 22px 24px; }
.product-body h3{ font-family:var(--serif); font-size:23px; font-weight:600; }
.product-body .meta{ font-family:var(--mono); font-size:12px; color:var(--muted-2); margin:6px 0 12px; letter-spacing:.04em; }
.product-body p{ color:var(--muted); font-size:13.5px; }
.product-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:12px; color:var(--accent); }

/* ============ PROJECTS PAGE ============ */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proj{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.proj:hover{ border-color:var(--line); box-shadow:var(--shadow); transform:translateY(-5px); }
.proj-vis{ height:200px; position:relative; display:grid; place-items:center; }
.proj-vis .num{ font-family:var(--serif); font-size:54px; font-weight:600; color:rgba(255,255,255,.85); }
.proj-body{ padding:24px 24px 26px; }
.proj-body .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.proj-body h3{ font-family:var(--serif); font-size:25px; font-weight:600; margin:8px 0 10px; }
.proj-body p{ color:var(--muted); font-size:14px; }

/* ============ ABOUT PAGE ============ */
.milestones{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ms{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 26px; }
.ms .yr{ font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.06em; }
.ms h4{ font-family:var(--serif); font-size:22px; font-weight:600; margin:8px 0 8px; }
.ms p{ color:var(--muted); font-size:13.5px; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:34px 30px; }
.value .v-ico{ font-size:22px; color:var(--accent); margin-bottom:16px; }
.value h4{ font-size:18px; font-weight:600; margin-bottom:10px; }
.value p{ color:var(--muted); font-size:14px; }
.certs{ display:flex; flex-wrap:wrap; gap:14px; }
.cert{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; padding:12px 20px; border-radius:100px; border:1px solid var(--line); background:var(--bg-2); color:var(--text); }
.cert b{ color:var(--accent); }

/* ============ CONTACT PAGE ============ */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:start; }
.order-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:34px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.field input, .field select, .field textarea{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:var(--text); font-family:var(--sans); font-size:14px; transition:border-color .3s, background .3s; resize:none; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:#11151f; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6472' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.btn-submit{ grid-column:1 / -1; justify-content:center; margin-top:4px; }
.form-note{ grid-column:1/-1; font-size:13px; color:var(--accent); min-height:18px; text-align:center; }
.contact-cards{ display:flex; flex-direction:column; gap:16px; }
.cc{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 26px; transition:border-color .3s, box-shadow .3s; }
.cc:hover{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.cc .cc-ico{ font-size:18px; color:var(--accent); }
.cc h4{ font-size:15px; font-weight:600; margin:10px 0 6px; }
.cc p, .cc a{ color:var(--muted); font-size:14px; }
.cc a:hover{ color:var(--accent); }

/* ============ MOBILE MENU ============ */
.mobile-menu{ position:fixed; inset:0; z-index:7900; background:rgba(245,247,250,.98); backdrop-filter:blur(20px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family:var(--serif); font-size:34px; color:var(--text); }
.mobile-menu .btn{ font-family:var(--mono); font-size:14px; margin-top:8px; }

/* ============ REVEAL ============ */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].in[data-delay="80"]{ transition-delay:80ms; }
[data-reveal].in[data-delay="160"]{ transition-delay:160ms; }
[data-reveal].in[data-delay="220"]{ transition-delay:220ms; }
[data-reveal].in[data-delay="240"]{ transition-delay:240ms; }
[data-reveal].in[data-delay="300"]{ transition-delay:300ms; }
[data-reveal].in[data-delay="320"]{ transition-delay:320ms; }
[data-reveal].in[data-delay="380"]{ transition-delay:380ms; }
[data-reveal].in[data-delay="400"]{ transition-delay:400ms; }
[data-reveal].in[data-delay="480"]{ transition-delay:480ms; }
[data-reveal].in[data-delay="520"]{ transition-delay:520ms; }
[data-reveal].in[data-delay="540"]{ transition-delay:540ms; }

/* ============ NEW MOTION LAYER (dark) ============ */
/* cursor spotlight */
.spotlight{
  position:fixed; top:0; left:0; width:680px; height:680px; border-radius:50%;
  pointer-events:none; z-index:3; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(91,140,255,.14), rgba(37,224,214,.06) 35%, transparent 60%);
  mix-blend-mode:screen; opacity:0; transition:opacity .6s var(--ease); will-change:transform;
}
.spotlight.on{ opacity:1; }
/* hero light-field canvas */
.hero-canvas{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* heading reveal (clip mask) */
.reveal-mask{ display:inline-block; overflow:hidden; }
.reveal-mask > span{ display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.reveal-mask.in > span{ transform:none; }

/* gradient animated border for feature cards */
.card, .cap, .product, .proj, .value, .ms, .stat, .cc{
  position:relative;
}
.card::after, .cap::after, .product::after, .proj::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
}
.card:hover::after, .cap:hover::after, .product:hover::after, .proj:hover::after{ opacity:.9; }

/* ============ IMAGE ENHANCEMENTS ============ */
.vis-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.vis-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,10,16,.12) 0%, rgba(8,10,16,.55) 100%); }

/* product cards */
.product-vis{ overflow:hidden; }
.product-vis .vis-media{ transition:transform 1.1s var(--ease); }
.product-vis:hover .vis-media{ transform:scale(1.06); }
.product-vis .vis-overlay{ background:linear-gradient(180deg, rgba(8,10,16,.10), rgba(8,10,16,.62)); }
.product-vis .badge{ z-index:2; }

/* project cards */
.proj-vis{ overflow:hidden; background:none !important; }
.proj-vis .vis-media{ transition:transform 1.2s var(--ease); }
.proj-vis:hover .vis-media{ transform:scale(1.05); }
.proj-vis .num{ position:relative; z-index:2; text-shadow:0 6px 30px rgba(0,0,0,.55); }

/* hero background image */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg .vis-media{ opacity:.42; filter:saturate(1.05); }
.hero-bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(80% 60% at 50% 28%, rgba(8,10,16,.15), rgba(8,10,16,.85) 100%),
    linear-gradient(180deg, rgba(8,10,16,.55), rgba(8,10,16,.25) 42%, rgba(8,10,16,.92));
}
.hero-content{ position:relative; z-index:3; }
.hero-actions, .hero-scroll, .hero-meta{ position:relative; z-index:3; }

/* index series cards — faint media on hover */
.card{ isolation:isolate; }
.card > *{ position:relative; z-index:2; }
.card-media{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; transition:opacity .6s var(--ease); border-radius:inherit; }
.card-media .vis-media{ opacity:.9; }
.card:hover .card-media{ opacity:.16; }

/* about gallery */
.about-gallery{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
.about-gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; position:relative; min-height:320px; border:1px solid var(--line-soft); }
.about-gallery figure.tall{ min-height:auto; }
.about-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.about-gallery figure:hover img{ transform:scale(1.04); }
.about-gallery figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-shadow:0 4px 18px rgba(0,0,0,.6); }
.about-gallery .vis-overlay{ background:linear-gradient(180deg, transparent 42%, rgba(8,10,16,.72)); }

@media (max-width:860px){
  .about-gallery{ grid-template-columns:1fr; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .cards, .cap-grid, .stats, .milestones{ grid-template-columns:repeat(2,1fr); }
  .timeline, .product-grid, .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .section{ padding:90px 0; }
  .hero{ padding:140px 0 90px; }
  .hero-meta{ position:static; margin-top:50px; justify-content:flex-start; gap:30px; }
  .hero-scroll{ display:none; }
  .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-inner{ grid-template-columns:1fr; gap:36px; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .footer-bottom{ flex-direction:column; gap:8px; }
  .cta{ padding:44px 30px; }
}
@media (max-width:560px){
  .cards, .cap-grid, .stats, .milestones, .timeline, .product-grid, .proj-grid{ grid-template-columns:1fr; }
  .order-form{ grid-template-columns:1fr; }
  .hero-meta{ flex-wrap:wrap; gap:24px; }
  .wrap{ padding:0 22px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}