/* ============================================================
   TILLIE STREET DENTAL PRACTICE — CORE STYLESHEET
   ============================================================ */

/* ---------- Variables ---------- */
:root{
  --navy:#0a0e1a;
  --navy-2:#0d1220;
  --charcoal:#12141f;
  --charcoal-2:#181b28;
  --teal:#2dd4a8;
  --teal-dark:#1db990;
  --gold:#c4a24e;
  --gold-light:#e8c874;
  --text:#f4f6f8;
  --text-dim:#a8afc0;
  --text-mute:#6b7280;
  --border:rgba(255,255,255,0.08);
  --glass:rgba(255,255,255,0.04);
  --glass-strong:rgba(255,255,255,0.07);
  --shadow:0 20px 60px rgba(0,0,0,0.45);
  --radius:18px;
  --radius-sm:10px;
  --ff-head:'Cormorant Garamond', serif;
  --ff-body:'DM Sans', sans-serif;
  --ff-mono:'JetBrains Mono', monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:0.6s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
html.no-scroll,body.no-scroll{overflow:hidden;}

body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  cursor:url("../img/cursor.svg") 12 12,auto;
  position:relative;
  min-height:100vh;
}

a{color:inherit;text-decoration:none;cursor:url("../img/cursor-pointer.svg") 16 16,pointer;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;cursor:url("../img/cursor-pointer.svg") 16 16,pointer;}
input,select,textarea{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--ff-head);font-weight:600;line-height:1.15;letter-spacing:0.3px;}
h1{font-size:clamp(2.6rem,6vw,5.2rem);}
h2{font-size:clamp(2rem,4.2vw,3.4rem);}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem);}
p{color:var(--text-dim);}

.mono{font-family:var(--ff-mono);letter-spacing:2px;text-transform:uppercase;font-size:0.78rem;}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 32px;}
section{position:relative;padding:120px 0;}
@media(max-width:768px){section{padding:80px 0;} .container{padding:0 20px;}}
section:not(.hero):not(.page-hero)::before{
  content:'';position:absolute;top:0;left:50%;width:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(45,212,168,0.5),rgba(196,162,78,0.4),transparent);
  transform:translateX(-50%);transition:width 1.2s var(--ease);pointer-events:none;
}
section:not(.hero):not(.page-hero).divider-in::before{width:60%;}

/* ---------- Grain Texture ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform;}
.cursor-dot{width:6px;height:6px;background:var(--teal);transition:background 0.2s,width 0.2s,height 0.2s;}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(45,212,168,0.5);transition:width 0.2s,height 0.2s,border-color 0.2s,background 0.2s;}
.cursor-ring.hover{width:56px;height:56px;background:rgba(196,162,78,0.08);border-color:var(--gold);}
.cursor-dot.hover{background:var(--gold);}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none;} body{cursor:auto;} button,a{cursor:pointer;}}
html.custom-cursor-active,html.custom-cursor-active body{cursor:none;}
html.custom-cursor-active a,html.custom-cursor-active button,html.custom-cursor-active .has-dropdown,html.custom-cursor-active .accordion-head{cursor:none;}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--teal),var(--gold));z-index:9997;transition:width 0.1s linear;}

/* ---------- Loading screen ---------- */
.loader{
  position:fixed;inset:0;background:var(--navy);z-index:99999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  transition:opacity 0.8s var(--ease),visibility 0.8s var(--ease);
}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-tooth{width:64px;height:64px;position:relative;}
.loader-tooth svg{width:100%;height:100%;animation:toothPulse 1.6s ease-in-out infinite;}
@keyframes toothPulse{0%,100%{transform:scale(1);opacity:0.85;}50%{transform:scale(1.12);opacity:1;}}
.loader-bar{width:200px;height:2px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;}
.loader-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--gold));animation:loaderFill 1.4s var(--ease) forwards;}
@keyframes loaderFill{to{width:100%;}}
.loader-text{font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:3px;color:var(--text-mute);text-transform:uppercase;}

/* ---------- Floating particles ---------- */
.particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(45,212,168,0.5),transparent 70%);animation:floatUp linear infinite;}
@keyframes floatUp{0%{transform:translateY(0) translateX(0);opacity:0;}10%{opacity:0.6;}90%{opacity:0.4;}100%{transform:translateY(-110vh) translateX(20px);opacity:0;}}

