:root {
  --bg-base:        #f5f8ff;
  --bg-surface:     #eef3ff;
  --bg-card:        rgba(255,255,255,0.88);
  --bg-card-hover:  rgba(255,255,255,1);
  --bg-glass:       rgba(255,255,255,0.70);
  --primary:        #1C31A0;
  --primary-mid:    #1a5cb0;
  --primary-light:  #2e6fd4;
  --accent-green:   #00C781;
  --accent-teal:    #00a86b;
  --accent-glow:    rgba(0,199,129,0.18);
  --primary-glow:   rgba(28,49,160,0.12);
  --text-primary:   #1a1f3c;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-light:     #a0aec0;
  --border:         rgba(28,49,160,0.10);
  --border-strong:  rgba(28,49,160,0.18);
  --border-green:   rgba(0,199,129,0.25);
  --gradient-brand: linear-gradient(135deg,#1C31A0 0%,#1a5cb0 45%,#00C781 100%);
  --gradient-text:  linear-gradient(135deg,#1C31A0 0%,#1a8fd0 50%,#00C781 100%);
  --gradient-bg:    linear-gradient(145deg,#dce8f8 0%,#f5f8ff 35%,#f5f8ff 65%,#d4f0e6 100%);
  --gradient-green: linear-gradient(135deg,#00C781,#00a86b);
  --shadow-sm:      0 2px 8px rgba(28,49,160,0.08);
  --shadow-md:      0 4px 20px rgba(28,49,160,0.10);
  --shadow-lg:      0 8px 40px rgba(28,49,160,0.14);
  --shadow-glow-g:  0 0 40px rgba(0,199,129,0.20);
  --shadow-glow-b:  0 0 40px rgba(28,49,160,0.15);
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --space-xs:       8px;
  --space-sm:       16px;
  --space-md:       24px;
  --space-lg:       48px;
  --space-xl:       80px;
  --space-2xl:      120px;
  --container:      1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--gradient-bg);
  background-attachment:fixed;
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-md)}

/* ── Background orbs ── */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px)}
.bg-orb-1{width:700px;height:700px;top:-200px;left:-200px;background:radial-gradient(circle,rgba(28,49,160,0.12) 0%,transparent 70%);animation:orb-drift 12s ease-in-out infinite}
.bg-orb-2{width:600px;height:600px;bottom:-150px;right:-150px;background:radial-gradient(circle,rgba(0,199,129,0.12) 0%,transparent 70%);animation:orb-drift 15s ease-in-out infinite reverse}
.bg-orb-3{width:400px;height:400px;top:50%;left:55%;background:radial-gradient(circle,rgba(0,168,107,0.07) 0%,transparent 70%);animation:orb-drift 18s ease-in-out infinite}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-25px,20px) scale(0.95)}}

/* ── Utilities ── */
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px;border:1px solid var(--border-strong);background:rgba(28,49,160,0.08);color:var(--primary)}
.badge.green{background:rgba(0,199,129,0.10);border-color:var(--border-green);color:var(--accent-teal)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;padding:13px 28px;border-radius:100px;border:none;cursor:pointer;transition:all .28s ease;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:0 4px 20px rgba(28,49,160,0.30)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(28,49,160,0.40)}
.btn-outline{background:#fff;color:var(--primary);border:1.5px solid var(--border-strong)}
.btn-outline:hover{background:rgba(28,49,160,0.06);border-color:var(--primary)}
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-green);margin-bottom:var(--space-sm)}
.section-label::before{content:'';width:20px;height:2px;background:var(--gradient-green);border-radius:2px}
.divider-line{height:3px;width:64px;background:var(--gradient-brand);border-radius:3px;margin:var(--space-sm) 0}

