/* ═══════════════════════════════════════════════════
   STERNWALL — Shared Stylesheet
   Extracted from homepage + inner page additions
   ═══════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--dark:#1A1D21;--slate:#2D3339;--slate-light:#4A5058;--copper:#B87333;
--copper-glow:rgba(184,115,51,0.4);--warm:#E8DDD0;--gray:#6B7178;
--white:#FFFFFF;--red:#C0392B;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--warm);background:var(--dark);overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:default}
a{text-decoration:none;color:inherit}

/* ── GRAIN OVERLAY ── */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0.035}
.grain::after{content:'';position:absolute;inset:-200%;width:400%;height:400%;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:256px 256px;animation:grainShift 0.5s steps(1) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-5%,-5%)}50%{transform:translate(5%,2%)}75%{transform:translate(-2%,5%)}100%{transform:translate(3%,-3%)}}

/* ── SCROLL PROGRESS BAR ── */
#scrollProgress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:10001;background:transparent;pointer-events:none}
#scrollProgress .bar{width:100%;height:100%;background:var(--copper);transform:scaleX(0);transform-origin:left;will-change:transform}

/* ── CURSOR TRAIL ── */
.cursor-trail{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;mix-blend-mode:screen;will-change:transform}
.cursor-main{width:8px;height:8px;background:var(--copper)}
.cursor-t1{width:6px;height:6px;background:rgba(184,115,51,0.6)}
.cursor-t2{width:4px;height:4px;background:rgba(184,115,51,0.35)}
.cursor-t3{width:3px;height:3px;background:rgba(184,115,51,0.15)}

/* ── NAV TRANSITION LINE ── */
#navFlash{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9500;pointer-events:none;display:flex;align-items:center}
#navFlash .line{width:0;height:2px;background:var(--copper);box-shadow:0 0 20px var(--copper-glow)}

/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:10002;background:var(--dark);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.6s ease}
#loader.hide{opacity:0;pointer-events:none}
#loader svg{width:80px;height:88px;animation:loaderPulse 1.2s ease infinite}
@keyframes loaderPulse{0%,100%{opacity:0.6;transform:scale(0.95)}50%{opacity:1;transform:scale(1)}}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;width:100%;z-index:5000;padding:0 clamp(24px,4vw,60px);background:rgba(26,29,33,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateY(-100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
nav.visible{transform:translateY(0)}
/* Inner pages: nav always visible */
.page-inner nav{transform:translateY(0)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo{display:flex;align-items:center;gap:14px}
.nav-logo svg{width:28px;height:31px}
.nav-logo span{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:0.2em;color:var(--white);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:0.82rem;font-weight:400;color:var(--gray);letter-spacing:0.06em;text-transform:uppercase;position:relative;transition:color 0.3s}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--copper);transition:width 0.3s ease}
.nav-links a:hover{color:var(--warm)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--copper)}
.nav-links a.active::after{width:100%}
.nav-cta{font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:10px 24px;border-radius:2px;background:var(--copper);color:var(--dark);transition:background 0.3s,box-shadow 0.3s}
.nav-cta:hover{background:#C98040;box-shadow:0 0 20px var(--copper-glow)}
.nav-cta::after{display:none}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--warm);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
.mobile-menu{position:fixed;inset:0;z-index:4999;background:rgba(26,29,33,0.98);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.8rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--warm);transition:color 0.3s}
.mobile-menu a:hover{color:var(--copper)}
@media(max-width:860px){.nav-links{display:none}.hamburger{display:flex}}

/* ── BACKGROUND ELEMENTS ── */
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;will-change:transform}
.bg-orb-copper{background:rgba(184,115,51,0.12)}
.bg-orb-slate{background:rgba(45,51,57,0.25)}
.bg-orb-warm{background:rgba(232,221,208,0.04)}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(74,80,88,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(74,80,88,0.06) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.bg-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(74,80,88,0.15) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}
.bg-diag{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(74,80,88,0.04) 40px,rgba(74,80,88,0.04) 41px);pointer-events:none}
.section-divider{width:100%;height:80px;position:relative;overflow:hidden}
.section-divider svg{position:absolute;width:100%;height:100%;display:block}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-20px,30px)}75%{transform:translate(20px,15px)}}
.bg-orb-float{animation:floatOrb 15s ease-in-out infinite}
.bg-orb-float-slow{animation:floatOrb 25s ease-in-out infinite}
.bg-orb-float-reverse{animation:floatOrb 20s ease-in-out infinite reverse}