/* ---------- Page transition overlay ---------- */
.page-transition{position:fixed;inset:0;background:var(--navy);z-index:99998;transform:translateY(100%);pointer-events:none;}
.page-transition.active{animation:pageIn 0.6s var(--ease) forwards;}
.page-transition.leaving{animation:pageOut 0.6s var(--ease) forwards;}
@keyframes pageIn{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes pageOut{from{transform:translateY(0);}to{transform:translateY(-100%);}}

/* ---------- Navbar ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:22px 0;transition:background 0.4s var(--ease),padding 0.4s var(--ease),border-color 0.4s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.solid{background:rgba(10,14,26,0.88);backdrop-filter:blur(16px);padding:14px 0;border-color:var(--border);}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo img{height:34px;width:auto;transition:transform 0.3s var(--ease);}
.nav-logo:hover img{transform:scale(1.04);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links>li{position:relative;}
.nav-links a{font-family:var(--ff-mono);font-size:0.76rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-dim);transition:color 0.3s;position:relative;padding:6px 0;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--teal);transition:width 0.3s 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%;}
.has-dropdown{display:flex;align-items:center;gap:5px;cursor:url("../img/cursor-pointer.svg") 16 16,pointer;}
.dropdown{
  position:absolute;top:calc(100% + 18px);left:-20px;min-width:230px;
  background:rgba(18,20,31,0.98);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),visibility 0.3s;
  box-shadow:var(--shadow);backdrop-filter:blur(20px);
}
.nav-item-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:10px 14px;border-radius:8px;font-family:var(--ff-body);font-size:0.9rem;letter-spacing:0;text-transform:none;color:var(--text-dim);}
.dropdown a::after{display:none;}
.dropdown a:hover{background:rgba(45,212,168,0.08);color:var(--teal);}
.nav-right{display:flex;align-items:center;gap:22px;}
.lang-switch{display:flex;gap:4px;font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:1px;}
.lang-switch button{padding:4px 9px;border-radius:6px;color:var(--text-mute);transition:all 0.3s;}
.lang-switch button.active{color:var(--navy);background:var(--teal);}
.lang-switch button:not(.active):hover{color:var(--text);}
.hamburger{display:none;flex-direction:column;gap:5px;width:26px;z-index:950;}
.hamburger span{display:block;height:2px;width:100%;background:var(--text);transition:all 0.35s var(--ease);}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:900px){
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(78vw,340px);flex-direction:column;justify-content:center;align-items:flex-start;background:rgba(10,14,26,0.98);backdrop-filter:blur(20px);padding:40px;transform:translateX(100%);transition:transform 0.5s var(--ease);gap:28px;border-left:1px solid var(--border);}
  .nav-links.open{transform:translateX(0);}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;background:transparent;border:none;padding:10px 0 0 0;box-shadow:none;}
  .nav-item-dropdown.open .dropdown{display:block;}
  .hamburger{display:flex;}
  .nav-right{gap:14px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:100px;
  font-family:var(--ff-mono);font-size:0.76rem;letter-spacing:1.8px;text-transform:uppercase;
  transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease),background 0.4s,color 0.4s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn-primary{background:linear-gradient(120deg,var(--teal),var(--teal-dark));color:var(--navy);font-weight:600;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(45,212,168,0.35);}
.btn-outline{border:1px solid rgba(255,255,255,0.2);color:var(--text);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light);transform:translateY(-3px);}
.btn-gold{background:linear-gradient(120deg,var(--gold-light),var(--gold));color:var(--navy);font-weight:600;}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(196,162,78,0.35);}
.magnetic{will-change:transform;}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;display:flex;align-items:center;position:relative;
  padding-top:140px;padding-bottom:80px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 25%,rgba(45,212,168,0.14),transparent 45%),
    radial-gradient(circle at 82% 70%,rgba(196,162,78,0.12),transparent 45%),
    linear-gradient(180deg,var(--navy),var(--charcoal) 140%);
}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to right,rgba(255,255,255,0.025) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(to bottom,rgba(255,255,255,0.025) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%,black 0%,transparent 70%);
}
.hero-content{position:relative;z-index:2;max-width:900px;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--teal);margin-bottom:24px;}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--teal);}
.hero h1{margin-bottom:26px;}
.split-line{display:block;overflow:hidden;}
.split-line span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform 0.9s var(--ease),opacity 0.9s var(--ease);}
.split-line.in span{transform:translateY(0);opacity:1;}
.hero h1 .accent{color:var(--teal);font-style:italic;}
.hero-sub{font-size:1.15rem;max-width:560px;margin-bottom:42px;opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease) 0.5s;}
.hero-sub.in{opacity:1;transform:translateY(0);}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease) 0.7s;}
.hero-ctas.in{opacity:1;transform:translateY(0);}
.scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-mute);z-index:2;}
.scroll-hint .line{width:1px;height:38px;background:linear-gradient(var(--teal),transparent);animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- Stats ---------- */
.stats{padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--charcoal);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;}
.stat-num{font-family:var(--ff-head);font-size:clamp(2.2rem,4vw,3.6rem);color:var(--teal);font-weight:600;}
.stat-num .suffix{color:var(--gold);}
.stat-label{margin-top:8px;color:var(--text-mute);}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px;}}

/* ---------- Section heading ---------- */
.section-head{max-width:680px;margin:0 auto 64px;text-align:center;}
.section-head .eyebrow{justify-content:center;}
.section-head::before{display:none;}
.section-head p{margin-top:18px;font-size:1.05rem;}

/* ---------- Glassmorphism cards ---------- */
.glass-card{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:40px 32px;backdrop-filter:blur(14px);position:relative;overflow:hidden;
  transition:transform 0.5s var(--ease),border-color 0.5s var(--ease),background 0.5s var(--ease);
}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);opacity:0;transition:opacity 0.5s;}
.glass-card:hover{transform:translateY(-8px);border-color:rgba(45,212,168,0.35);background:var(--glass-strong);}
.glass-card:hover::before{opacity:1;}
.card-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,rgba(45,212,168,0.16),rgba(196,162,78,0.1));display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--teal);transition:transform 0.4s var(--ease);}
.glass-card:hover .card-icon{transform:scale(1.1) rotate(-4deg);}
.card-icon svg{width:28px;height:28px;}
.glass-card h3{margin-bottom:12px;}
.glass-card p{font-size:0.95rem;}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:var(--gold-light);font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;transition:gap 0.3s;}
.glass-card:hover .card-link{gap:14px;}