/* ── Gradient strip ── */
.feather-banner{background:var(--gradient-brand);height:6px;background-size:200% 100%;animation:gradient-shift 4s ease infinite}
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── Section base ── */
.section{padding:var(--space-2xl) 0;position:relative;z-index:1}
.section-alt{background:rgba(255,255,255,0.55);backdrop-filter:blur(8px)}
.section-header{max-width:720px;margin:0 auto var(--space-xl);text-align:center}
.section-title{font-size:clamp(30px,3.8vw,50px);font-weight:800;line-height:1.12;letter-spacing:-.035em;color:var(--text-primary);margin-bottom:var(--space-sm)}
.section-body{font-size:17px;color:var(--text-secondary);line-height:1.75;margin-top:14px}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:var(--space-xl) 0}
.hero-grid{display:grid;grid-template-columns:52% 48%;gap:var(--space-xl);align-items:center;position:relative;z-index:1}
.hero-badge-row{display:flex;gap:10px;margin-bottom:var(--space-md);flex-wrap:wrap}
.hero-eyebrow{font-size:18px;font-weight:700;color:var(--text-muted);margin-bottom:var(--space-sm)}
.hero-headline{font-size:clamp(38px,5vw,66px);font-weight:900;line-height:1.08;letter-spacing:-.04em;color:var(--text-primary);margin-bottom:var(--space-md)}
.hero-sub{font-size:clamp(18px,2.2vw,22px);font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm)}
.hero-punchline{font-size:17px;color:var(--text-muted);font-weight:700;margin-bottom:var(--space-lg)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Hero visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:620px;overflow:visible;padding:0}
.hero-character-wrap{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%}
.hero-character-img{max-height:680px;width:auto;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 30px 50px rgba(28,49,160,0.18)) drop-shadow(0 8px 16px rgba(0,0,0,0.10));animation:character-float 6s ease-in-out infinite;position:relative;z-index:2}
@keyframes character-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-visual-glow{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:320px;height:120px;background:radial-gradient(ellipse,rgba(0,199,129,0.18) 0%,transparent 70%);filter:blur(30px);z-index:1;pointer-events:none}
.float-chip{position:absolute;background:rgba(255,255,255,0.97);border:1.5px solid var(--border-strong);border-radius:100px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px;box-shadow:0 4px 18px rgba(28,49,160,0.12);white-space:nowrap;z-index:10;backdrop-filter:blur(8px)}
.float-chip-1{left:-60px;top:32%;animation:chip-float1 4s ease-in-out infinite}
.float-chip-2{right:-20px;top:54%;animation:chip-float2 4s ease-in-out infinite 1.4s}
.float-chip-3{right:-20px;top:68%;animation:chip-float3 4s ease-in-out infinite 2.6s}
.chip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.chip-dot.green{background:var(--accent-green);box-shadow:0 0 8px rgba(0,199,129,.6)}
.chip-dot.blue{background:var(--primary);box-shadow:0 0 8px rgba(28,49,160,.4)}
@keyframes chip-float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes chip-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes chip-float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── Marquee ── */
.marquee-section{padding:18px 0;background:rgba(255,255,255,0.70);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;backdrop-filter:blur(10px)}
.marquee-track{display:flex;gap:var(--space-xl);animation:marquee 22s linear infinite;width:max-content}
.marquee-item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-secondary);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.marquee-dot{width:6px;height:6px;border-radius:50%;background:var(--gradient-brand);flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Sound Familiar ── */
.sound-familiar-img{width:100%;max-width:900px;display:block;margin:0 auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-glow-b);border:1px solid var(--border)}

/* ── Here's the Deal ── */
.deal-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start}
.deal-body{font-size:17px;color:var(--text-secondary);line-height:1.75;margin-bottom:var(--space-lg)}
.changes-label{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md)}
.change-list{display:flex;flex-direction:column;gap:14px}
.change-item{display:flex;align-items:flex-start;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;font-size:15px;line-height:1.55;color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:all .3s}
.change-item:hover{border-color:var(--border-green);box-shadow:var(--shadow-md),var(--shadow-glow-g);transform:translateX(5px)}
.change-dot{width:10px;height:10px;border-radius:50%;background:var(--gradient-green);flex-shrink:0;margin-top:5px;box-shadow:0 0 8px rgba(0,199,129,.5)}