/* ── SECTIONS ── */
section{position:relative}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(24px,4vw,60px)}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
#hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(74,80,88,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(74,80,88,0.07) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-content{position:relative;z-index:1}
.hero-icon{opacity:0;transform:scale(0.9);animation:heroIconIn 2s cubic-bezier(0.16,1,0.3,1) 0.5s forwards}
.hero-icon svg{width:120px;height:132px}
@keyframes heroIconIn{to{opacity:1;transform:scale(1)}}
.hero-wordmark{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,6.5rem);letter-spacing:0.35em;color:var(--white);text-transform:uppercase;margin-top:32px;min-height:1.2em}
.hero-wordmark .char{display:inline-block;min-width:0.6em;text-align:center}
.hero-tagline{font-size:clamp(0.75rem,1.8vw,1.15rem);letter-spacing:0.2em;color:var(--gray);text-transform:uppercase;margin-top:16px;opacity:0;transition:opacity 0.8s ease;white-space:nowrap}
.hero-tagline.show{opacity:1}
.hero-cta-wrap{margin-top:48px;opacity:0;transition:opacity 0.8s ease}
.hero-cta-wrap.show{opacity:1}

/* ── MAGNETIC BUTTON ── */
.btn-copper{display:inline-block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.15em;text-transform:uppercase;padding:16px 40px;border-radius:2px;background:var(--copper);color:var(--dark);border:none;cursor:pointer;position:relative;overflow:hidden;transition:box-shadow 0.3s ease;will-change:transform}
.btn-copper::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left 0.5s ease}
.btn-copper:hover::before{left:100%}
.btn-copper:hover{box-shadow:0 0 30px var(--copper-glow)}

/* ── SCROLL REVEAL TEXT ── */
#statement{padding:clamp(100px,15vw,200px) 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.big-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,4rem);line-height:1.35;color:var(--white);text-transform:uppercase;letter-spacing:0.06em;max-width:900px}
.big-text .word{display:inline;opacity:0.08;transition:opacity 0.5s ease}
.big-text .word.lit{opacity:1}
.statement-sub{font-size:clamp(0.95rem,1.5vw,1.1rem);color:var(--gray);line-height:1.7;max-width:600px;margin-top:32px;font-weight:300}
.statement-sub .reveal-line{opacity:0;transform:translateY(20px);transition:all 0.7s ease}
.statement-sub .reveal-line.vis{opacity:1;transform:translateY(0)}

/* ── SECTION HEADERS (decode) ── */
.section-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:0.1em;text-transform:uppercase;color:var(--white);text-align:center;margin-bottom:64px}
.section-label .char{display:inline-block;min-width:0.3em}

/* ── PAIN POINTS (Typewriter + Strike) ── */
#problems{padding:clamp(80px,12vw,160px) 0;background:linear-gradient(160deg,#1A1D21 0%,#1E2127 40%,#211F1E 100%);position:relative;overflow:hidden}
.pain-item{max-width:700px;margin:0 auto 56px;opacity:0;transform:translateY(30px);transition:opacity 0.5s ease,transform 0.5s ease}
.pain-item.vis{opacity:1;transform:translateY(0)}
.pain-text{font-size:clamp(1rem,1.8vw,1.2rem);color:var(--warm);line-height:1.6;font-weight:300;padding-left:20px;border-left:3px solid var(--red);position:relative;display:inline-block}
.pain-text .typed-text{visibility:hidden}
.pain-text .typed-cursor{display:inline}
.pain-text.typed .typed-text{visibility:visible}
.pain-strike{position:absolute;top:50%;left:0;width:0;height:2px;background:var(--copper);transition:width 0.4s ease}
.pain-text.struck .pain-strike{width:100%}
.pain-text.struck{opacity:0.4}
.pain-solution{font-size:clamp(0.85rem,1.4vw,0.95rem);color:var(--copper);font-weight:600;padding-left:20px;border-left:3px solid var(--copper);margin-top:12px;opacity:0;transform:translateX(20px);transition:opacity 0.5s ease 0.2s,transform 0.5s ease 0.2s}
.pain-item.solved .pain-solution{opacity:1;transform:translateX(0)}