.services-grid,.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:980px){.services-grid,.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.services-grid,.grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
@media(max-width:768px){.grid-2{grid-template-columns:1fr;}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(46px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);}
.reveal-scale.in{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);}
.reveal-left.in{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);}
.reveal-right.in{opacity:1;transform:translateX(0);}
.stagger .reveal:nth-child(1),.stagger .reveal-scale:nth-child(1){transition-delay:0s;}
.stagger .reveal:nth-child(2),.stagger .reveal-scale:nth-child(2){transition-delay:0.12s;}
.stagger .reveal:nth-child(3),.stagger .reveal-scale:nth-child(3){transition-delay:0.24s;}
.stagger .reveal:nth-child(4),.stagger .reveal-scale:nth-child(4){transition-delay:0.36s;}
.stagger .reveal:nth-child(5),.stagger .reveal-scale:nth-child(5){transition-delay:0.48s;}
.stagger .reveal:nth-child(6),.stagger .reveal-scale:nth-child(6){transition-delay:0.6s;}

/* ---------- Testimonials Carousel ---------- */
.carousel{position:relative;max-width:780px;margin:0 auto;text-align:center;min-height:280px;}
.carousel-track{position:relative;}
.testimonial{position:absolute;inset:0;opacity:0;transform:translateX(30px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);pointer-events:none;}
.testimonial.active{opacity:1;transform:translateX(0);position:relative;pointer-events:auto;}
.testimonial-quote{font-family:var(--ff-head);font-size:clamp(1.2rem,2.2vw,1.7rem);font-style:italic;color:var(--text);margin-bottom:28px;line-height:1.5;}
.testimonial-quote::before{content:'"';color:var(--gold);}
.testimonial-quote::after{content:'"';color:var(--gold);}
.testimonial-author{font-family:var(--ff-mono);font-size:0.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);}
.testimonial-role{color:var(--text-mute);font-size:0.85rem;margin-top:4px;}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:36px;}
.carousel-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all 0.3s;}
.carousel-dots button.active{background:var(--teal);width:26px;border-radius:5px;}

/* ---------- Partners strip ---------- */
.partners-strip{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;opacity:0.65;}
.partners-strip span,.marquee-track span{font-family:var(--ff-mono);letter-spacing:2px;font-size:0.82rem;color:var(--text-mute);text-transform:uppercase;white-space:nowrap;transition:color 0.3s;}
.marquee-track span:hover{color:var(--teal);}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;border-radius:28px;overflow:hidden;padding:80px 60px;text-align:center;
  background:linear-gradient(135deg,rgba(45,212,168,0.12),rgba(196,162,78,0.08)),var(--charcoal);
  border:1px solid var(--border);
}
.cta-banner h2{margin-bottom:18px;}
.cta-banner p{max-width:520px;margin:0 auto 36px;}
.cta-banner .btn-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.footer{background:var(--charcoal);border-top:1px solid var(--border);padding:90px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:50px;margin-bottom:60px;}
.footer-brand img{height:32px;margin-bottom:18px;}
.footer-brand p{max-width:300px;font-size:0.92rem;}
.footer h4{font-family:var(--ff-mono);font-size:0.78rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--text);margin-bottom:22px;font-weight:500;}
.footer ul li{margin-bottom:12px;}
.footer ul a{color:var(--text-dim);font-size:0.92rem;transition:color 0.3s,padding-left 0.3s;}
.footer ul a:hover{color:var(--teal);padding-left:4px;}
.footer-bottom{border-top:1px solid var(--border);padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footer-bottom p{font-size:0.82rem;color:var(--text-mute);}
.footer-bottom-links{display:flex;gap:24px;}
.footer-bottom-links a{font-size:0.82rem;color:var(--text-mute);}
.footer-bottom-links a:hover{color:var(--teal);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Timeline (about) ---------- */
.timeline{position:relative;max-width:820px;margin:0 auto;padding-left:0;}
.timeline::before{content:'';position:absolute;left:120px;top:0;bottom:0;width:1px;background:linear-gradient(var(--teal),var(--gold),transparent);}
.timeline-item{position:relative;display:grid;grid-template-columns:100px 40px 1fr;gap:0;padding-bottom:64px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-year{font-family:var(--ff-head);font-size:1.6rem;color:var(--gold);text-align:right;padding-right:20px;}
.timeline-dot-col{display:flex;justify-content:center;position:relative;}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--navy);border:2px solid var(--teal);margin-top:8px;z-index:2;transition:transform 0.4s var(--ease),background 0.4s;}
.timeline-item.in .timeline-dot{background:var(--teal);transform:scale(1.2);}
.timeline-content{padding-left:24px;}
.timeline-content h3{margin-bottom:8px;color:var(--text);}
.timeline-content p{font-size:0.94rem;}
@media(max-width:640px){
  .timeline::before{left:60px;}
  .timeline-item{grid-template-columns:60px 30px 1fr;}
  .timeline-year{font-size:1.15rem;padding-right:10px;}
}

/* ---------- Values ---------- */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:980px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr;}}

/* ---------- Parallax hero (about) ---------- */
.parallax-hero{min-height:70vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:140px;}
.parallax-layer{position:absolute;inset:-10%;z-index:0;will-change:transform;}
.parallax-layer.l1{background:radial-gradient(circle at 30% 30%,rgba(45,212,168,0.16),transparent 50%);}
.parallax-layer.l2{background:radial-gradient(circle at 75% 65%,rgba(196,162,78,0.13),transparent 50%);}

