/* ==========================================================================
   Daffodil ERP Solutions — Global Stylesheet
   Corporate Cloud (Azure/AWS-inspired) design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --navy-950:#060b1c;
  --navy-900:#0a1128;
  --navy-800:#0e1a3a;
  --navy-700:#122451;
  --blue-700:#0b4fb8;
  --blue-600:#0f62d4;
  --blue-500:#1c7cf2;
  --cyan-400:#1fb6d6;
  --indigo-400:#4f6bd6;
  --violet-500:#5b4fd6;
  --grad-primary:linear-gradient(120deg,#0b4fb8 0%,#1c7cf2 60%,#1fb6d6 100%);
  --grad-dark:linear-gradient(160deg,#060b1c 0%,#0e1a3a 55%,#122451 100%);
  --grad-text:linear-gradient(90deg,#0f62d4,#1c7cf2,#1fb6d6);
  --grad-violet:linear-gradient(120deg,#5b3fc4 0%,#7c5cff 55%,#a78bfa 100%);
  --grad-teal:linear-gradient(120deg,#0a8f66 0%,#14b8a6 55%,#22d3ee 100%);
  --glow-blue:rgba(28,124,242,.55);
  --glow-violet:rgba(124,92,255,.55);
  --glow-teal:rgba(20,184,166,.55);
  --ink-900:#0b1024;
  --ink-700:#3c4560;
  --ink-500:#66708f;
  --ink-300:#a3abc4;
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --bg-soft-2:#edf1fa;
  --border:#e2e7f2;
  --white:#ffffff;
  --success:#0f9d6e;
  --warn:#c8790c;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --shadow-sm:0 2px 8px rgba(10,17,40,.06);
  --shadow-md:0 12px 28px rgba(10,17,40,.09);
  --shadow-lg:0 24px 54px rgba(10,17,40,.14);
  --shadow-blue:0 16px 34px -10px rgba(15,98,212,.45);
  --container:1200px;
  --ff-head:'Playfair Display',Georgia,serif;
  --ff-body:'Plus Jakarta Sans',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--ink-900);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  zoom:0.9;
}
@media(max-width:860px){
  body{zoom:1;}
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* Accessible focus styles — visible for keyboard users, silent for mouse/touch */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.faq-q:focus-visible,
.switch:focus-visible{
  outline:2.5px solid var(--blue-500);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:2000;
  background:#0a1128;color:#fff;padding:10px 18px;border-radius:8px;
  font-weight:700;font-size:.9rem;transition:top .2s ease;
}
.skip-link:focus{top:12px;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--ff-head);color:var(--ink-900);line-height:1.15;font-weight:700;letter-spacing:-.02em;}
h1{font-size:clamp(2.3rem,4.5vw,3.8rem);font-weight:800;letter-spacing:-.03em;}
h2{font-size:clamp(1.9rem,3vw,2.7rem);font-weight:800;letter-spacing:-.025em;}
h3{font-size:1.28rem;letter-spacing:-.015em;}
p{color:var(--ink-700);}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.section-soft{
  background-color:var(--bg-soft);
  background-image:radial-gradient(rgba(10,17,40,.055) 1px,transparent 1px);
  background-size:24px 24px;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-head);font-weight:600;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-600);
  background:rgba(15,98,212,.08);
  padding:7px 16px;border-radius:100px;
  margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad-primary);}

.section-head{max-width:680px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{margin-top:14px;font-size:1.08rem;}

.text-gradient{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-head);font-weight:600;font-size:.95rem;
  padding:14px 28px;border-radius:8px;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-primary);color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -10px rgba(15,98,212,.55);}