/* ── BUILT DIFFERENT ── */
#difference{padding:clamp(80px,12vw,160px) 0;background:linear-gradient(180deg,#16181C 0%,#191C20 50%,#16181C 100%);position:relative;overflow:hidden}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.diff-card{background:rgba(45,51,57,0.3);border:1px solid rgba(74,80,88,0.2);border-left:0px solid var(--copper);padding:36px 28px;border-radius:4px;opacity:0;transform:translateY(25px);transition:opacity 0.6s ease,transform 0.6s ease,border-left-width 0.3s ease,background 0.3s ease;min-height:200px;display:flex;flex-direction:column}
.diff-card.vis{opacity:1;transform:translateY(0)}
.diff-card:hover{border-left-width:4px;background:rgba(45,51,57,0.5)}
.diff-card h3{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--white);margin-bottom:10px}
.diff-card p{font-size:0.9rem;color:var(--gray);line-height:1.6;font-weight:300}
@media(max-width:768px){
.diff-grid{grid-template-columns:1fr}
.pillars-visual{gap:20px;height:200px;max-width:280px;margin:40px auto 0}
.pillar-bar{max-width:50px}
.pillar-col:nth-child(1) .pillar-bar{height:120px}
.pillar-col:nth-child(2) .pillar-bar{height:170px}
.pillar-col:nth-child(3) .pillar-bar{height:120px}
.pillar-label{font-size:0.8rem!important;letter-spacing:0.1em!important}
.pillar-desc{font-size:0.75rem!important}
#pillars{padding:80px 0}
#pillars .bg-orb{width:250px!important;height:250px!important;margin-top:-125px!important;margin-left:-125px!important}
}

/* ── THREE PILLARS (3D Perspective) ── */
#pillars{padding:clamp(120px,18vw,260px) 0;text-align:center;background:var(--dark);perspective:800px;position:relative;overflow:hidden}
#pillars::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(184,115,51,0.06) 0%,transparent 70%);pointer-events:none}
.pillars-visual{display:flex;align-items:flex-end;justify-content:center;gap:clamp(40px,8vw,100px);height:420px;margin:80px auto 0;max-width:700px;transform-style:preserve-3d;will-change:transform}
.pillar-col{text-align:center;flex:1}
.pillar-bar{width:100%;max-width:110px;margin:0 auto;border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform 1.2s cubic-bezier(0.16,1,0.3,1)}
.pillar-col:nth-child(1) .pillar-bar{height:240px;background:var(--slate-light);transition-delay:0s}
.pillar-col:nth-child(2) .pillar-bar{height:340px;background:var(--copper);transition-delay:0.2s;box-shadow:0 0 40px rgba(184,115,51,0.15)}
.pillar-col:nth-child(3) .pillar-bar{height:240px;background:var(--slate-light);transition-delay:0.4s}
.pillars-visual.anim .pillar-bar{transform:scaleY(1)}
.pillars-visual.anim .pillar-col:nth-child(2) .pillar-bar{box-shadow:0 0 80px rgba(184,115,51,0.35),0 0 160px rgba(184,115,51,0.12)}
.pillar-label{margin-top:28px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:0.2em;text-transform:uppercase;color:var(--warm);opacity:0;transform:translateY(10px);transition:opacity 0.6s ease,transform 0.6s ease}
.pillars-visual.anim .pillar-label{opacity:1;transform:translateY(0)}
.pillar-col:nth-child(1) .pillar-label{transition-delay:0.8s}
.pillar-col:nth-child(2) .pillar-label{transition-delay:1s;color:var(--copper)}
.pillar-col:nth-child(3) .pillar-label{transition-delay:1.2s}
.pillar-desc{font-size:clamp(0.85rem,1.2vw,1rem);color:var(--gray);font-weight:300;margin-top:10px;opacity:0;transition:opacity 0.6s ease;line-height:1.5}
.pillars-visual.anim .pillar-desc{opacity:1}
.pillar-col:nth-child(1) .pillar-desc{transition-delay:1s}
.pillar-col:nth-child(2) .pillar-desc{transition-delay:1.2s}
.pillar-col:nth-child(3) .pillar-desc{transition-delay:1.4s}