/* ---------- Page hero (generic, sub-pages) ---------- */
.page-hero{padding-top:160px;padding-bottom:80px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy),var(--charcoal) 160%);}
.page-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(45,212,168,0.14),transparent 55%);animation:pageHeroGlow 8s ease-in-out infinite;}
@keyframes pageHeroGlow{0%,100%{opacity:0.75;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
.page-hero .container{animation:pageHeroIn 0.9s var(--ease) both;filter:blur(6px);opacity:0;}
@keyframes pageHeroIn{from{filter:blur(6px);opacity:0;transform:translateY(20px);}to{filter:blur(0);opacity:1;transform:translateY(0);}}
.breadcrumb{display:flex;gap:10px;align-items:center;color:var(--text-mute);font-family:var(--ff-mono);font-size:0.76rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px;}
.breadcrumb a{color:var(--text-mute);transition:color 0.3s;}
.breadcrumb a:hover{color:var(--teal);}

/* ---------- Feature list rows (service detail pages) ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:70px 0;border-bottom:1px solid var(--border);}
.feature-row:last-child{border-bottom:none;}
.feature-row.reverse{direction:rtl;}
.feature-row.reverse>*{direction:ltr;}
.feature-visual{aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(150deg,var(--charcoal-2),var(--charcoal));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.feature-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(45,212,168,0.16),transparent 55%);}
.feature-visual svg{width:38%;color:var(--teal);position:relative;z-index:1;}
.feature-num{font-family:var(--ff-head);font-size:1rem;color:var(--gold);margin-bottom:14px;display:block;}
.feature-list{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.feature-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text-dim);font-size:0.95rem;}
.feature-list li svg{width:18px;height:18px;color:var(--teal);flex-shrink:0;margin-top:2px;}
@media(max-width:900px){.feature-row{grid-template-columns:1fr;gap:36px;}.feature-row.reverse{direction:ltr;}}

/* ---------- Forms (contact) ---------- */
.form-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:start;}
@media(max-width:900px){.form-grid{grid-template-columns:1fr;}}
.form-group{margin-bottom:24px;}
.form-group label{display:block;font-family:var(--ff-mono);font-size:0.74rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mute);margin-bottom:10px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:15px 18px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:0.95rem;transition:border-color 0.3s,background 0.3s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--teal);background:rgba(45,212,168,0.05);}
.form-group textarea{resize:vertical;min-height:130px;}
.form-group select{appearance:none;cursor:url("../img/cursor-pointer.svg") 16 16,pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232dd4a8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;}
.form-note{font-size:0.82rem;color:var(--text-mute);margin-top:-10px;margin-bottom:20px;}
.contact-info-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:36px;margin-bottom:24px;}
.contact-info-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;}
.contact-info-row:last-child{margin-bottom:0;}
.contact-info-row svg{width:22px;height:22px;color:var(--teal);flex-shrink:0;margin-top:2px;}
.contact-info-row h4{font-size:0.95rem;color:var(--text);margin-bottom:4px;font-family:var(--ff-body);font-weight:600;}
.contact-info-row p{font-size:0.9rem;}
.map-placeholder{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(150deg,var(--charcoal-2),var(--charcoal));border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-mute);position:relative;overflow:hidden;}
.map-placeholder::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(45,212,168,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,168,0.06) 1px,transparent 1px);background-size:30px 30px;}
.map-placeholder svg{width:40px;height:40px;color:var(--teal);position:relative;z-index:1;}
.map-placeholder span{position:relative;z-index:1;font-family:var(--ff-mono);font-size:0.78rem;letter-spacing:1.5px;text-transform:uppercase;}
.map-embed{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);border-top:3px solid var(--gold);background:var(--charcoal);box-shadow:var(--shadow);}
.map-embed iframe{display:block;width:100%;height:450px;filter:saturate(0.9) contrast(1.05);}
.form-success{display:none;text-align:center;padding:60px 20px;}
.form-success.show{display:block;}
.form-success svg{width:60px;height:60px;color:var(--teal);margin:0 auto 20px;}

/* ---------- Careers ---------- */
.job-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:36px;margin-bottom:24px;transition:border-color 0.4s,transform 0.4s;}
.job-card:hover{border-color:rgba(45,212,168,0.3);transform:translateY(-4px);}
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px;}
.job-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.job-tag{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--text-mute);}
.job-tag.teal{color:var(--teal);border-color:rgba(45,212,168,0.3);}
.job-tag.gold{color:var(--gold-light);border-color:rgba(196,162,78,0.3);}
.job-desc{margin:18px 0;}
.job-reqs{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.job-reqs li{display:flex;gap:10px;font-size:0.9rem;color:var(--text-dim);align-items:flex-start;}
.job-reqs li::before{content:'—';color:var(--gold);flex-shrink:0;}

/* ---------- Legal pages ---------- */
.legal-content{max-width:780px;margin:0 auto;}
.legal-content h2{margin-top:52px;margin-bottom:18px;font-size:1.7rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p,.legal-content li{color:var(--text-dim);margin-bottom:14px;font-size:0.98rem;}
.legal-content ul{padding-left:22px;list-style:disc;}
.legal-content ul li::marker{color:var(--teal);}
.legal-updated{font-family:var(--ff-mono);font-size:0.78rem;color:var(--text-mute);letter-spacing:1px;margin-bottom:40px;display:block;}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;bottom:24px;left:24px;right:24px;max-width:560px;margin:0 auto;
  background:rgba(18,20,31,0.97);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 28px;z-index:9990;backdrop-filter:blur(20px);box-shadow:var(--shadow);
  transform:translateY(140%);transition:transform 0.6s var(--ease);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:0.88rem;margin-bottom:18px;}
.cookie-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cookie-actions .btn{padding:10px 22px;font-size:0.7rem;}

/* ---------- Misc ---------- */
.text-center{text-align:center;}
.mt-40{margin-top:40px;}
.badge-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;border:1px solid var(--border);font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.badge svg{width:14px;height:14px;color:var(--gold);}

.divider{height:1px;background:var(--border);margin:0;}

::selection{background:rgba(45,212,168,0.3);color:var(--text);}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--charcoal-2);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--teal-dark);}