.btn-outline{
  background:transparent;color:var(--navy-800);
  border:1.5px solid var(--border);
}
.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-600);transform:translateY(-2px);background:var(--bg-soft-2);}
.btn-light{background:#fff;color:#0a1128;box-shadow:var(--shadow-md);}
.btn-light:hover{transform:translateY(-2px);}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.35);color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px;font-size:.85rem;border-radius:7px;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-950);color:#8fa2cf;font-size:.8rem;}
.topbar-inner{
  max-width:var(--container);margin:0 auto;padding:9px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar-left{display:flex;align-items:center;gap:24px;}
.topbar-item{display:inline-flex;align-items:center;gap:7px;font-weight:500;}
.topbar-item a{color:#c7d3ef;transition:color .2s ease;}
.topbar-item a:hover{color:#fff;}
.topbar-item svg{width:14px;height:14px;flex-shrink:0;opacity:.85;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.topbar-badge{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#8fe0c4;font-size:.76rem;
}
.topbar-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#2fd98f;box-shadow:0 0 0 3px rgba(47,217,143,.18);}
.topbar-social{display:flex;gap:10px;}
.topbar-social a{color:#8fa2cf;transition:color .2s ease;}
.topbar-social a:hover{color:#fff;}
.topbar-social svg{width:14px;height:14px;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 8px 28px rgba(10,17,40,.08);}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 24px;max-width:var(--container);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--ff-head);}
.brand-mark{
  width:40px;height:40px;border-radius:10px;
  background:var(--grad-dark);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.05rem;
  box-shadow:0 8px 18px -6px rgba(10,17,40,.5);
  flex-shrink:0;position:relative;
}
.brand-mark::after{content:'';position:absolute;inset:0;border-radius:10px;background:var(--grad-primary);opacity:.55;mix-blend-mode:overlay;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-size:1.06rem;color:var(--navy-900);font-weight:800;letter-spacing:-.02em;}
.brand-text span{font-size:.66rem;letter-spacing:.07em;color:var(--ink-500);text-transform:uppercase;font-weight:600;}

/* Logo ships on a white background, so give it its own white badge rather
   than let a white rectangle float awkwardly on the dark header/footer. */
.brand-logo{
  height:46px;width:auto;display:block;
  background:#fff;border-radius:9px;padding:3px 9px;
  box-shadow:0 8px 18px -6px rgba(10,17,40,.5);
}
.brand-logo-lg{height:62px;padding:5px 12px;}

.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links > li{position:relative;}
.nav-links a.nav-link{
  display:flex;align-items:center;gap:5px;
  padding:10px 14px;border-radius:8px;
  font-weight:600;font-size:.92rem;color:var(--ink-700);
  transition:background .2s ease,color .2s ease;
}
.nav-links a.nav-link:hover,.nav-links a.nav-link.active{background:var(--bg-soft-2);color:var(--blue-600);}
.nav-cta{display:flex;align-items:center;gap:10px;}

/* Dark/light mode toggle */
.theme-toggle{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft-2);color:var(--ink-700);
  transition:background .2s ease,color .2s ease;
  margin-right:4px;
}
.theme-toggle:hover{background:var(--border);}
.theme-toggle svg{width:19px;height:19px;}
.theme-toggle .icon-moon{display:none;}
body.dark-3d .theme-toggle .icon-sun{display:none;}
body.dark-3d .theme-toggle .icon-moon{display:block;}

.has-dropdown .chevron{width:10px;height:10px;transition:transform .25s ease;}
.has-dropdown:hover .chevron{transform:rotate(180deg);}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:260px;background:#fff;border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .25s ease;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;
  font-weight:600;font-size:.9rem;color:var(--ink-900);
}
.dropdown a small{color:var(--ink-500);font-weight:500;font-size:.78rem;}
.dropdown a:hover{background:var(--bg-soft-2);color:var(--blue-600);}

.nav-toggle{display:none;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;background:var(--bg-soft-2);}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy-900);position:relative;transition:.25s;}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--navy-900);transition:.25s;}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle.active span{background:transparent;}
.nav-toggle.active span::before{transform:rotate(45deg);top:0;}
.nav-toggle.active span::after{transform:rotate(-45deg);top:0;}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--grad-dark);color:#fff;
  padding:150px 0 130px;overflow:hidden;
}
.hero::before,.hero::after{
  content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;
}
.hero::before{width:480px;height:480px;background:#1c7cf2;top:-180px;right:-120px;animation:blobDriftA 24s ease-in-out infinite;}
.hero::after{width:420px;height:420px;background:#1fb6d6;bottom:-200px;left:-100px;animation:blobDriftB 28s ease-in-out infinite;}

/* Very slow, subtle drift + breathing scale on the hero glow blobs — a light
   touch of background depth/motion without introducing any new shapes.
   The scroll-parallax offset (set by main.js) is baked into the keyframe so
   both effects combine instead of one overriding the other. */
@keyframes blobDriftA{
  0%,100%{transform:translate(0,calc(var(--scroll-parallax,0) * 1px)) scale(1);}
  50%{transform:translate(-26px,calc(var(--scroll-parallax,0) * 1px - 20px)) scale(1.06);}
}
@keyframes blobDriftB{
  0%,100%{transform:translate(0,calc(var(--scroll-parallax,0) * -0.6px)) scale(1);}
  50%{transform:translate(22px,calc(var(--scroll-parallax,0) * -0.6px + 18px)) scale(1.05);}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none;transform:translateY(calc(var(--scroll-parallax,0) * 1px));}
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%);
}

.hero .container{max-width:1680px;}