/* ── SERVICES (Horizontal Scroll) ── */
#services{background:#16181C;position:relative}
.services-header{padding:clamp(40px,5vw,60px) 0 0;text-align:center}
.services-pin{height:350vh;position:relative}
.services-track{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.services-slider{display:flex;gap:0;will-change:transform;height:100%}
.service-card{min-width:80vw;height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,60px);position:relative}
.service-inner{max-width:600px}
.service-inner::before{content:'';display:block;width:60px;height:2px;background:var(--copper);margin-bottom:32px}
.service-inner h3{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:0.1em;text-transform:uppercase;color:var(--white);line-height:1;margin-bottom:24px}
.service-inner p{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--gray);line-height:1.7;font-weight:300}
.service-num{position:absolute;bottom:clamp(24px,4vw,60px);right:clamp(24px,6vw,80px);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(4rem,10vw,8rem);color:rgba(74,80,88,0.08);letter-spacing:0.05em}
@media(max-width:500px){
.services-pin{height:auto!important;position:static!important}
.services-track{position:static!important;height:auto!important;flex-direction:column;overflow:visible}
.services-slider{flex-direction:column!important;transform:none!important}
.service-card{min-width:100%!important;height:auto!important;min-height:50vh}
}

/* ── TECHNOLOGY ── */
#technology{padding:clamp(80px,12vw,160px) 0;background:linear-gradient(135deg,#1A1D21 0%,#1D2025 50%,#1A1D21 100%);position:relative;overflow:hidden}
.tech-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:64px}
.tech-features{display:flex;flex-direction:column;gap:28px}
.tech-feat{display:flex;gap:16px;align-items:flex-start;opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease}
.tech-feat.vis{opacity:1;transform:translateX(0)}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--copper);margin-top:7px;flex-shrink:0}
.tech-feat h4{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--white);margin-bottom:4px}
.tech-feat p{font-size:0.85rem;color:var(--gray);line-height:1.5;font-weight:300}

/* ── LIVING DASHBOARD ── */
.dash-mock{background:#1a1d21;border-radius:8px;border:1px solid rgba(74,80,88,0.3);overflow:hidden;opacity:0;transform:translateY(20px) scale(0.98);transition:opacity 0.8s ease,transform 0.8s ease}
.dash-mock.vis{opacity:1;transform:translateY(0) scale(1)}
.dash-top{background:var(--slate);padding:10px 16px;display:flex;align-items:center;gap:8px}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-dot:nth-child(1){background:#ff5f56}.dash-dot:nth-child(2){background:#ffbd2e}.dash-dot:nth-child(3){background:#27c93f}
.dash-top span{margin-left:auto;font-size:0.7rem;color:var(--gray);font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
.dash-body{padding:16px;display:grid;grid-template-columns:1.5fr 1fr;gap:12px;min-height:280px}
.dash-map{background:rgba(26,29,33,0.8);border-radius:6px;position:relative;overflow:hidden;min-height:180px}
/* Radar */
.radar-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px}
.radar-circle{position:absolute;inset:0;border:1px solid rgba(184,115,51,0.15);border-radius:50%}
.radar-circle:nth-child(2){inset:20px;border-color:rgba(184,115,51,0.1)}
.radar-circle:nth-child(3){inset:40px;border-color:rgba(184,115,51,0.05)}
.radar-sweep{position:absolute;top:50%;left:50%;width:50%;height:2px;background:linear-gradient(90deg,transparent,var(--copper));transform-origin:left center;animation:radarSweep 3s linear infinite}
@keyframes radarSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.map-pin{width:8px;height:8px;border-radius:50%;background:var(--copper);position:absolute;animation:pinPulse 2s ease infinite}
.map-pin:nth-child(5){top:30%;left:25%;animation-delay:0s}
.map-pin:nth-child(6){top:60%;left:65%;animation-delay:0.7s}
.map-pin:nth-child(7){top:20%;left:75%;animation-delay:1.3s}
.map-pin:nth-child(8){top:70%;left:35%;animation-delay:0.4s}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 0 var(--copper-glow);opacity:1}50%{box-shadow:0 0 0 6px transparent;opacity:0.7}}
.dash-right{display:flex;flex-direction:column;gap:8px}
.dash-label{font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--gray);margin-bottom:2px}
.dash-item{display:flex;align-items:center;gap:8px;background:rgba(26,29,33,0.6);border-radius:4px;padding:8px 10px;font-size:0.7rem;color:var(--warm)}
.dash-status{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dash-status.green{background:#27c93f}.dash-status.yellow{background:#ffbd2e}
.dash-feed{background:rgba(26,29,33,0.6);border-radius:4px;padding:8px 10px;font-size:0.65rem;color:var(--gray);font-family:'Inter',monospace;line-height:1.8;min-height:60px;overflow:hidden}
.dash-feed .feed-line{opacity:0;transition:opacity 0.3s}
.dash-feed .feed-line.show{opacity:1}
.dash-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metric-box{text-align:center;padding:10px;background:rgba(26,29,33,0.6);border-radius:4px}
.metric-box .m-num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.3rem;color:var(--copper)}
.metric-box .m-label{font-size:0.55rem;color:var(--gray);margin-top:2px;text-transform:uppercase;letter-spacing:0.05em}
.dash-bars{grid-column:1/-1;display:flex;gap:8px;align-items:flex-end;padding:8px;background:rgba(26,29,33,0.6);border-radius:4px;height:50px}
.dash-bar{flex:1;background:var(--copper);border-radius:2px 2px 0 0;opacity:0.6;transition:height 1s ease}
@media(max-width:768px){.tech-layout{grid-template-columns:1fr}.dash-mock{order:-1}}

/* ── INDUSTRIES ── */
#industries{padding:clamp(80px,12vw,160px) 0;background:#16181C;position:relative;overflow:hidden}
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:64px}
.ind-item{text-align:center;padding:28px 12px;background:rgba(45,51,57,0.15);border:1px solid rgba(74,80,88,0.12);border-radius:4px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray);opacity:0;transform:translateY(15px);transition:opacity 0.5s ease,transform 0.5s ease,color 0.3s,border-color 0.3s}
.ind-item.vis{opacity:1;transform:translateY(0)}
.ind-item:hover{color:var(--copper);border-color:rgba(184,115,51,0.3)}
@media(max-width:768px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.ind-grid{grid-template-columns:1fr}}