/* ============================================================
   MAXIMUM ANIMATION SYSTEM — ADDITIVE LAYER
   Animated gradients, 3D tilt, marquee, glow, rotating borders,
   blur reveal, stagger wave, ripple, parallax, cursor trail, dividers
   ============================================================ */

/* ---------- 1. Animated gradient background on body ---------- */
body{
  background:
    radial-gradient(circle at 15% 20%,rgba(45,212,168,0.05),transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(196,162,78,0.05),transparent 40%),
    linear-gradient(120deg,#0a0e1a,#0d1220,#0a0e1a,#101526,#0a0e1a);
  background-size:200% 200%,200% 200%,300% 300%;
  animation:bgDrift 26s ease-in-out infinite;
}
@keyframes bgDrift{
  0%{background-position:0% 0%,100% 100%,0% 50%;}
  50%{background-position:30% 20%,70% 80%,100% 50%;}
  100%{background-position:0% 0%,100% 100%,0% 50%;}
}
@media(prefers-reduced-motion:reduce){
  body{animation:none;}
}

/* ---------- 2. Text glow effect on headings hover ---------- */
h1,h2,h3,h4{transition:text-shadow 0.5s var(--ease),color 0.4s var(--ease);}
h1:hover,h2:hover,h3:hover,h4:hover{
  text-shadow:0 0 12px rgba(45,212,168,0.45),0 0 30px rgba(45,212,168,0.2);
}

/* ---------- 3. 3D card tilt (JS sets --rx/--ry/--tz custom props) ---------- */
.glass-card,.feature-visual,.job-card{
  perspective:1000px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(var(--tz,0));
  transition:transform 0.5s var(--ease),border-color 0.5s var(--ease),background 0.5s var(--ease),box-shadow 0.5s var(--ease);
}
.glass-card.tilting,.feature-visual.tilting,.job-card.tilting{transition:transform 0.08s linear;}

/* ---------- 4. Clip-path reveal on scroll ---------- */
.clip-reveal{
  clip-path:inset(0 100% 0 0);
  opacity:0;
  transition:clip-path 1s var(--ease),opacity 0.6s var(--ease);
}
.clip-reveal.in{clip-path:inset(0 0 0 0);opacity:1;}

/* ---------- 5. Marquee / ticker ---------- */
.marquee{
  overflow:hidden;position:relative;width:100%;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.marquee-track{display:flex;align-items:center;gap:60px;width:max-content;animation:marqueeScroll 26s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track span{flex-shrink:0;}

/* ---------- 6. Nav link underline grows from center ---------- */
.nav-links a::after{left:50%;width:0;transform:translateX(-50%);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;left:50%;transform:translateX(-50%);}

/* ---------- 7. Pulse animation on CTA buttons ---------- */
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(45,212,168,0.0);}
  92%{box-shadow:0 0 0 0 rgba(45,212,168,0.0);}
  96%{box-shadow:0 0 0 10px rgba(45,212,168,0.14);}
}
.btn-primary,.btn-gold{animation:ctaPulse 3s ease-in-out infinite,ctaScale 3s ease-in-out infinite;}
@keyframes ctaScale{0%,100%{transform:scale(1);}95%{transform:scale(1.035);}}
.btn-primary:hover,.btn-gold:hover{animation-play-state:paused;}

/* ---------- 8. Floating/bobbing animation on icons ---------- */
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.card-icon{animation:iconFloat 4.2s ease-in-out infinite;}
.services-grid .glass-card:nth-child(2) .card-icon,.grid-3 .glass-card:nth-child(2) .card-icon{animation-delay:0.3s;}
.services-grid .glass-card:nth-child(3) .card-icon,.grid-3 .glass-card:nth-child(3) .card-icon{animation-delay:0.6s;}
.services-grid .glass-card:nth-child(4) .card-icon,.grid-3 .glass-card:nth-child(4) .card-icon{animation-delay:0.9s;}
.services-grid .glass-card:nth-child(5) .card-icon,.grid-3 .glass-card:nth-child(5) .card-icon{animation-delay:1.2s;}
.services-grid .glass-card:nth-child(6) .card-icon,.grid-3 .glass-card:nth-child(6) .card-icon{animation-delay:1.5s;}
.glass-card:hover .card-icon{animation-play-state:paused;}
.feature-visual svg{animation:iconFloat 5s ease-in-out infinite;}
.contact-info-row svg{animation:iconFloat 4s ease-in-out infinite;}

/* ---------- 9. Rotating gradient border on cards ---------- */
.glass-card,.job-card{position:relative;}
.glass-card::after,.job-card::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from 0deg,transparent,rgba(45,212,168,0.7),transparent 30%);
  -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 0.5s var(--ease);pointer-events:none;
  animation:borderRotate 4s linear infinite;
  z-index:0;
}
.glass-card:hover::after,.job-card:hover::after{opacity:1;}
@keyframes borderRotate{to{--border-angle:360deg;}}
@property --border-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@supports (background:conic-gradient(from var(--border-angle),red,blue)){
  .glass-card::after,.job-card::after{background:conic-gradient(from var(--border-angle),transparent,rgba(45,212,168,0.7),transparent 30%);}
}