.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:540px 1fr;gap:40px;align-items:center;}
.hero-inner > *{min-width:0;}
.hero-inner.centered{grid-template-columns:1fr;text-align:center;max-width:820px;margin:0 auto;}
.hero .eyebrow{background:rgba(255,255,255,.1);color:#bcd0ff;}
.hero .eyebrow::before{background:var(--cyan-400);}
.hero h1{color:#fff;}
.hero p.lead{color:#c3cbee;font-size:1.15rem;margin-top:20px;max-width:540px;}
.hero-inner.centered p.lead{margin-left:auto;margin-right:auto;}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-inner.centered .hero-cta{justify-content:center;}
.hero-stats{display:flex;gap:34px;margin-top:48px;flex-wrap:wrap;}
.hero-inner.centered .hero-stats{justify-content:center;}
.hero-stats div strong{display:block;font-family:var(--ff-head);font-size:1.7rem;font-weight:800;color:#fff;}
.hero-stats div span{font-size:.82rem;color:#9fb0e0;font-weight:500;}

.hero-visual{position:relative;align-self:start;margin-top:-40px;transform:translate(160px,-30px);}

/* Browser-chrome dashboard mockup — premium "product preview" frame */
.browser-chrome{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 80px -16px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
}
.browser-chrome-bar{
  display:flex;align-items:center;gap:16px;padding:13px 18px;
  background:#eef1f8;border-bottom:1px solid #e2e7f2;
}
.browser-dots{display:flex;gap:6px;flex-shrink:0;}
.browser-dots span{width:10px;height:10px;border-radius:50%;background:#d4dae8;}
.browser-dots span:nth-child(1){background:#ff5f57;}
.browser-dots span:nth-child(2){background:#febc2e;}
.browser-dots span:nth-child(3){background:#28c840;}
.browser-url{
  flex:1;min-width:0;background:#fff;border:1px solid #e2e7f2;border-radius:100px;
  padding:6px 14px;font-size:.74rem;color:var(--ink-500);font-weight:600;
  display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.browser-url svg{width:11px;height:11px;color:var(--success);flex-shrink:0;}
.browser-body{background:var(--grad-dark);padding:26px;}

.hero-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-md);padding:22px;backdrop-filter:blur(20px);
}

/* ---------- Login demo animation (pure CSS, loops every 28s: Tally sequence then Busy sequence, alternating forever) ---------- */
.login-demo{position:relative;height:480px;pointer-events:none;}
.ld-scene{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;
}
.ld-login{animation:ldSceneA 28s ease-in-out infinite;}
.ld-connecting{animation:ldSceneB 28s ease-in-out infinite;align-items:center;text-align:center;}
.ld-success{animation:ldSceneC 28s ease-in-out infinite;justify-content:stretch;}
.ld-login-busy{animation:ldSceneABusy 28s ease-in-out infinite;}
.ld-connecting-busy{animation:ldSceneBBusy 28s ease-in-out infinite;align-items:center;text-align:center;}
.ld-success-busy{animation:ldSceneCBusy 28s ease-in-out infinite;justify-content:stretch;}

@keyframes ldSceneA{
  0%,0.5%{opacity:0;}
  2%,9%{opacity:1;}
  10.5%,100%{opacity:0;}
}
@keyframes ldSceneB{
  0%,18.5%{opacity:0;}
  20%,29%{opacity:1;}
  31%,100%{opacity:0;}
}
@keyframes ldSceneC{
  0%,17.5%{opacity:0;}
  19%,45.5%{opacity:1;}
  48%,100%{opacity:0;}
}
@keyframes ldSceneABusy{
  0%{opacity:0;}
  50.5%{opacity:0;}
  52%,59%{opacity:1;}
  60.5%,100%{opacity:0;}
}
@keyframes ldSceneBBusy{
  0%{opacity:0;}
  68.5%{opacity:0;}
  70%,79%{opacity:1;}
  81%,100%{opacity:0;}
}
@keyframes ldSceneCBusy{
  0%{opacity:0;}
  67.5%{opacity:0;}
  69%,95.5%{opacity:1;}
  98%,100%{opacity:0;}
}

.ld-login-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);padding:18px;max-width:280px;margin:0 auto;width:100%;
}
.ld-login-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.ld-login-head .hero-card-icon{width:28px;height:28px;border-radius:9px;}
.ld-login-head strong{color:#fff;font-size:.8rem;}
.ld-login-head span{color:#a9b4dd;font-size:.66rem;display:block;}
.ld-field{margin-bottom:10px;}
.ld-field label{display:block;font-size:.62rem;font-weight:700;color:#8fa2cf;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.ld-input{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:7px;
  padding:7px 10px;display:flex;align-items:center;height:30px;overflow:hidden;
}
.ld-type,.ld-dots{
  display:inline-block;white-space:nowrap;overflow:hidden;width:0;
  color:#e4e9fb;font-size:.72rem;font-family:'Inter',monospace;letter-spacing:.02em;
}
.ld-login .ld-user .ld-type{animation:ldTypeUser 28s steps(28,end) infinite;}
.ld-login .ld-pass .ld-dots{animation:ldTypeDots 28s steps(14,end) infinite;letter-spacing:.18em;}
.ld-login-busy .ld-user .ld-type{animation:ldTypeUserBusy 28s steps(28,end) infinite;}
.ld-login-busy .ld-pass .ld-dots{animation:ldTypeDotsBusy 28s steps(14,end) infinite;letter-spacing:.18em;}
@keyframes ldTypeUser{
  0%,2.5%{width:0;}
  6%,9%{width:15ch;}
  10%{width:0;}
  100%{width:0;}
}
@keyframes ldTypeDots{
  0%,6.5%{width:0;}
  9%,10%{width:8ch;}
  10.5%{width:0;}
  100%{width:0;}
}
@keyframes ldTypeUserBusy{
  0%{width:0;}
  52.5%{width:0;}
  56%,59%{width:15ch;}
  60%{width:0;}
  100%{width:0;}
}
@keyframes ldTypeDotsBusy{
  0%{width:0;}
  56.5%{width:0;}
  59%,60%{width:8ch;}
  60.5%{width:0;}
  100%{width:0;}
}
.ld-caret{
  display:inline-block;width:2px;height:12px;background:var(--cyan-400);margin-left:2px;
  animation:ldBlink .9s steps(1) infinite;
}
.ld-login-btn{
  margin-top:4px;background:var(--grad-primary);color:#fff;text-align:center;
  padding:9px;border-radius:7px;font-weight:700;font-size:.76rem;font-family:var(--ff-head);
}
.ld-login .ld-login-btn{animation:ldBtnPulse 28s ease-in-out infinite;}
.ld-login-busy .ld-login-btn{animation:ldBtnPulseBusy 28s ease-in-out infinite;}
@keyframes ldBlink{50%{opacity:0;}}
@keyframes ldBtnPulse{
  0%,8.5%{box-shadow:0 0 0 0 rgba(31,182,214,0);}
  9.5%{box-shadow:0 0 0 7px rgba(31,182,214,.22);}
  10.5%,100%{box-shadow:0 0 0 0 rgba(31,182,214,0);}
}
@keyframes ldBtnPulseBusy{
  0%,58.5%{box-shadow:0 0 0 0 rgba(31,182,214,0);}
  59.5%{box-shadow:0 0 0 7px rgba(31,182,214,.22);}
  60.5%,100%{box-shadow:0 0 0 0 rgba(31,182,214,0);}
}

.ld-spinner{
  width:44px;height:44px;border-radius:50%;margin:0 auto 18px;
  border:3px solid rgba(255,255,255,.15);border-top-color:var(--cyan-400);
  animation:ldSpin .85s linear infinite;
}
@keyframes ldSpin{to{transform:rotate(360deg);}}
.ld-connecting p,.ld-connecting-busy p{color:#dbe2f7;font-weight:600;font-size:.92rem;margin-bottom:16px;}
.ld-progress{width:200px;height:5px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;margin:0 auto;}
.ld-connecting .ld-progress span{display:block;height:100%;background:var(--grad-primary);border-radius:100px;width:0;animation:ldProgress 28s ease-in-out infinite;}
.ld-connecting-busy .ld-progress span{display:block;height:100%;background:var(--grad-primary);border-radius:100px;width:0;animation:ldProgressBusy 28s ease-in-out infinite;}
@keyframes ldProgress{
  0%,10.5%{width:0;}
  16.5%{width:100%;}
  17.5%{width:100%;}
  18%{width:0;}
  100%{width:0;}
}
@keyframes ldProgressBusy{
  0%,60.5%{width:0;}
  66.5%{width:100%;}
  67.5%{width:100%;}
  68%{width:0;}
  100%{width:0;}
}

.ld-check-circle{
  width:26px;height:26px;border-radius:50%;background:rgba(15,157,110,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ld-success .ld-check-circle svg{stroke-dasharray:24;stroke-dashoffset:24;animation:ldCheckDraw 28s ease-in-out infinite;}
.ld-success-busy .ld-check-circle svg{stroke-dasharray:24;stroke-dashoffset:24;animation:ldCheckDrawBusy 28s ease-in-out infinite;}
@keyframes ldCheckDraw{
  0%,18%{stroke-dashoffset:24;}
  20.5%,45%{stroke-dashoffset:0;}
  47.5%,100%{stroke-dashoffset:24;}
}
@keyframes ldCheckDrawBusy{
  0%,68%{stroke-dashoffset:24;}
  70.5%,95%{stroke-dashoffset:0;}
  97.5%,100%{stroke-dashoffset:24;}
}

.ld-row{opacity:0;transform:translateY(10px);}
.ld-success .ld-row1{animation:ldRow 28s ease-out infinite;animation-delay:0s;}
.ld-success .ld-row2{animation:ldRow 28s ease-out infinite;animation-delay:.12s;}
.ld-success .ld-row3{animation:ldRow 28s ease-out infinite;animation-delay:.24s;}
.ld-success .ld-row4{animation:ldRow 28s ease-out infinite;animation-delay:.36s;}
.ld-success-busy .ld-row1{animation:ldRowBusy 28s ease-out infinite;animation-delay:0s;}
.ld-success-busy .ld-row2{animation:ldRowBusy 28s ease-out infinite;animation-delay:.12s;}
.ld-success-busy .ld-row3{animation:ldRowBusy 28s ease-out infinite;animation-delay:.24s;}
@keyframes ldRow{
  0%,19.5%{opacity:0;transform:translateY(10px);}
  22%,45%{opacity:1;transform:translateY(0);}
  47.5%,100%{opacity:0;transform:translateY(10px);}
}
@keyframes ldRowBusy{
  0%,69.5%{opacity:0;transform:translateY(10px);}
  72%,95%{opacity:1;transform:translateY(0);}
  97.5%,100%{opacity:0;transform:translateY(10px);}
}

/* Full-size Tally Prime "Gateway of Tally" screen mockup — fills the mockup box and holds for its 8s success window */
.tally-screen,.busy-screen{
  background:#fff;border-radius:10px;overflow:hidden;height:100%;
  display:flex;flex-direction:column;
  box-shadow:0 20px 44px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.06);
}
.tally-success-banner,.busy-success-banner{
  background:rgba(15,157,110,.12);border-bottom:1px solid rgba(15,157,110,.25);
  display:flex;align-items:center;gap:8px;padding:8px 14px;flex-shrink:0;
}
.tally-success-banner strong,.busy-success-banner strong{color:#0f9d6e;font-size:.72rem;font-weight:800;}
.tally-success-banner span,.busy-success-banner span{color:#3c4560;font-size:.68rem;font-weight:600;}
.tally-ribbon{
  background:linear-gradient(180deg,#1d4488,#143467);color:#fff;flex-shrink:0;
  padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.tally-logo{font-family:var(--ff-head);font-size:.86rem;font-weight:700;display:flex;align-items:baseline;gap:5px;}
.tally-logo em{font-style:italic;font-weight:800;}
.tally-logo b{font-size:.6rem;font-weight:800;color:#ffcf5c;letter-spacing:.06em;margin-left:2px;}
.tally-ribbon-menu{display:flex;gap:12px;font-size:.66rem;color:#cfdcf5;font-weight:600;}
.tally-ribbon-menu u{color:#fff;text-decoration:none;border-bottom:1.5px solid #ffcf5c;}
.tally-gateway{
  background:#dce9fb;color:#123a7a;font-weight:700;font-size:.76rem;flex-shrink:0;
  padding:8px 14px;border-bottom:1px solid #c3d7f2;
}
.tally-info-row{
  display:flex;justify-content:space-between;gap:14px;padding:12px 14px;flex-shrink:0;
  border-bottom:1px solid #eef2fa;
}
.tally-info-row label{display:block;font-size:.6rem;font-weight:700;color:#5c7ab0;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.tally-info-row strong{font-size:.78rem;color:#12203f;font-weight:700;}
.tally-company{border-bottom:none;}
.tally-workspace{flex:1;background:#fdfdff;position:relative;}
.busy-workspace{flex:1;background:#cdeee6;position:relative;}
.tally-workspace::before,.tally-workspace::after,.busy-workspace::before,.busy-workspace::after{
  content:'';position:absolute;background:#eef2fa;
}
.tally-workspace::before,.busy-workspace::before{top:0;bottom:0;left:0;width:1px;}
.tally-workspace::after,.busy-workspace::after{top:0;left:0;right:0;height:1px;}

/* Mini Busy Accounting "Sales Voucher" screen mockup — styled after the actual Busy 21 UI */
.busy-screen{background:#cdeee6;}
.busy-titlebar{
  background:#10181c;color:#eef7f4;flex-shrink:0;
  padding:7px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.busy-titlebar b{font-family:var(--ff-head);font-size:.8rem;font-weight:800;font-style:italic;}
.busy-titlebar span{font-size:.58rem;color:#9fb0ac;font-weight:600;}
.busy-content{padding:10px 14px 0;flex-shrink:0;}
.busy-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.busy-topline .busy-fieldset{display:flex;gap:14px;flex-wrap:wrap;font-size:.62rem;color:#123a3a;}
.busy-topline b{color:#2d5a52;font-weight:700;margin-right:3px;}
.busy-voucher-tag{
  background:#c0272d;color:#fff;text-align:center;font-weight:800;font-size:.6rem;
  padding:3px 10px;border-radius:3px;letter-spacing:.02em;flex-shrink:0;
}
.busy-fields{font-size:.62rem;color:#123a3a;padding-bottom:8px;border-bottom:1.5px solid #9fd6c8;}
.busy-fields div{display:flex;gap:6px;margin-bottom:4px;}
.busy-fields b{color:#2d5a52;font-weight:700;}
.busy-table{margin:10px 14px 0;border:1px solid #6fb7a8;border-radius:4px;overflow:hidden;flex-shrink:0;background:#fff;}
.busy-table-head,.busy-table-row{
  display:grid;grid-template-columns:.4fr 1.8fr .7fr .7fr 1fr 1.1fr;gap:4px;padding:4px 8px;font-size:.58rem;
}
.busy-table-head{background:#3d8c78;color:#fff;font-weight:800;}
.busy-table-row{color:#123a3a;border-bottom:1px solid #eaf6f2;}
.busy-table-row:last-child{border-bottom:none;}
.busy-status{
  margin-top:auto;background:#123a7a;color:#fff;flex-shrink:0;
  display:flex;align-items:center;gap:12px;padding:6px 14px;font-size:.58rem;font-weight:600;
}
.busy-status b{
  font-family:var(--ff-head);font-weight:800;font-style:italic;font-size:.78rem;
  background:#0d2c5c;padding:3px 10px;border-radius:3px;flex-shrink:0;
}
.hero-card-row{
  display:flex;align-items:center;gap:14px;padding:14px 10px;margin:0 -10px;border-bottom:1px solid rgba(255,255,255,.1);
  border-radius:10px;transition:transform .3s ease,background .3s ease;
}
.hero-card-row:last-child{border-bottom:none;}
.hero-card-row:hover{transform:translateX(6px);background:rgba(255,255,255,.05);}
.hero-card-row{--accent-grad:var(--grad-primary);--accent-glow:var(--glow-blue);}
.hero-card-row:nth-child(3n+2){--accent-grad:var(--grad-violet);--accent-glow:var(--glow-violet);}
.hero-card-row:nth-child(3n+3){--accent-grad:var(--grad-teal);--accent-glow:var(--glow-teal);}
.hero-card-icon{
  width:44px;height:44px;border-radius:12px;background:var(--accent-grad,var(--grad-primary));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .3s ease,box-shadow .3s ease;
  animation:iconBreathe 3.2s ease-in-out infinite;
  box-shadow:0 0 0 0 var(--accent-glow,rgba(28,124,242,.6));
}
.split-visual .hero-card-row:nth-child(1) .hero-card-icon{animation-delay:0s;}
.split-visual .hero-card-row:nth-child(2) .hero-card-icon{animation-delay:.5s;}
.split-visual .hero-card-row:nth-child(3) .hero-card-icon{animation-delay:1s;}
.split-visual .hero-card-row:nth-child(4) .hero-card-icon{animation-delay:1.5s;}
@keyframes iconBreathe{
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow,rgba(28,124,242,.5));}
  50%{box-shadow:0 0 0 7px transparent,0 10px 24px -6px var(--accent-glow,rgba(28,124,242,.7));}
}
.hero-card-row:hover .hero-card-icon{transform:scale(1.1) translateZ(10px);box-shadow:0 12px 26px -6px var(--accent-glow,rgba(28,124,242,.65));animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hero-card-icon{animation:none;}}
.hero-card-row strong{color:#fff;font-size:.95rem;display:block;}
.hero-card-row span{color:#a9b4dd;font-size:.8rem;}

/* Staggered slide-in for each row once the panel scrolls into view.
   Scoped to .split-visual specifically — .hero-card-row is reused elsewhere
   (plain hero mockups on other pages) and must stay visible by default there. */
.split-visual .hero-card-row{opacity:0;transform:translateX(26px);}
.split-visual.reveal.in .hero-card-row{animation:cardRowIn .55s ease forwards;}
.split-visual .hero-card-row:nth-child(1){animation-delay:.08s;}
.split-visual .hero-card-row:nth-child(2){animation-delay:.2s;}
.split-visual .hero-card-row:nth-child(3){animation-delay:.32s;}
.split-visual .hero-card-row:nth-child(4){animation-delay:.44s;}
@keyframes cardRowIn{to{opacity:1;transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){
  .split-visual .hero-card-row{opacity:1;transform:none;}
  .split-visual.reveal.in .hero-card-row{animation:none;}
}
.hero-card-badge{
  position:absolute;top:-18px;right:20px;background:var(--success);
  color:#fff;font-weight:700;font-size:.78rem;padding:8px 16px;border-radius:100px;
  box-shadow:0 10px 20px -6px rgba(15,157,110,.6);
  display:flex;align-items:center;gap:6px;
}
.hero-card-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---------- Page (inner) hero ---------- */
.page-hero{
  background:var(--grad-dark);color:#fff;padding:110px 0 70px;position:relative;overflow:hidden;text-align:center;
}
.page-hero::before{
  content:'';position:absolute;width:500px;height:500px;background:#1c7cf2;filter:blur(100px);opacity:.4;
  top:-260px;left:50%;
  animation:pageBlobDrift 24s ease-in-out infinite;
}
@keyframes pageBlobDrift{
  0%,100%{transform:translate(-50%,calc(var(--scroll-parallax,0) * 1px)) scale(1);}
  50%{transform:translate(calc(-50% - 20px),calc(var(--scroll-parallax,0) * 1px - 16px)) scale(1.05);}
}
@media(prefers-reduced-motion:reduce){
  .page-hero::before{animation:none;transform:translate(-50%,calc(var(--scroll-parallax,0) * 1px));}
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 85%);
  pointer-events:none;
}
.page-hero .eyebrow{background:rgba(255,255,255,.1);color:#bcd0ff;position:relative;z-index:1;}
.page-hero h1{color:#fff;position:relative;z-index:1;}
.page-hero p{color:#c3cbee;max-width:640px;margin:16px auto 0;position:relative;z-index:1;}
.breadcrumb{display:flex;gap:8px;justify-content:center;margin-bottom:16px;position:relative;z-index:1;font-size:.85rem;color:#9fb0e0;font-weight:600;}
.breadcrumb a{color:#9fb0e0;}
.breadcrumb a:hover{color:#fff;}

/* ---------- Logo strip ---------- */
.logo-strip{padding:40px 0;border-bottom:1px solid var(--border);}
.logo-strip p{text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-500);margin-bottom:26px;}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;}
.logo-row span{
  font-family:var(--ff-head);font-weight:700;font-size:.88rem;color:var(--ink-700);
  border:1px solid var(--border);background:var(--bg-soft);padding:9px 18px;border-radius:8px;
}

/* ---------- Cards / Grids ---------- */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:32px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative;overflow:hidden;
}
/* Cycle each card through a small cool-tone palette (blue / violet / teal)
   so a grid of icons reads as rich and varied rather than one flat colour
   repeated everywhere. Set once here, consumed by the icon, accent bar and
   hover glow below. */
.card{--accent-grad:var(--grad-primary);--accent-glow:var(--glow-blue);}
.card:nth-child(3n+2){--accent-grad:var(--grad-violet);--accent-glow:var(--glow-violet);}
.card:nth-child(3n+3){--accent-grad:var(--grad-teal);--accent-glow:var(--glow-teal);}

.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -18px var(--accent-glow),var(--shadow-lg);border-color:transparent;}
.card:hover::before{transform:scaleX(1);}
.card-icon{
  width:52px;height:52px;border-radius:13px;background:var(--grad-dark);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  box-shadow:0 12px 26px -10px var(--accent-glow);position:relative;
}
.card-icon::after{content:'';position:absolute;inset:0;border-radius:13px;background:var(--accent-grad);opacity:.55;mix-blend-mode:overlay;}
.card h3{margin-bottom:10px;}
.card p{font-size:.94rem;}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:.88rem;color:var(--blue-600);}
.card-link svg{width:14px;height:14px;transition:transform .25s ease;}
.card:hover .card-link svg{transform:translateX(4px);}

.feature-row{display:flex;gap:18px;align-items:flex-start;}
.feature-row .ico{
  width:48px;height:48px;border-radius:12px;background:var(--bg-soft-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-600);
}
.feature-row h4{margin-bottom:6px;font-size:1.05rem;}
.feature-row p{font-size:.92rem;}

/* ---------- Icon badges ---------- */
.icon-circle{
  width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
}
.check-list li{display:flex;align-items:center;gap:12px;padding:9px 0;font-weight:600;color:var(--ink-900);font-size:.95rem;}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split-visual{
  background:var(--grad-dark);border-radius:var(--radius-lg);padding:40px;color:#fff;position:relative;overflow:hidden;min-height:380px;
  display:flex;flex-direction:column;justify-content:center;
}
.split-visual::before{content:'';position:absolute;width:280px;height:280px;background:var(--cyan-400);filter:blur(90px);opacity:.35;top:-80px;right:-80px;}

/* ---------- Steps ---------- */
.steps-row{counter-reset:step;}
.step{display:flex;gap:22px;position:relative;padding-bottom:40px;}
.step:last-child{padding-bottom:0;}
.step::before{
  counter-increment:step;content:counter(step);
  width:44px;height:44px;border-radius:50%;background:var(--grad-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--ff-head);
  flex-shrink:0;position:relative;z-index:2;
  transition:transform .3s ease,box-shadow .3s ease;
}
.step:hover::before{transform:scale(1.08);box-shadow:0 0 0 9px rgba(28,124,242,.16);}

/* Radar-style ping ring behind each step number, purely decorative */
.step-ring{
  position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--blue-500);opacity:0;pointer-events:none;z-index:1;
  animation:stepPing 2.6s ease-out infinite;
}
.step:nth-child(1) .step-ring{animation-delay:0s;}
.step:nth-child(2) .step-ring{animation-delay:.5s;}
.step:nth-child(3) .step-ring{animation-delay:1s;}
@keyframes stepPing{
  0%{transform:scale(.7);opacity:.5;}
  80%{transform:scale(1.8);opacity:0;}
  100%{transform:scale(1.8);opacity:0;}
}

/* Pop-in entrance for the number circle once the step scrolls into view.
   Delay is written inside each selector's own animation shorthand (rather than
   as a separate lower-specificity rule) so it can't be reset by the cascade. */
.step.reveal.in:nth-child(1)::before{animation:stepPop .55s cubic-bezier(.2,.9,.3,1.3) .05s both;}
.step.reveal.in:nth-child(2)::before{animation:stepPop .55s cubic-bezier(.2,.9,.3,1.3) .18s both;}
.step.reveal.in:nth-child(3)::before{animation:stepPop .55s cubic-bezier(.2,.9,.3,1.3) .31s both;}
@keyframes stepPop{
  0%{transform:scale(0) rotate(-60deg);}
  100%{transform:scale(1) rotate(0);}
}

@media(prefers-reduced-motion:reduce){
  .step-ring{display:none;}
  .step.reveal.in::before{animation:none !important;}
}

.step-body h4{margin-bottom:6px;}
.step-body p{font-size:.93rem;}

/* ---------- Pricing ---------- */
.pricing-toggle{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:48px;}
.pricing-toggle span{font-weight:700;color:var(--ink-500);font-size:.9rem;}
.pricing-toggle span.active{color:var(--navy-900);}
.switch{width:52px;height:28px;border-radius:100px;background:var(--bg-soft-2);border:1px solid var(--border);position:relative;}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--grad-primary);transition:.25s;}
.switch.on::after{transform:translateX(24px);}
.save-badge{background:rgba(15,157,110,.12);color:var(--success);font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:100px;}

.price-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 30px;position:relative;transition:transform .3s ease,box-shadow .3s ease;
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.price-card.featured{
  background:var(--grad-dark);color:#fff;border:none;transform:scale(1.04);box-shadow:var(--shadow-lg);
}
.price-card.featured:hover{transform:scale(1.04) translateY(-8px);}
.price-card.featured h3,.price-card.featured .price-amt,.price-card.featured .price-sub{color:#fff;}
.price-card.featured p{color:#c3cbee;}
.price-card.featured .check-list li{color:#fff;}
.featured-tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--grad-primary);color:#fff;font-size:.72rem;font-weight:800;
  padding:6px 18px;border-radius:100px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 10px 20px -6px rgba(15,98,212,.6);
}
.price-amt{font-family:var(--ff-head);font-size:2.6rem;font-weight:800;margin:14px 0 2px;}
.price-amt sup{font-size:1.1rem;font-weight:700;}
.price-amt small{font-size:.95rem;font-weight:600;color:var(--ink-500);}
.price-card.featured .price-amt small{color:#9fb0e0;}
.price-sub{font-size:.85rem;color:var(--ink-500);margin-bottom:24px;}
.price-card .check-list{margin:26px 0 30px;}

/* ---------- Stats band ---------- */
.stats-band{background:var(--grad-dark);color:#fff;padding:64px 0;}
.stats-band .grid-4{text-align:center;}
.stats-band strong{display:block;font-family:var(--ff-head);font-size:2.4rem;font-weight:800;}
.stats-band span{color:#9fb0e0;font-size:.88rem;font-weight:600;}

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:30px;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.testi-stars{display:flex;gap:3px;margin-bottom:16px;color:#f59e0b;}
.testi-stars svg{opacity:0;}
.reveal.in .testi-stars svg{animation:starPop .5s ease both;}
.reveal.in .testi-stars svg:nth-child(1){animation-delay:.1s;}
.reveal.in .testi-stars svg:nth-child(2){animation-delay:.17s;}
.reveal.in .testi-stars svg:nth-child(3){animation-delay:.24s;}
.reveal.in .testi-stars svg:nth-child(4){animation-delay:.31s;}
.reveal.in .testi-stars svg:nth-child(5){animation-delay:.38s;}
@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0;}70%{transform:scale(1.25) rotate(8deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .testi-stars svg{opacity:1;animation:none;}
}
.testi-stars svg{width:16px;height:16px;}
.testi-quote{font-size:.96rem;color:var(--ink-700);margin-bottom:22px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.avatar{
  width:44px;height:44px;border-radius:50%;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--ff-head);flex-shrink:0;
}
.testi-person strong{display:block;font-size:.9rem;}
.testi-person span{font-size:.8rem;color:var(--ink-500);}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-weight:700;font-family:var(--ff-head);font-size:1rem;color:var(--navy-900);
  width:100%;text-align:left;
}
.faq-q .plus{
  width:30px;height:30px;border-radius:50%;background:var(--bg-soft-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;transition:.3s;
}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--navy-900);transition:.3s;}
.faq-q .plus::before{width:12px;height:2px;}
.faq-q .plus::after{width:2px;height:12px;}
.faq-item.open .faq-q .plus{background:var(--grad-primary);}
.faq-item.open .faq-q .plus::before,.faq-item.open .faq-q .plus::after{background:#fff;}
.faq-item.open .faq-q .plus::after{transform:rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 4px 22px;font-size:.93rem;max-width:640px;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--grad-primary);border-radius:var(--radius-xl);padding:64px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  color:#fff;position:relative;overflow:hidden;
}
.cta-banner::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='white' fill-opacity='0.25'/%3E%3C/svg%3E");opacity:.5;}
.cta-banner > *{position:relative;z-index:1;}
.cta-banner h2{color:#fff;}
.cta-banner p{color:rgba(255,255,255,.85);margin-top:10px;}
.cta-banner .btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Contact ---------- */
.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;}
.contact-info-card{
  background:var(--grad-dark);color:#fff;border-radius:var(--radius-lg);padding:40px;position:relative;overflow:hidden;
}
.contact-info-card::before{content:'';position:absolute;width:260px;height:260px;background:var(--violet-500);filter:blur(90px);opacity:.4;bottom:-100px;right:-80px;}
.contact-info-card h3{color:#fff;position:relative;z-index:1;}
.contact-info-card p{color:#c3cbee;position:relative;z-index:1;margin-bottom:30px;}
.contact-info-row{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;position:relative;z-index:1;
  --accent-grad:var(--grad-primary);--accent-glow:var(--glow-blue);
  padding:8px;margin-left:-8px;margin-right:-8px;border-radius:12px;
  opacity:0;transform:translateX(-22px);transition:background .3s ease,transform .3s ease;
}
.contact-info-row:nth-of-type(4n+2){--accent-grad:var(--grad-violet);--accent-glow:var(--glow-violet);}
.contact-info-row:nth-of-type(4n+3){--accent-grad:var(--grad-teal);--accent-glow:var(--glow-teal);}
.contact-info-card.reveal.in .contact-info-row{animation:infoRowIn .5s ease forwards;}
.contact-info-row:nth-of-type(1){animation-delay:.1s;}
.contact-info-row:nth-of-type(2){animation-delay:.22s;}
.contact-info-row:nth-of-type(3){animation-delay:.34s;}
.contact-info-row:nth-of-type(4){animation-delay:.46s;}
@keyframes infoRowIn{to{opacity:1;transform:translateX(0);}}
.contact-info-row:hover{background:rgba(255,255,255,.06);transform:translateX(4px);}
.contact-info-row .ico{
  width:42px;height:42px;border-radius:12px;background:var(--accent-grad,rgba(255,255,255,.12));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .3s ease,box-shadow .3s ease;
  animation:iconBreathe 3.2s ease-in-out infinite;
}
.contact-info-row:nth-of-type(1) .ico{animation-delay:0s;}
.contact-info-row:nth-of-type(2) .ico{animation-delay:.4s;}
.contact-info-row:nth-of-type(3) .ico{animation-delay:.8s;}
.contact-info-row:nth-of-type(4) .ico{animation-delay:1.2s;}
.contact-info-row:hover .ico{transform:scale(1.12);box-shadow:0 10px 22px -6px var(--accent-glow);animation-play-state:paused;}
.contact-info-row strong{display:block;color:#fff;font-size:.92rem;}
.contact-info-row span,.contact-info-row a{color:#c3cbee;font-size:.88rem;}
@media(prefers-reduced-motion:reduce){
  .contact-info-row{opacity:1;transform:none;}
  .contact-info-card.reveal.in .contact-info-row{animation:none;}
  .contact-info-row .ico{animation:none;}
}
.social-row{display:flex;gap:10px;margin-top:30px;position:relative;z-index:1;}
.social-row a{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;
}
.social-row a:hover{background:var(--grad-primary);transform:translateY(-4px) rotate(-8deg);}

.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-sm);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-group{margin-bottom:20px;opacity:0;transform:translateY(16px);}
.form-card.reveal.in .form-group{animation:formGroupIn .5s ease forwards;}
.form-group:nth-of-type(1){animation-delay:.08s;}
.form-group:nth-of-type(2){animation-delay:.16s;}
.form-group:nth-of-type(3){animation-delay:.24s;}
.form-group:nth-of-type(4){animation-delay:.32s;}
.form-group:nth-of-type(5){animation-delay:.4s;}
.form-group:nth-of-type(n+6){animation-delay:.48s;}
@keyframes formGroupIn{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .form-group{opacity:1;transform:none;}
  .form-card.reveal.in .form-group{animation:none;}
}
.form-group label{display:block;font-weight:700;font-size:.85rem;margin-bottom:8px;color:var(--navy-900);}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:.92rem;color:var(--ink-900);transition:border-color .2s ease,box-shadow .2s ease;background:var(--bg-soft);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(59,108,246,.12);background:#fff;
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-note{font-size:.78rem;color:var(--ink-500);margin-top:14px;}
.form-success{
  display:none;background:rgba(15,157,110,.1);border:1px solid rgba(15,157,110,.3);color:#0f9d6e;
  padding:16px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;margin-bottom:20px;align-items:center;gap:10px;
}
.form-success.show{display:flex;}

.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-top:56px;filter:grayscale(.15);}
.map-embed iframe{width:100%;height:380px;border:0;display:block;}

/* ---------- Support team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px;}
.team-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:28px 20px;text-align:center;
  --accent-grad:var(--grad-primary);--accent-glow:var(--glow-blue);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.team-card:nth-child(4n+2){--accent-grad:var(--grad-violet);--accent-glow:var(--glow-violet);}
.team-card:nth-child(4n+3){--accent-grad:var(--grad-teal);--accent-glow:var(--glow-teal);}
.team-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -16px var(--accent-glow);border-color:transparent;}
.team-avatar{
  width:64px;height:64px;border-radius:50%;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  box-shadow:0 14px 28px -10px var(--accent-glow);
}
.team-avatar svg{width:28px;height:28px;}
.team-card strong{display:block;font-size:1.02rem;margin-bottom:10px;color:var(--ink-900);}
.team-phone{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;
  color:var(--blue-600);
}
.team-phone svg{width:14px;height:14px;flex-shrink:0;}
.team-phone:hover{color:var(--blue-500);}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Table (compare) ---------- */
.compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem;}
.compare-table thead th{background:var(--bg-soft);font-family:var(--ff-head);font-weight:700;color:var(--navy-900);}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table td.yes{color:var(--success);font-weight:700;}
.compare-table td.no{color:var(--ink-300);}

/* ---------- Tag pills ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;}
.pill{background:var(--bg-soft-2);color:var(--ink-700);font-weight:600;font-size:.82rem;padding:8px 16px;border-radius:100px;}

/* ---------- Footer ---------- */
.site-footer{background:#0a1128;color:#c3cbee;padding:80px 0 0;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand p{color:#9fb0e0;font-size:.9rem;margin:18px 0 22px;max-width:280px;}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:20px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{color:#9fb0e0;font-size:.88rem;transition:color .2s ease;}
.footer-col ul li a:hover{color:#fff;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;color:#9fb0e0;font-size:.88rem;margin-bottom:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;flex-wrap:wrap;gap:14px;}
.footer-bottom p{color:#7c88b8;font-size:.82rem;}
.footer-legal{display:flex;gap:22px;}
.footer-legal a{color:#7c88b8;font-size:.82rem;}
.footer-legal a:hover{color:#fff;}

.back-to-top{
  position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;
  background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px -8px rgba(15,98,212,.6);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.3s;z-index:900;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Utilities ---------- */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.w-icon{width:24px;height:24px;color:#fff;}
.w-icon-sm{width:18px;height:18px;}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .topbar-item:nth-child(3){display:none;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero p.lead{margin-left:auto;margin-right:auto;}
  .hero-cta,.hero-stats{justify-content:center;}
  .hero-visual{max-width:480px;margin:0 auto;transform:none;align-self:auto;}
  .split{grid-template-columns:1fr;}
  .split-visual{order:-1;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-wrap{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .topbar{display:none;}
  .nav-links,.nav-cta .btn-outline{display:none;}
  .nav-toggle{display:flex;}
  .nav-links.mobile-open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);padding:14px;gap:2px;box-shadow:var(--shadow-md);
  }
  .nav-links.mobile-open .dropdown{
    position:static;box-shadow:none;border:none;opacity:1;visibility:visible;transform:none;
    display:none;padding-left:14px;
  }
  .nav-links.mobile-open .has-dropdown.open .dropdown{display:flex;flex-direction:column;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-banner{flex-direction:column;text-align:center;padding:44px 28px;}
  .footer-top{grid-template-columns:1fr;}
  .price-card.featured{transform:none;}
  .footer-bottom{flex-direction:column;text-align:center;}
}
@media(max-width:520px){
  .section{padding:64px 0;}
  .hero{padding:120px 0 80px;}
  .cta-banner .btns{justify-content:center;width:100%;}
  .cta-banner .btns .btn{flex:1;}
}