/* ── ODOMETER NUMBERS ── */
#numbers{padding:clamp(80px,12vw,160px) 0;background:var(--dark);position:relative;overflow:hidden}
.numbers-row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;margin-top:64px}
.num-item{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.num-item.vis{opacity:1;transform:translateY(0)}
.num-val{display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2.5rem,5vw,3.5rem);color:var(--copper);line-height:1}
.odo-prefix,.odo-suffix{display:inline-block}
.odo-digit{display:inline-block;height:1.2em;overflow:hidden;position:relative;width:0.65em}
.odo-digit-inner{display:flex;flex-direction:column;transition:transform 1.2s cubic-bezier(0.16,1,0.3,1);will-change:transform}
.odo-digit-inner span{height:1.2em;display:flex;align-items:center;justify-content:center}
.num-label{font-size:0.85rem;color:var(--gray);margin-top:8px;font-weight:300;letter-spacing:0.03em}
@media(max-width:600px){.numbers-row{grid-template-columns:repeat(2,1fr)}}

/* ── CTA ── */
#cta{padding:clamp(100px,15vw,200px) 0;text-align:center;position:relative;overflow:hidden;background:var(--dark)}
.cta-heading{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:0.05em;color:var(--white);text-transform:uppercase;position:relative}
.cta-phone{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--copper);margin-top:24px;letter-spacing:0.08em;position:relative}
.cta-phone a{color:var(--copper);transition:color 0.3s}
.cta-phone a:hover{color:#C98040}
.cta-btn-wrap{margin-top:40px;position:relative}

/* ── FOOTER ── */
footer{padding:60px 0 32px;background:#111316;border-top:1px solid rgba(74,80,88,0.15)}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:40px}
.footer-brand{display:flex;align-items:center;gap:14px;cursor:default}
.footer-brand svg{width:28px;height:31px;transition:filter 0.3s}
.footer-brand span{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:0.2em;color:var(--white);text-transform:uppercase}
.footer-brand.easter svg{filter:drop-shadow(0 0 8px var(--copper)) drop-shadow(0 0 20px rgba(184,115,51,0.4));animation:easterGlow 0.8s ease}
@keyframes easterGlow{0%{filter:drop-shadow(0 0 4px var(--copper))}50%{filter:drop-shadow(0 0 24px var(--copper)) drop-shadow(0 0 40px rgba(184,115,51,0.5))}100%{filter:drop-shadow(0 0 8px var(--copper)) drop-shadow(0 0 20px rgba(184,115,51,0.4))}}
.footer-contact{font-size:0.85rem;color:var(--gray);line-height:2;font-weight:300}
.footer-contact a{color:var(--gray);transition:color 0.3s}
.footer-contact a:hover{color:var(--copper)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{font-size:0.82rem;color:var(--gray);letter-spacing:0.04em;transition:color 0.3s}
.footer-links a:hover{color:var(--copper)}
.footer-bottom{border-top:1px solid rgba(74,80,88,0.1);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:0.75rem;color:rgba(107,113,120,0.6)}
@media(max-width:600px){.footer-top{flex-direction:column}.footer-bottom{flex-direction:column;text-align:center}}


/* ═══════════════════════════════════════════════════
   INNER PAGE STYLES
   ═══════════════════════════════════════════════════ */

/* ── INNER PAGE HERO ── */
.inner-hero {
  padding: clamp(140px, 20vw, 200px) 0 clamp(60px, 8vw, 100px);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1A1D21 0%, #1E2127 100%);
}
.inner-hero .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(74,80,88,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(74,80,88,0.06) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.inner-hero h1 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: 0.15em;
  text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.inner-hero .breadcrumb {
  font-size: 0.8rem; color: #6B7178; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.inner-hero .breadcrumb a { color: #B87333; transition: color 0.3s; }
.inner-hero .breadcrumb a:hover { color: #C98040; }
.inner-hero .breadcrumb .sep { color: #4A5058; margin: 0 8px; }
.inner-hero .breadcrumb .current { color: #E8DDD0; }

/* ── CONTENT SECTIONS FOR INNER PAGES ── */
.content-section { padding: clamp(60px, 10vw, 120px) 0; position: relative; overflow: hidden; }
.content-section:nth-child(odd) { background: #1A1D21; }
.content-section:nth-child(even) { background: #16181C; }
.content-section h2 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem); letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; margin-bottom: 24px;
}
.content-section h3 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; margin-bottom: 12px;
}
.content-section p { font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: #6B7178; line-height: 1.8; font-weight: 300; margin-bottom: 20px; }
.content-section p.lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #E8DDD0; line-height: 1.7; margin-bottom: 32px; }
.content-section ul { list-style: none; padding: 0; margin-bottom: 24px; }
.content-section li { font-size: 0.95rem; color: #6B7178; line-height: 2; font-weight: 300; padding-left: 20px; position: relative; }
.content-section li::before { content: '▸'; color: #B87333; position: absolute; left: 0; }

/* ── TWO COLUMN LAYOUT ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

/* ── THREE COLUMN LAYOUT ── */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .three-col { grid-template-columns: 1fr; } }

/* ── FEATURE CARDS (inner pages) ── */
.feature-card {
  background: rgba(45,51,57,0.2); border: 1px solid rgba(74,80,88,0.15);
  border-left: 0px solid #B87333; padding: 32px 28px; border-radius: 4px;
  transition: all 0.4s ease; opacity: 0; transform: translateY(20px);
}
.feature-card.anim-in.visible { opacity: 1; transform: translateY(0); }
.feature-card:hover { border-left-width: 4px; background: rgba(45,51,57,0.35); }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { margin-bottom: 0; }

/* ── SERVICE CARDS (special styling) ── */
.service-card {
  background: rgba(45,51,57,0.2); border: 1px solid rgba(74,80,88,0.15);
  border-left: 0px solid #B87333; padding: 36px 32px; border-radius: 4px;
  transition: all 0.4s ease; opacity: 0; transform: translateY(20px); position: relative;
}
.service-card.anim-in.visible { opacity: 1; transform: translateY(0); }
.service-card:hover { border-left-width: 4px; background: rgba(45,51,57,0.35); }
.service-card h3 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.service-card p { font-size: 0.95rem; color: #6B7178; line-height: 1.7; font-weight: 300; margin-bottom: 20px; }
.service-card a { display: inline-block; font-size: 0.85rem; color: #B87333; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s; }
.service-card a:hover { color: #C98040; }

/* ── INDUSTRY CARDS ── */
.industry-card {
  background: rgba(45,51,57,0.15); border: 1px solid rgba(74,80,88,0.12);
  padding: 24px 20px; border-radius: 4px; text-align: center;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6B7178;
  transition: all 0.3s ease; opacity: 0; transform: translateY(15px);
}
.industry-card.anim-in.visible { opacity: 1; transform: translateY(0); }
.industry-card:hover { color: #B87333; border-color: rgba(184,115,51,0.3); }

/* ── CTA BANNER ── */
.cta-banner {
  padding: clamp(60px, 10vw, 100px) 0; text-align: center;
  background: #1A1D21; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(184,115,51,0.06) 0%, transparent 60%);
}
.cta-banner h2 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; position: relative;
}
.cta-banner .cta-phone {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: #B87333;
  margin-top: 20px; letter-spacing: 0.08em; position: relative;
}
.cta-banner .cta-phone a { color: #B87333; transition: color 0.3s; }
.cta-banner .cta-btn-wrap { margin-top: 32px; position: relative; }

/* ── STAT ROW (for inner pages) ── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; margin: 40px 0; }
.stat-item { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.stat-item.anim-in.visible { opacity: 1; transform: translateY(0); }
.stat-item .stat-num { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); color: #B87333; }
.stat-item .stat-label { font-size: 0.8rem; color: #6B7178; margin-top: 4px; letter-spacing: 0.03em; }
@media (max-width: 600px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ── FAQ STYLES ── */
.faq-item { border-bottom: 1px solid rgba(74,80,88,0.2); padding: 24px 0; }
.faq-question {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.05em; color: #fff;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: color 0.3s;
}
.faq-question:hover { color: #B87333; }
.faq-question::after { content: '+'; font-size: 1.4rem; color: #B87333; transition: transform 0.3s; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-item.open .faq-answer { max-height: 500px; padding-top: 16px; }
.faq-answer p { margin-bottom: 0; }

/* ── CONTACT FORM ── */
.contact-form { max-width: 600px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7178; margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 14px 16px; background: rgba(45,51,57,0.3);
  border: 1px solid rgba(74,80,88,0.3); border-radius: 4px;
  color: #E8DDD0; font-family: 'Inter', sans-serif; font-size: 0.95rem;
  transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: #B87333;
}
.form-group textarea { min-height: 120px; resize: vertical; }

/* ── SCROLL ANIMATIONS ── */
.anim-in { opacity: 0; transform: translateY(25px); transition: all 0.6s ease; }
.anim-in.visible { opacity: 1; transform: translateY(0); }

/* ── BUTTON STYLES FOR INNER PAGES ── */
.btn-primary {
  display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 40px; border-radius: 2px; background: #B87333; color: #1A1D21;
  border: none; cursor: pointer; position: relative; overflow: hidden;
  transition: box-shadow 0.3s ease; will-change: transform;
}
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover { box-shadow: 0 0 30px rgba(184,115,51,0.4); }

.btn-outline {
  display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 40px; border-radius: 2px; background: transparent;
  color: #B87333; border: 2px solid #B87333; cursor: pointer;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: #B87333; color: #1A1D21;
  box-shadow: 0 0 20px rgba(184,115,51,0.3);
}

/* ── PILLAR CARDS (for about page) ── */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.pillar-card {
  background: rgba(45,51,57,0.2); border: 1px solid rgba(74,80,88,0.15);
  padding: 32px 24px; border-radius: 4px; text-align: center;
  transition: all 0.4s ease; opacity: 0; transform: translateY(20px);
}
.pillar-card.anim-in.visible { opacity: 1; transform: translateY(0); }
.pillar-card:hover { background: rgba(45,51,57,0.35); }
.pillar-card .pillar-icon { margin-bottom: 16px; }
.pillar-card h3 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; margin-bottom: 12px;
}
.pillar-card p { font-size: 0.9rem; color: #6B7178; line-height: 1.6; font-weight: 300; margin-bottom: 0; }
@media (max-width: 768px) { .pillars-grid { grid-template-columns: 1fr; } }

/* ── LICENSE GRID (for about page) ── */
.license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.license-item {
  background: rgba(45,51,57,0.2); border: 1px solid rgba(74,80,88,0.15);
  padding: 20px; border-radius: 4px; text-align: center;
}
.license-item .license-label {
  display: block; font-size: 0.8rem; color: #6B7178; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 8px;
}
.license-item .license-number {
  display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 1.1rem; color: #B87333; letter-spacing: 0.1em;
}
@media (max-width: 600px) { .license-grid { grid-template-columns: 1fr; } }