/* ---------- 10. Blur-to-sharp reveal ---------- */
.blur-reveal{filter:blur(10px);opacity:0;transform:translateY(24px);transition:filter 1s var(--ease),opacity 1s var(--ease),transform 1s var(--ease);}
.blur-reveal.in{filter:blur(0);opacity:1;transform:translateY(0);}

/* ---------- 11. Stagger wave animation ---------- */
.wave-stagger .stat-num,.wave-stagger .feature-list li{
  opacity:0;transform:translateY(20px) scale(0.9);
  transition:opacity 0.7s cubic-bezier(0.34,1.56,0.64,1),transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.wave-stagger.in .stat-num,.wave-stagger.in .feature-list li{opacity:1;transform:translateY(0) scale(1);}
.stats-grid>div:nth-child(1) .stat-num{transition-delay:0s;}
.stats-grid>div:nth-child(2) .stat-num{transition-delay:0.1s;}
.stats-grid>div:nth-child(3) .stat-num{transition-delay:0.2s;}
.stats-grid>div:nth-child(4) .stat-num{transition-delay:0.3s;}
.feature-list li:nth-child(1){transition-delay:0s;}
.feature-list li:nth-child(2){transition-delay:0.08s;}
.feature-list li:nth-child(3){transition-delay:0.16s;}
.feature-list li:nth-child(4){transition-delay:0.24s;}
.feature-list li:nth-child(5){transition-delay:0.32s;}

/* ---------- 12. Typewriter effect ---------- */
.typewriter{display:inline-block;}
.typewriter .tw-cursor{display:inline-block;width:2px;background:var(--teal);margin-left:2px;animation:twBlink 0.85s step-end infinite;}
@keyframes twBlink{0%,50%{opacity:1;}51%,100%{opacity:0;}}

/* ---------- 13. Smooth background tint shift on scroll (JS sets body[data-tint]) ---------- */
body{transition:background-color 1.2s var(--ease);}

/* ---------- 14. Card hover lift (enhanced) ---------- */
.glass-card:hover,.job-card:hover{box-shadow:0 30px 70px rgba(0,0,0,0.5),0 0 40px rgba(45,212,168,0.08);}
.feature-visual{transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease);}
.feature-visual:hover{box-shadow:0 30px 70px rgba(0,0,0,0.5),0 0 40px rgba(45,212,168,0.1);}

/* ---------- 15. Ripple effect on buttons ---------- */
.btn{isolation:isolate;}
.btn .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,0.5);
  transform:scale(0);opacity:0.6;pointer-events:none;
  animation:rippleExpand 0.65s var(--ease) forwards;
  z-index:0;
}
@keyframes rippleExpand{to{transform:scale(2.6);opacity:0;}}

/* ---------- 16. Counter acceleration handled in JS (ease-out already) — visual pop ---------- */
[data-counter]{display:inline-block;}
.stat-num.counting{animation:counterPop 0.4s var(--ease);}
@keyframes counterPop{0%{transform:scale(1);}50%{transform:scale(1.06);}100%{transform:scale(1);}}

/* ---------- 17. Parallax layers (extended, JS reads data-speed) ---------- */
.hero-content,.hero-bg,.hero-bg::after{will-change:transform;}
[data-speed]{will-change:transform;}

/* ---------- 18. Elastic bounce reveal ---------- */
.reveal-bounce{opacity:0;transform:translateY(50px) scale(0.9);transition:opacity 0.8s cubic-bezier(0.34,1.56,0.64,1),transform 0.8s cubic-bezier(0.34,1.56,0.64,1);}
.reveal-bounce.in{opacity:1;transform:translateY(0) scale(1);}

/* ---------- 19. Cursor trail ---------- */
.cursor-trail-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,168,0.8),rgba(196,162,78,0.2));
  pointer-events:none;z-index:9996;transform:translate(-50%,-50%);
  opacity:0.7;transition:opacity 0.5s linear,transform 0.5s linear;
}
@media(max-width:900px){.cursor-trail-dot{display:none;}}

/* ---------- 20. Animated SVG section dividers ---------- */
.section-divider{position:relative;width:100%;height:70px;overflow:hidden;line-height:0;}
.section-divider svg{width:100%;height:100%;display:block;}
.section-divider .divider-path{animation:dividerFlow 8s ease-in-out infinite;}
@keyframes dividerFlow{
  0%,100%{d:path("M0,40 C300,10 900,70 1440,40 L1440,80 L0,80 Z");}
  50%{d:path("M0,40 C300,70 900,10 1440,40 L1440,80 L0,80 Z");}
}
.section-divider .divider-line{stroke-dasharray:8 6;animation:dividerDash 6s linear infinite;}
@keyframes dividerDash{to{stroke-dashoffset:-140;}}

/* ============================================================
   EVEN MORE ANIMATIONS — SECOND ADDITIVE LAYER
   Morph SVG, horizontal scroll, slot-machine numbers, letter reveal,
   image zoom, skew-on-scroll, progress circles, accordion, orbit rings,
   flipbook, glitch text, neon pulse, scroll-snap, curtain reveal,
   mouse-reactive background
   ============================================================ */