/* ── Technical Stuff ── */
.tech-quote{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.1;letter-spacing:-.04em;color:var(--text-primary);margin-bottom:var(--space-sm)}
.tech-intro{font-size:20px;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-lg)}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:var(--space-lg)}
.tech-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-sm);text-align:center;transition:all .35s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}
.tech-item::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient-brand);transform:scaleX(0);transition:transform .35s;transform-origin:left}
.tech-item:hover{transform:translateY(-6px);border-color:var(--border-green);box-shadow:var(--shadow-lg),var(--shadow-glow-g)}
.tech-item:hover::before{transform:scaleX(1)}
.tech-icon{font-size:28px;margin-bottom:10px;display:block}
.tech-item h3{font-size:14px;font-weight:700;color:var(--text-primary)}
.tech-closing{font-size:20px;color:var(--text-secondary);line-height:1.75;max-width:760px;margin:0 auto;text-align:center;padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* ── Why Teams ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
.why-quote-block{padding:var(--space-lg);background:linear-gradient(145deg,rgba(28,49,160,0.06),rgba(0,199,129,0.06));border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.why-quote{font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.45;color:var(--text-primary);margin-bottom:var(--space-md);position:relative;padding-left:var(--space-md)}
.why-quote::before{content:'"';position:absolute;top:-10px;left:-4px;font-size:60px;color:var(--accent-green);line-height:1;font-weight:900;opacity:.6}
.why-answer{font-size:17px;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; text-align:left; padding-left:25px;}
.why-content{display:flex;flex-direction:column;gap:var(--space-sm)}
.why-reason{display:flex;align-items:flex-start;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px var(--space-md);box-shadow:var(--shadow-sm);transition:all .3s}
.why-reason:hover{border-color:var(--border-green);box-shadow:var(--shadow-md),0 0 20px rgba(0,199,129,0.10);transform:translateX(4px)}
.why-reason-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.why-reason h4{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.why-reason p{font-size:14px;color:var(--text-secondary);line-height:1.55}

/* ── Customize ── */
.customize-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.customize-col{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-md);transition:all .35s cubic-bezier(0.34,1.56,0.64,1)}
.customize-col:hover{border-color:var(--border-green);box-shadow:var(--shadow-lg),var(--shadow-glow-g);transform:translateY(-4px)}
.customize-col-icon{font-size:40px;margin-bottom:var(--space-sm);display:block}
.customize-col h3{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:12px}
.customize-col p{font-size:16px;color:var(--text-secondary);line-height:1.7}

/* ── Before / After ── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start}
.ba-col-header{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:10px 20px;border-radius:100px;margin-bottom:var(--space-md);display:inline-flex;align-items:center;gap:8px}
.ba-col-header.before{background:rgba(239,68,68,0.10);color:#dc2626;border:1px solid rgba(239,68,68,0.25)}
.ba-col-header.after{background:rgba(0,199,129,0.10);color:var(--accent-teal);border:1px solid var(--border-green)}
.ba-list{display:flex;flex-direction:column;gap:12px}
.ba-item{display:flex;align-items:flex-start;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;font-size:14px;line-height:1.5;color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:all .3s}
.ba-item:hover{transform:translateX(4px);border-color:var(--border-green)}
.ba-item svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.ba-item.before svg{color:#dc2626}
.ba-item.after svg{color:var(--accent-green)}

/* ── CTA ── */
.cta-section{padding:var(--space-2xl) 0;position:relative;overflow:hidden;background:var(--gradient-brand)}
.cta-section::before,
.footer-imgBG-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(255,255,255,0.10) 0%,transparent 60%)}
.cta-section::after,
.footer-imgBG-inner::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.08) 0%,transparent 60%)}
.cta-inner{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto}
.cta-pretitle{font-size:16px;font-weight:600;color:rgba(255,255,255,0.75);margin-bottom:var(--space-sm)}
.cta-title{font-size:clamp(34px,5vw,58px);font-weight:900;line-height:1.1;letter-spacing:-.04em;color:#fff;margin-bottom:var(--space-sm)}
.cta-body{font-size:18px;color:rgba(255,255,255,0.80);margin-bottom:var(--space-lg)}
.cta-tagline{font-size:14px;color:rgba(255,255,255,0.60);margin-top:var(--space-lg);font-weight:500;font-style:italic}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--primary);box-shadow:0 4px 20px rgba(0,0,0,0.15);font-weight:700}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,0.25)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.50)}
.btn-outline-white:hover{background:rgba(255,255,255,0.10);border-color:#fff;color:#fff}

/* ============================================================
   SCROLL ANIMATIONS — Progressive Enhancement
   All content is VISIBLE BY DEFAULT.
   JS adds .js-ready to <body>, which then enables the
   animated hidden→visible transitions.
   ============================================================ */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:1;transform:none;
}
.js-ready .reveal{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s cubic-bezier(0.34,1.56,0.64,1)}
.js-ready .reveal.visible{opacity:1;transform:translateY(0)}
.js-ready .reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .65s ease,transform .65s cubic-bezier(0.34,1.56,0.64,1)}
.js-ready .reveal-left.visible{opacity:1;transform:translateX(0)}
.js-ready .reveal-right{opacity:0;transform:translateX(40px);transition:opacity .65s ease,transform .65s cubic-bezier(0.34,1.56,0.64,1)}
.js-ready .reveal-right.visible{opacity:1;transform:translateX(0)}
.js-ready .reveal-scale{opacity:0;transform:scale(0.85);transition:opacity .65s ease,transform .65s cubic-bezier(0.34,1.56,0.64,1)}
.js-ready .reveal-scale.visible{opacity:1;transform:scale(1)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}
@keyframes icon-pop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(10deg)}70%{transform:scale(0.9) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
.icon-animate{animation:icon-pop .55s cubic-bezier(0.34,1.56,0.64,1) forwards}

/* ── Responsive ── */
@media(max-width:1024px){
  .hero-grid,.deal-grid,.why-grid,.customize-grid,.ba-grid{grid-template-columns:1fr}
  #technical .container > div{grid-template-columns:1fr !important}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .hero-visual{margin-top:var(--space-lg)}
}
@media(max-width:640px){
  :root{--space-xl:48px;--space-2xl:72px}
  .tech-grid{grid-template-columns:1fr}
  .ba-grid,.customize-grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column;align-items:center}
  .hero-character-img{max-height:420px}
  .hero-visual{min-height:460px}
  .float-chip-1{left:-8px}
  .float-chip-2{right:-8px}
  .float-chip-3{right:-8px}
}

section.footer-container,section.footer-imgBG-inner{padding:0}
@media (min-width: 768px) {
.footer-imgBG-inner .container{max-width:1320px;width:96%;margin-left:auto;margin-right:auto}
}
.footer-bg .row,.footer-container .row,.item-related .row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x)/ -2);margin-left:calc(var(--bs-gutter-x)/ -2)}
.footer-bg .col-12{flex:0 0 auto;width:100%}
.footer-bg .row > *,
.footer-container .row > *,
.item-related .row .row > *{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)/ 2);padding-left:calc(var(--bs-gutter-x)/ 2);margin-top:var(--bs-gutter-y)}
@media (min-width: 768px) {
.footer-container .col-md-4{flex:0 0 auto;width:33.3333333333%}
.item-related h2{font-size:42px}
.item-related .col-md-12{flex:0 0 auto;width:100%}
}

.footerBOTTOM{display:none}

.footer-imgBG-inner{background: var(--gradient-brand);position:relative}