/* ---------- 21. Morphing SVG shapes (hero background) ---------- */
.morph-shapes{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.9;}
.morph-shapes svg{width:100%;height:100%;}
.morph-path-1{animation:morph1 14s ease-in-out infinite;}
.morph-path-2{animation:morph2 18s ease-in-out infinite;animation-delay:-4s;}
.morph-path-3{animation:morph3 22s ease-in-out infinite;animation-delay:-9s;}
@keyframes morph1{
  0%,100%{d:path("M120,220 C60,180 60,90 140,60 C220,30 320,60 340,140 C360,220 300,300 220,300 C160,300 160,250 120,220 Z");}
  33%{d:path("M100,200 C50,140 90,60 170,50 C250,40 330,100 330,170 C330,240 260,290 190,280 C130,272 140,250 100,200 Z");}
  66%{d:path("M140,240 C70,220 50,120 130,70 C210,20 340,50 350,130 C360,210 320,290 240,300 C170,309 200,258 140,240 Z");}
}
@keyframes morph2{
  0%,100%{d:path("M700,400 C640,340 660,240 750,220 C840,200 920,270 910,350 C900,430 820,470 750,460 C700,453 750,450 700,400 Z");}
  50%{d:path("M680,380 C610,330 650,230 740,210 C850,186 930,290 900,370 C875,438 800,480 730,450 C680,428 730,420 680,380 Z");}
}
@keyframes morph3{
  0%,100%{d:path("M420,480 C380,440 390,380 440,360 C500,338 560,380 560,430 C560,480 510,510 460,500 C430,494 450,510 420,480 Z");}
  50%{d:path("M440,460 C390,430 410,370 460,355 C520,338 570,390 560,440 C552,485 500,500 460,490 C435,483 460,480 440,460 Z");}
}
@media(prefers-reduced-motion:reduce){.morph-path-1,.morph-path-2,.morph-path-3{animation:none;}}

/* ---------- 22. Horizontal scroll section ---------- */
.hscroll-section{overflow:hidden;padding:120px 0;}
.hscroll-viewport{overflow:visible;}
.hscroll-track{display:flex;gap:28px;will-change:transform;padding:0 32px;}
.hscroll-card{flex:0 0 320px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:36px 30px;backdrop-filter:blur(14px);}
.hscroll-card h3{margin-bottom:12px;}
.hscroll-card .feature-num{margin-bottom:10px;}
.hscroll-hint{display:flex;align-items:center;gap:10px;color:var(--text-mute);margin-top:36px;justify-content:center;}
.hscroll-hint svg{width:16px;height:16px;animation:hscrollArrow 1.6s ease-in-out infinite;}
@keyframes hscrollArrow{0%,100%{transform:translateX(0);opacity:0.5;}50%{transform:translateX(6px);opacity:1;}}

/* ---------- 23. Number slot-machine effect ---------- */
.slot-num{display:inline-flex;overflow:hidden;vertical-align:bottom;height:1.1em;}
.slot-digit{display:inline-flex;flex-direction:column;transition:transform 1.1s cubic-bezier(0.16,1,0.3,1);will-change:transform;}
.slot-digit span{display:block;height:1.1em;line-height:1.1em;}
.slot-suffix{display:inline-block;}

/* ---------- 24. Staggered letter reveal on ALL headings ---------- */
.letter-reveal{display:inline-block;}
.letter-reveal .lr-char{display:inline-block;opacity:0;transform:translateY(0.6em) rotate(6deg);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);}
.letter-reveal.in .lr-char{opacity:1;transform:translateY(0) rotate(0deg);}

/* ---------- 25. Hover image zoom (overflow hidden) ---------- */
.img-zoom{overflow:hidden;border-radius:var(--radius);}
.img-zoom img,.img-zoom svg{transition:transform 0.7s var(--ease);}
.img-zoom:hover img,.img-zoom:hover svg{transform:scale(1.12);}
.feature-visual{overflow:hidden;}
.feature-visual svg{transition:transform 0.7s var(--ease),filter 0.7s var(--ease);}
.feature-visual:hover svg{transform:scale(1.14) rotate(2deg);}
.glass-card{overflow:hidden;}
.glass-card .card-icon{overflow:hidden;}

/* ---------- 26. Skew/tilt on scroll enter ---------- */
.skew-in{opacity:0;transform:skewY(4deg) translateY(60px) scale(0.97);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);}
.skew-in.in{opacity:1;transform:skewY(0) translateY(0) scale(1);}

/* ---------- 27. Progress circles (SVG stroke-dashoffset) ---------- */
.progress-circle{position:relative;width:150px;height:150px;margin:0 auto;}
.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg);}
.progress-circle .pc-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:6;}
.progress-circle .pc-bar{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-dasharray:439.8;stroke-dashoffset:439.8;transition:stroke-dashoffset 1.8s var(--ease);}
.progress-circle.in .pc-bar{stroke-dashoffset:var(--pc-offset,0);}
.progress-circle .pc-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.progress-circle .pc-value{font-family:var(--ff-head);font-size:1.9rem;color:var(--gold);font-weight:600;}
.progress-circle .pc-caption{margin-top:6px;color:var(--text-mute);text-align:center;}

/* ---------- 28. Accordion / expand animation (FAQ) ---------- */
.accordion{max-width:820px;margin:0 auto;}
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-item:first-child{border-top:1px solid var(--border);}
.accordion-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 4px;cursor:url("../img/cursor-pointer.svg") 16 16,pointer;}
.accordion-head h3{font-size:1.1rem;color:var(--text);transition:color 0.3s;}
.accordion-item.open .accordion-head h3{color:var(--teal);}
.accordion-icon{width:22px;height:22px;flex-shrink:0;position:relative;}
.accordion-icon::before,.accordion-icon::after{content:'';position:absolute;top:50%;left:50%;background:var(--teal);transform:translate(-50%,-50%);transition:transform 0.4s var(--ease);}
.accordion-icon::before{width:14px;height:2px;}
.accordion-icon::after{width:2px;height:14px;}
.accordion-item.open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease);}
.accordion-body-inner{padding:0 4px 26px;}
.accordion-body-inner p{font-size:0.95rem;}

/* ---------- 29. Orbiting dots around decorative headings ---------- */
.orbit-wrap{position:relative;display:inline-block;}
.orbit-ring{position:absolute;top:50%;left:50%;border:1px dashed rgba(45,212,168,0.25);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:orbitSpin 18s linear infinite;}
.orbit-ring.r1{width:120%;height:340%;}
.orbit-ring.r2{width:150%;height:420%;border-color:rgba(196,162,78,0.2);animation-duration:26s;animation-direction:reverse;}
.orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(45,212,168,0.8);top:0;left:50%;transform:translate(-50%,-50%);}
.orbit-ring.r2 .orbit-dot{background:var(--gold);box-shadow:0 0 10px rgba(196,162,78,0.8);}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.orbit-ring{animation:none;}}

/* ---------- 30. Flipbook / scroll-linked frame stepping ---------- */
.flipbook{position:relative;height:70px;overflow:hidden;}
.flipbook-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity 0.25s linear,transform 0.25s linear;}
.flipbook-frame.fb-active{opacity:1;transform:translateY(0);}
.flipbook-frame span{font-family:var(--ff-mono);letter-spacing:3px;text-transform:uppercase;color:var(--teal);font-size:0.85rem;}

/* ---------- 31. Glitch text effect on heading hover ---------- */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{content:attr(data-glitch);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
.glitch:hover::before{opacity:0.75;color:var(--teal);transform:translate(0,0);animation:glitchTop 0.35s steps(2,end) 1;clip-path:inset(0 0 55% 0);}
.glitch:hover::after{opacity:0.75;color:#e0507a;transform:translate(0,0);animation:glitchBottom 0.35s steps(2,end) 1;clip-path:inset(55% 0 0 0);}
@keyframes glitchTop{0%{transform:translate(0,0);}20%{transform:translate(-3px,-2px);}40%{transform:translate(3px,1px);}60%{transform:translate(-2px,1px);}80%{transform:translate(2px,-1px);}100%{transform:translate(0,0);}}
@keyframes glitchBottom{0%{transform:translate(0,0);}20%{transform:translate(3px,2px);}40%{transform:translate(-3px,-1px);}60%{transform:translate(2px,-1px);}80%{transform:translate(-2px,1px);}100%{transform:translate(0,0);}}

/* ---------- 32. Neon glow pulse on teal accents ---------- */
@keyframes neonBreathe{
  0%,100%{filter:drop-shadow(0 0 2px rgba(45,212,168,0.5)) drop-shadow(0 0 6px rgba(45,212,168,0.25));}
  50%{filter:drop-shadow(0 0 8px rgba(45,212,168,0.9)) drop-shadow(0 0 22px rgba(45,212,168,0.5));}
}
.neon-pulse{animation:neonBreathe 3.2s ease-in-out infinite;}
.eyebrow::before{animation:neonBreatheLine 3.2s ease-in-out infinite;}
@keyframes neonBreatheLine{
  0%,100%{box-shadow:0 0 3px rgba(45,212,168,0.5);}
  50%{box-shadow:0 0 10px rgba(45,212,168,0.95);}
}
.badge{transition:box-shadow 0.4s;}
.badge:hover{box-shadow:0 0 0 1px rgba(45,212,168,0.4),0 0 16px rgba(45,212,168,0.35);}

/* ---------- 33. Smooth scroll snap on major sections ---------- */
.snap-scroll{scroll-snap-type:y proximity;}
.snap-scroll section{scroll-snap-align:start;}
@media(max-width:900px){.snap-scroll{scroll-snap-type:none;}}

/* ---------- 34. Entrance curtain reveal ---------- */
.curtain{position:fixed;inset:0;z-index:100000;display:flex;pointer-events:none;}
.curtain-panel{flex:1;background:var(--navy);position:relative;overflow:hidden;}
.curtain-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(45,212,168,0.08),transparent 60%);}
.curtain-panel.left{transform:translateX(0);transition:transform 0.9s var(--ease) 0.15s;}
.curtain-panel.right{transform:translateX(0);transition:transform 0.9s var(--ease) 0.15s;}
.curtain.open .curtain-panel.left{transform:translateX(-101%);}
.curtain.open .curtain-panel.right{transform:translateX(101%);}
.curtain.done{display:none;}

/* ---------- 35. Mouse-reactive background spot (hero) ---------- */
.mouse-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.8;
  background:radial-gradient(circle 420px at var(--mx,50%) var(--my,30%),rgba(45,212,168,0.16),transparent 70%);
  transition:background 0.15s linear;}

/* ---------- 36. Skew/tilt helper also used for services & value cards ---------- */
.skew-in.reveal-scale{transform:skewY(4deg) translateY(60px) scale(0.9);}
.skew-in.reveal-scale.in{transform:skewY(0) translateY(0) scale(1);}

/* ---------- Reduced motion accessibility override ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}
}