/* ============================================
   WebClub — Premium Hosting & Web Design
   Master Stylesheet
   ============================================ */

:root{
  --navy-900:#0a1024;
  --navy-800:#0f1933;
  --navy-700:#152043;
  --navy-600:#1e2a55;
  --slate-500:#46527a;
  --slate-400:#6b7494;
  --slate-300:#a0a9c4;
  --slate-200:#cfd5e6;
  --slate-100:#e8ecf5;
  --white:#ffffff;
  --bg:#f6f8fc;
  --brand:#3b82f6;
  --brand-2:#06b6d4;
  --brand-3:#8b5cf6;
  --brand-4:#22d3ee;
  --accent:#f59e0b;
  --success:#10b981;
  --danger:#ef4444;
  --maple:#d52b1e;
  --grad-hero: linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 35%,#06b6d4 100%);
  --grad-cyan: linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);
  --grad-purple: linear-gradient(135deg,#8b5cf6 0%,#3b82f6 100%);
  --grad-orange: linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);
  --grad-green: linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
  --grad-card: linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 100%);
  --grad-dark: linear-gradient(180deg,#0a1024 0%,#152043 100%);
  --shadow-sm: 0 2px 6px rgba(15,25,51,.06);
  --shadow-md: 0 8px 24px rgba(15,25,51,.08);
  --shadow-lg: 0 20px 60px rgba(15,25,51,.14);
  --shadow-glow: 0 10px 40px rgba(59,130,246,.35);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --container:1200px;
  --container-wide:1320px;
  --t-fast:.18s;
  --t:.3s;
  --t-slow:.6s;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  color:#1a233f;
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none; transition:color var(--t-fast)}
a:hover{color:var(--brand-3)}
button{font-family:inherit}

.container{max-width:var(--container); margin:0 auto; padding:0 24px; width:100%}
.container-wide{max-width:var(--container-wide); margin:0 auto; padding:0 24px; width:100%}

h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--navy-900); margin:0 0 .6em; line-height:1.18; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem, 4.4vw, 3.6rem); font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:800}
h3{font-size:clamp(1.25rem, 2vw, 1.5rem); font-weight:700}
h4{font-size:1.1rem; font-weight:700}
p{margin:0 0 1em; color:var(--slate-500)}
.lead{font-size:clamp(1.05rem, 1.5vw, 1.2rem); color:var(--slate-500); line-height:1.65; max-width:60ch}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); background:rgba(59,130,246,.1); padding:6px 14px; border-radius:999px; margin-bottom:14px}
.gradient-text{background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:14px; font-weight:700; font-size:.98rem; letter-spacing:.01em; border:none; cursor:pointer; transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t); text-decoration:none; position:relative; overflow:hidden; white-space:nowrap; line-height:1}
.btn-primary{background:var(--grad-hero); color:#fff; box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px); color:#fff; box-shadow:0 14px 50px rgba(59,130,246,.5)}
.btn-secondary{background:#fff; color:var(--navy-800); box-shadow:var(--shadow-md); border:1px solid var(--slate-100)}
.btn-secondary:hover{transform:translateY(-2px); color:var(--brand); border-color:var(--brand)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px)}
.btn-accent{background:var(--grad-orange); color:#fff; box-shadow:0 10px 30px rgba(245,158,11,.4)}
.btn-accent:hover{transform:translateY(-2px); color:#fff}
.btn-sm{padding:10px 18px; font-size:.88rem; border-radius:10px}
.btn-lg{padding:16px 32px; font-size:1.05rem}
.btn .arrow{transition:transform var(--t)}
.btn:hover .arrow{transform:translateX(3px)}

.site-header{position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0; transition:background var(--t), box-shadow var(--t), padding var(--t)}
.site-header.scrolled{background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:0 2px 18px rgba(15,25,51,.06); padding:10px 0}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--navy-900); letter-spacing:-.02em}
.logo svg{height:38px; width:auto}
.logo .logo-text{display:flex; align-items:baseline; gap:2px}
.logo .logo-dot{color:var(--brand-2)}

.nav-links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--navy-800); padding:10px 14px; border-radius:10px; font-weight:600; font-size:.95rem; position:relative; transition:background var(--t), color var(--t)}
.nav-links a:hover{background:rgba(59,130,246,.08); color:var(--brand)}
.nav-links a.active{color:var(--brand)}
.nav-links a.active::after{content:""; position:absolute; left:18%; right:18%; bottom:2px; height:3px; border-radius:3px; background:var(--grad-hero)}
.nav-cta{display:flex; gap:10px; align-items:center}

.mobile-toggle{display:none; background:transparent; border:none; width:44px; height:44px; cursor:pointer; padding:0; color:var(--navy-900); border-radius:10px}
.mobile-toggle span{display:block; width:24px; height:2.5px; background:currentColor; margin:5px auto; border-radius:3px; transition:transform var(--t), opacity var(--t)}
.mobile-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.hero{position:relative; padding:160px 0 100px; background:var(--grad-dark); color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(900px 500px at 85% -10%, rgba(6,182,212,.25), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(139,92,246,.25), transparent 60%), radial-gradient(500px 300px at 50% 50%, rgba(59,130,246,.18), transparent 70%); pointer-events:none}
.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: 60px 60px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events:none}
.hero .container{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center}
.hero h1{color:#fff; margin-bottom:18px}
.hero h1 .accent-word{background:linear-gradient(90deg,#22d3ee, #818cf8); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:rgba(255,255,255,.78); font-size:1.15rem; max-width:55ch}
.hero .eyebrow{background:rgba(34,211,238,.16); color:#67e8f9}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-meta{margin-top:34px; display:flex; gap:28px; flex-wrap:wrap; color:rgba(255,255,255,.7); font-size:.92rem}
.hero-meta div{display:flex; align-items:center; gap:8px}
.hero-meta svg{flex-shrink:0}

.hero-visual{position:relative}
.hero-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:28px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 25px 80px rgba(0,0,0,.35)}
.hero-card .h-row{display:flex; gap:8px; align-items:center; margin-bottom:18px}
.hero-card .dot{width:11px; height:11px; border-radius:50%; background:#475569}
.hero-card .dot.r{background:#ef4444} .hero-card .dot.y{background:#f59e0b} .hero-card .dot.g{background:#10b981}
.hero-card .url{margin-left:10px; background:rgba(255,255,255,.06); padding:6px 14px; border-radius:8px; color:#cbd5e1; font-size:.82rem; flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.metric{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); padding:18px 14px; border-radius:14px; text-align:center; border:1px solid rgba(255,255,255,.09)}
.metric .num{font-weight:800; font-size:1.5rem; color:#fff; display:block}
.metric .lbl{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8}
.metric.cyan .num{color:#22d3ee}
.metric.violet .num{color:#a78bfa}
.metric.amber .num{color:#fbbf24}

.canadian-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#fff; font-size:.82rem; font-weight:600; margin-bottom:16px}
.canadian-badge svg{height:18px; width:auto}

.float{position:absolute; opacity:.6; animation:floaty 8s ease-in-out infinite; z-index:1}
.float.f1{top:18%; left:-20px; animation-delay:-2s}
.float.f2{bottom:14%; left:42%; animation-delay:-4s}
.float.f3{top:30%; right:8%; animation-delay:-1s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-22px) rotate(8deg)}}

.section{padding:90px 0; position:relative}
.section-tight{padding:60px 0}
.section-head{text-align:center; max-width:760px; margin:0 auto 56px}
.section-head .lead{margin:0 auto}
.section.alt{background:linear-gradient(180deg,#f6f8fc 0%, #eef2fb 100%)}
.section.dark{background:var(--grad-dark); color:#fff}
.section.dark h2{color:#fff}
.section.dark .lead{color:rgba(255,255,255,.75)}

.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.service-card{background:#fff; border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-sm); border:1px solid #eef2f9; transition:transform var(--t), box-shadow var(--t), border-color var(--t); position:relative; overflow:hidden}
.service-card::before{content:""; position:absolute; inset:auto -30% -50% auto; width:200px; height:200px; background:var(--grad-cyan); filter:blur(60px); opacity:0; transition:opacity var(--t)}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:#dbe6fb}
.service-card:hover::before{opacity:.12}
.service-card .icon-wrap{width:58px; height:58px; border-radius:16px; background:var(--grad-cyan); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px; box-shadow:0 12px 30px rgba(6,182,212,.3); transition:transform var(--t)}
.service-card:hover .icon-wrap{transform:scale(1.05) rotate(-3deg)}
.service-card .icon-wrap svg{width:28px; height:28px}
.service-card h3{margin-bottom:6px}
.service-card p{margin-bottom:0; font-size:.95rem}
.service-card .more{display:inline-flex; align-items:center; gap:4px; margin-top:14px; color:var(--brand); font-weight:600; font-size:.9rem}

.icon-cyan{background:var(--grad-cyan); box-shadow:0 12px 30px rgba(6,182,212,.3)}
.icon-purple{background:var(--grad-purple); box-shadow:0 12px 30px rgba(139,92,246,.3)}
.icon-orange{background:var(--grad-orange); box-shadow:0 12px 30px rgba(245,158,11,.3)}
.icon-green{background:var(--grad-green); box-shadow:0 12px 30px rgba(16,185,129,.3)}
.icon-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 12px 30px rgba(59,130,246,.3)}
.icon-pink{background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 12px 30px rgba(236,72,153,.3)}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.price-card{background:#fff; border-radius:var(--radius-xl); padding:36px 32px; border:1.5px solid #eef2f9; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--t), box-shadow var(--t)}
.price-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.price-card.featured{background:var(--grad-dark); color:#fff; border-color:transparent; box-shadow:0 30px 60px rgba(15,25,51,.25); transform:translateY(-12px)}
.price-card.featured::before{content:"Most Popular"; position:absolute; top:18px; right:18px; background:var(--grad-orange); color:#fff; font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.06em}
.price-card.featured h3, .price-card.featured .price{color:#fff}
.price-card.featured .price-sub{color:rgba(255,255,255,.65)}
.price-card.featured ul li{color:rgba(255,255,255,.85)}
.price-card.featured .btn-secondary{background:#fff; color:var(--navy-900); border-color:transparent}
.price-card h3{margin-bottom:4px}
.price-card .price-desc{color:var(--slate-400); font-size:.92rem; margin-bottom:18px}
.price-card .price{font-family:var(--font-display); font-weight:800; font-size:2.8rem; color:var(--navy-900); letter-spacing:-.02em; display:flex; align-items:baseline; gap:6px; line-height:1}
.price-card .price .currency{font-size:1.2rem; align-self:flex-start; margin-top:6px}
.price-card .price .per{font-size:.85rem; font-weight:600; color:var(--slate-400)}
.price-card .price-sub{font-size:.88rem; color:var(--slate-400); margin-top:6px; margin-bottom:24px}
.price-card ul{list-style:none; padding:0; margin:0 0 26px}
.price-card ul li{display:flex; align-items:center; gap:10px; padding:9px 0; color:var(--navy-800); font-size:.95rem; border-bottom:1px solid rgba(0,0,0,.04)}
.price-card.featured ul li{border-bottom-color:rgba(255,255,255,.07)}
.price-card ul li:last-child{border-bottom:0}
.price-card ul li svg{flex-shrink:0; color:var(--success)}
.price-card.featured ul li svg{color:var(--brand-4)}

.domain-search{background:linear-gradient(135deg,#1e3a8a,#0ea5e9); border-radius:var(--radius-xl); padding:48px; color:#fff; position:relative; overflow:hidden; box-shadow:0 30px 70px rgba(30,58,138,.35)}
.domain-search::before{content:""; position:absolute; inset:auto -20% -60% auto; width:400px; height:400px; background:radial-gradient(circle, rgba(34,211,238,.35), transparent 60%); border-radius:50%}
.domain-search h2{color:#fff; margin-bottom:8px}
.domain-search p{color:rgba(255,255,255,.85)}
.search-form{display:flex; gap:10px; margin-top:24px; position:relative; z-index:2; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:8px; border-radius:18px; backdrop-filter:blur(8px)}
.search-form input{flex:1; background:#fff; border:none; padding:16px 20px; border-radius:12px; font-size:1rem; font-family:inherit; color:var(--navy-900); outline:none}
.search-form button{padding:16px 28px; background:var(--grad-orange); color:#fff; border:none; border-radius:12px; font-weight:700; cursor:pointer; font-size:.98rem; transition:transform var(--t); white-space:nowrap}
.search-form button:hover{transform:translateY(-2px)}
.tlds{display:flex; gap:20px; flex-wrap:wrap; margin-top:24px; position:relative; z-index:2}
.tld{padding:8px 16px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px}
.tld .price-tag{color:#fbbf24; font-weight:800}

.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.feature-row.reverse{direction:rtl}
.feature-row.reverse > *{direction:ltr}
.feature-row .feature-img{border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; aspect-ratio: 4/3; background:var(--grad-cyan)}
.feature-row .feature-img svg, .feature-row .feature-img img{width:100%; height:100%; object-fit:cover}
.feature-list{list-style:none; padding:0; margin:18px 0 0}
.feature-list li{display:flex; gap:14px; padding:12px 0; align-items:flex-start}
.feature-list .check{flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(16,185,129,.12); color:var(--success); display:flex; align-items:center; justify-content:center}
.feature-list h4{margin:0 0 4px}
.feature-list p{margin:0; font-size:.95rem}

.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:46px}
.trust-card{text-align:center; padding:28px 18px; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); transition:transform var(--t), background var(--t)}
.trust-card:hover{transform:translateY(-4px); background:rgba(255,255,255,.1)}
.trust-card .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; letter-spacing:-.02em; background:linear-gradient(90deg,#22d3ee,#818cf8); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:6px}
.trust-card .lbl{font-size:.9rem; color:rgba(255,255,255,.7)}

.faq{max-width:820px; margin:0 auto}
.faq-item{background:#fff; border-radius:var(--radius); margin-bottom:14px; box-shadow:var(--shadow-sm); border:1px solid #eef2f9; overflow:hidden; transition:box-shadow var(--t)}
.faq-item:hover{box-shadow:var(--shadow-md)}
.faq-q{width:100%; background:transparent; border:none; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; font-size:1.05rem; font-weight:700; color:var(--navy-900); cursor:pointer; font-family:inherit}
.faq-q .icon{flex-shrink:0; width:32px; height:32px; border-radius:10px; background:rgba(59,130,246,.1); color:var(--brand); display:flex; align-items:center; justify-content:center; transition:transform var(--t), background var(--t)}
.faq-item.open .faq-q .icon{transform:rotate(45deg); background:var(--grad-hero); color:#fff}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--t) ease; padding:0 24px}
.faq-item.open .faq-a{max-height:400px; padding-bottom:22px}
.faq-a p{margin:0; color:var(--slate-500)}

.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:start}
.contact-info{background:var(--grad-dark); color:#fff; padding:40px; border-radius:var(--radius-xl); position:relative; overflow:hidden}
.contact-info::before{content:""; position:absolute; inset:-60% auto auto -40%; width:340px; height:340px; background:radial-gradient(circle, rgba(34,211,238,.3), transparent 60%); border-radius:50%}
.contact-info h3{color:#fff}
.contact-info p{color:rgba(255,255,255,.8)}
.contact-info ul{list-style:none; padding:0; margin:28px 0 0; position:relative; z-index:2}
.contact-info ul li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(255,255,255,.08)}
.contact-info ul li:first-child{border-top:0}
.contact-info ul li .ic{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#22d3ee; flex-shrink:0}
.contact-info ul li strong{display:block; color:#fff; margin-bottom:2px}
.contact-info ul li span{color:rgba(255,255,255,.7); font-size:.92rem}

.form-card{background:#fff; padding:40px; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); border:1px solid #eef2f9}
.form-group{margin-bottom:18px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-group label{display:block; font-weight:600; font-size:.9rem; color:var(--navy-800); margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%; padding:14px 16px; border:1.5px solid #e6ebf5; border-radius:12px; font-size:.98rem; font-family:inherit; background:#fafbff; color:var(--navy-900); outline:none; transition:border-color var(--t), background var(--t), box-shadow var(--t)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.form-group textarea{min-height:130px; resize:vertical}
.form-card button[type=submit]{width:100%; margin-top:10px}

.newsletter{background:var(--grad-purple); border-radius:var(--radius-xl); padding:54px 48px; color:#fff; position:relative; overflow:hidden; text-align:center}
.newsletter::before{content:""; position:absolute; inset:-50% auto auto -10%; width:400px; height:400px; background:radial-gradient(circle, rgba(34,211,238,.3), transparent 60%); border-radius:50%}
.newsletter::after{content:""; position:absolute; inset:auto -10% -50% auto; width:400px; height:400px; background:radial-gradient(circle, rgba(245,158,11,.25), transparent 60%); border-radius:50%}
.newsletter h2{color:#fff; position:relative; z-index:2}
.newsletter p{color:rgba(255,255,255,.85); max-width:60ch; margin:0 auto 28px; position:relative; z-index:2}
.newsletter form{display:flex; gap:10px; max-width:520px; margin:0 auto; position:relative; z-index:2; background:rgba(255,255,255,.1); padding:8px; border-radius:18px; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px)}
.newsletter input{flex:1; padding:14px 18px; border:none; border-radius:12px; font-size:1rem; font-family:inherit; outline:none}
.newsletter button{padding:14px 26px; border:none; border-radius:12px; background:#0a1024; color:#fff; font-weight:700; cursor:pointer; font-family:inherit; font-size:.95rem; transition:transform var(--t)}
.newsletter button:hover{transform:translateY(-2px)}

.cta-banner{background:var(--grad-hero); color:#fff; border-radius:var(--radius-xl); padding:60px 50px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(29,78,216,.35)}
.cta-banner::before{content:""; position:absolute; inset:auto -10% -80% auto; width:500px; height:500px; background:radial-gradient(circle, rgba(34,211,238,.3), transparent 60%); border-radius:50%}
.cta-banner h2{color:#fff; margin:0 0 6px; max-width:600px}
.cta-banner p{color:rgba(255,255,255,.85); margin:0; max-width:600px}
.cta-banner .btns{display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:2}

.site-footer{background:#070c1f; color:rgba(255,255,255,.7); padding:80px 0 30px; position:relative}
.site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(59,130,246,.5), transparent)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; gap:40px}
.footer-grid h5{color:#fff; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 18px; font-weight:700}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{padding:5px 0}
.footer-grid a{color:rgba(255,255,255,.65); font-size:.92rem; transition:color var(--t)}
.footer-grid a:hover{color:#22d3ee}
.footer-brand .logo{color:#fff; margin-bottom:14px}
.footer-brand .logo .logo-text{color:#fff}
.footer-brand p{font-size:.92rem; line-height:1.7; margin-bottom:18px}
.socials{display:flex; gap:10px}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform var(--t), background var(--t)}
.socials a:hover{transform:translateY(-3px); background:var(--brand)}
.footer-bottom{margin-top:60px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; font-size:.86rem; color:rgba(255,255,255,.55)}
.footer-bottom .canadian-badge{background:rgba(213,43,30,.12); border-color:rgba(213,43,30,.3); color:#fff}

.page-hero{padding:160px 0 80px; background:var(--grad-dark); color:#fff; text-align:center; position:relative; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 500px at 80% 0%, rgba(139,92,246,.3), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(6,182,212,.3), transparent 60%)}
.page-hero h1{color:#fff; position:relative; z-index:2; margin-bottom:14px}
.page-hero p{color:rgba(255,255,255,.78); position:relative; z-index:2; max-width:680px; margin:0 auto}
.breadcrumb{display:inline-flex; gap:8px; align-items:center; font-size:.86rem; color:rgba(255,255,255,.65); position:relative; z-index:2; margin-top:16px}
.breadcrumb a{color:rgba(255,255,255,.75)}
.breadcrumb a:hover{color:#22d3ee}
.breadcrumb .sep{opacity:.5}

.go-top{position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:14px; background:var(--grad-hero); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-glow); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity var(--t), transform var(--t); z-index:80}
.go-top.visible{opacity:1; transform:translateY(0); pointer-events:auto}
.go-top:hover{transform:translateY(-4px)}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal-stagger.in > *{opacity:1; transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}

@keyframes fadeUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{0%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}

.animate-pulse{animation:pulse 2.4s ease-in-out infinite}
.shine{position:relative; overflow:hidden}
.shine::after{content:""; position:absolute; top:0; bottom:0; width:60%; left:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); animation:shine 3s infinite linear}

@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer-grid > div:nth-child(4){grid-column:1/2}
  .footer-grid > div:nth-child(5){grid-column:2/4}
  .pricing{grid-template-columns:1fr; max-width:480px; margin:0 auto}
  .price-card.featured{transform:none}
  .contact-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .feature-row, .feature-row.reverse{grid-template-columns:1fr; direction:ltr}
}

@media (max-width: 768px){
  body{font-size:15.5px}
  .section{padding:64px 0}
  .hero{padding:140px 0 70px}
  .nav-links{position:fixed; top:62px; left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); flex-direction:column; align-items:stretch; padding:14px; gap:0; transform:translateY(-150%); transition:transform var(--t); box-shadow:0 18px 40px rgba(15,25,51,.1); max-height:calc(100vh - 70px); overflow-y:auto; margin:0}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 16px; border-radius:10px; font-size:1rem}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:rgba(59,130,246,.1); color:var(--brand)}
  .mobile-toggle{display:flex; flex-direction:column; align-items:center; justify-content:center}
  .nav-cta{display:none}
  .nav-links .nav-cta-mobile{display:flex; margin-top:8px}
  .grid-3, .grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:nth-child(1){grid-column:1/3}
  .footer-grid > div:nth-child(5){grid-column:1/3}
  .footer-bottom{flex-direction:column; text-align:center}
  .domain-search, .newsletter, .cta-banner, .contact-info, .form-card{padding:34px 24px}
  .search-form, .newsletter form{flex-direction:column}
  .search-form button, .newsletter button{width:100%}
  .cta-banner{flex-direction:column; text-align:center; align-items:flex-start}
  .price-card{padding:28px 22px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .btn-lg{width:100%}
}

@media (max-width: 480px){
  h1{font-size:2rem}
  h2{font-size:1.6rem}
  .container{padding:0 18px}
  .price-card .price{font-size:2.2rem}
  .domain-search, .newsletter, .cta-banner{padding:28px 20px}
}

.page-hosting .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(6,182,212,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.3), transparent 60%)}
.page-domains .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(245,158,11,.3), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(236,72,153,.3), transparent 60%)}
.page-design .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(139,92,246,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.3), transparent 60%)}
.page-email .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(16,185,129,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(6,182,212,.3), transparent 60%)}
.page-about .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(59,130,246,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(139,92,246,.3), transparent 60%)}
.page-contact .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(236,72,153,.3), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.3), transparent 60%)}
.page-faq .page-hero::before{background:radial-gradient(700px 500px at 80% 0%, rgba(245,158,11,.3), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(34,211,238,.3), transparent 60%)}

@media print{.site-header, .go-top, .site-footer{display:none}}

/* ============================================
   POLISH PASS — additional refinements
   ============================================ */

/* Smooth scroll-margin for anchored sections under fixed header */
section[id]{scroll-margin-top:90px}

/* Better focus rings (a11y) */
:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px; border-radius:6px}

/* Premium link hover underline */
.entry-content a, .lead a, p a{position:relative; transition:color var(--t)}

/* Add subtle border to glass cards */
.glass{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
}

/* Strong section dividers */
.section + .section.dark, .section.dark + .section{
  position:relative;
}

/* Better tablet pricing - 3 cols stay if room */
@media (min-width: 700px) and (max-width: 1024px){
  .pricing{grid-template-columns:1fr 1fr; max-width:760px}
  .price-card.featured{grid-column:1/3; max-width:480px; margin:0 auto}
}

/* Make selects not have native arrow on iOS Safari */
.form-group select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346527a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:36px;
}

/* iPhone Safari notch safety */
@supports (padding: max(0px)){
  .site-header{padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right))}
  .site-footer{padding-bottom:max(30px, env(safe-area-inset-bottom))}
  .go-top{right:max(22px, env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom))}
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important}
}

/* Better mobile menu visibility on light backgrounds */
@media (max-width: 768px){
  .site-header.scrolled .mobile-toggle{color:var(--navy-900)}
}

/* Selection color */
::selection{background:var(--brand); color:#fff}

/* Skip nav link */
.skip-link{position:absolute; left:-9999px; top:0; padding:10px 16px; background:var(--brand); color:#fff; z-index:200}
.skip-link:focus{left:0}

/* ============================================
   HOTFIX — header layout + icon sizing
   ============================================ */

/* Hide the mobile-only CTA on desktop (was bleeding into desktop nav) */
.nav-cta-mobile{display:none}
@media (max-width:768px){
  .nav-cta-mobile{display:flex; margin-top:8px}
}

/* Keep nav links on one line — never wrap text within a single nav item */
.nav-links a{white-space:nowrap}

/* Tighten nav on medium screens so 8 items + CTA fit cleanly */
@media (max-width:1280px){
  .nav-links{gap:2px}
  .nav-links a{padding:8px 10px; font-size:.9rem}
  .nav-cta .btn-sm{padding:8px 14px; font-size:.85rem}
  .logo{font-size:1.2rem}
  .logo svg{height:34px}
}

/* On very narrow desktop, allow logo text to wrap, but keep brand inline */
.logo{flex-shrink:0; white-space:nowrap}
.logo-text{white-space:nowrap}

/* Fix oversized inline SVG icons — give every <svg> with no explicit size a sensible default */
svg:not([width]):not([height]){width:1em; height:1em}

/* Hero meta icons should be small */
.hero-meta svg{width:18px; height:18px; flex-shrink:0}
.hero-meta div{flex-shrink:0}

/* Service card icon wraps - children svg get sized by parent class already, ensure */
.service-card .icon-wrap svg,
.icon-wrap svg{width:28px; height:28px}

/* Feature list check icon */
.feature-list .check svg{width:18px; height:18px}

/* Footer social icons */
.socials svg{width:18px; height:18px}

/* Logo svg keeps its width based on height ratio */
.logo svg{width:auto}

/* Contact info icons */
.contact-info ul li .ic svg{width:20px; height:20px}

/* FAQ icon */
.faq-q .icon svg{width:16px; height:16px}

/* Search-form globe icon */
.search-form button svg{width:18px; height:18px}

/* Sidebar nav icons */
.sidebar nav a svg{width:18px; height:18px; flex-shrink:0}

/* Dashboard stat icons */
.dash-stat .ic svg{width:22px; height:22px}

/* Quick-action card icons */
.quick-actions a svg{width:24px; height:24px}

/* Trust card icons */
.trust-card svg{width:22px; height:22px}

/* Pricing card check icons */
.price-card ul li svg{width:18px; height:18px; flex-shrink:0}

/* Newsletter & search button icons */
.search-form button svg, .newsletter button svg{flex-shrink:0}

/* TLD pills */
.tld svg{width:14px; height:14px}

/* Go-top icon */
.go-top svg{width:20px; height:20px}

/* Mobile toggle icons unchanged (uses spans, not svg) */

/* Ensure container has overflow control on weird viewports */
.container, .container-wide{overflow:visible}

/* Slightly compress hero on narrow desktops */
@media (max-width:1280px){
  .hero{padding:140px 0 80px}
  .hero h1{font-size:clamp(1.9rem, 3.6vw, 3rem)}
}

/* ============================================
   HOTFIX v2 — header readability over dark heroes
   ============================================ */

/* By default (transparent header over dark hero), use light text */
.site-header .logo{color:#fff}
.site-header .logo-text{color:#fff}
.site-header .logo .logo-dot{color:#22d3ee}
.site-header .nav-links a{color:#fff}
.site-header .nav-links a:hover{background:rgba(255,255,255,.1); color:#fff}
.site-header .nav-links a.active{color:#22d3ee}
.site-header .nav-links a.active::after{background:linear-gradient(90deg,#22d3ee,#818cf8)}
.site-header .mobile-toggle{color:#fff}

/* When scrolled (white frosted background), switch to dark text */
.site-header.scrolled .logo,
.site-header.scrolled .logo-text{color:var(--navy-900)}
.site-header.scrolled .logo .logo-dot{color:var(--brand-2)}
.site-header.scrolled .nav-links a{color:var(--navy-800)}
.site-header.scrolled .nav-links a:hover{background:rgba(59,130,246,.08); color:var(--brand)}
.site-header.scrolled .nav-links a.active{color:var(--brand)}
.site-header.scrolled .nav-links a.active::after{background:var(--grad-hero)}
.site-header.scrolled .mobile-toggle{color:var(--navy-900)}

/* Mobile dropdown menu — always white card, always dark text */
@media (max-width:768px){
  .nav-links{background:rgba(255,255,255,.98)}
  .nav-links a, .site-header .nav-links a{color:var(--navy-800)}
  .nav-links a.active, .site-header .nav-links a.active{color:var(--brand); background:rgba(59,130,246,.1)}
  .nav-links a:hover, .site-header .nav-links a:hover{background:rgba(59,130,246,.08); color:var(--brand)}
}

/* Make sure header isn't transparent enough to disappear over light sections */
.site-header:not(.scrolled){
  background:linear-gradient(180deg, rgba(10,16,36,.55) 0%, rgba(10,16,36,0) 100%);
  -webkit-backdrop-filter:blur(0);
  backdrop-filter:blur(0);
}

/* Improve secondary button readability on dark transparent header */
.site-header:not(.scrolled) .btn-secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:none;
}
.site-header:not(.scrolled) .btn-secondary:hover{
  background:rgba(255,255,255,.22);
  color:#fff;
  border-color:rgba(255,255,255,.4);
}

/* ============================================
   FINAL HEADER REWRITE — always-visible, always readable
   ============================================ */

/* Solid frosted dark glass header — always visible over any background */
header.site-header{
  background:rgba(10,16,36,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px) !important;
  backdrop-filter:saturate(180%) blur(18px) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(10,16,36,.18);
}
header.site-header.scrolled{
  background:rgba(255,255,255,.95) !important;
  border-bottom-color:rgba(15,25,51,.08);
  box-shadow:0 2px 18px rgba(15,25,51,.08);
}

/* Logo */
header.site-header .logo,
header.site-header .logo .logo-text{color:#fff !important}
header.site-header .logo .logo-dot{color:#22d3ee !important}
header.site-header.scrolled .logo,
header.site-header.scrolled .logo .logo-text{color:var(--navy-900) !important}
header.site-header.scrolled .logo .logo-dot{color:var(--brand-2) !important}

/* Nav links */
header.site-header .nav-links{flex-wrap:nowrap}
header.site-header .nav-links a{
  color:#fff !important;
  white-space:nowrap;
  padding:8px 11px;
  font-size:.92rem;
}
header.site-header .nav-links a:hover{background:rgba(255,255,255,.12) !important; color:#fff !important}
header.site-header .nav-links a.active{color:#22d3ee !important; background:rgba(34,211,238,.12) !important}
header.site-header.scrolled .nav-links a{color:var(--navy-800) !important}
header.site-header.scrolled .nav-links a:hover{background:rgba(59,130,246,.08) !important; color:var(--brand) !important}
header.site-header.scrolled .nav-links a.active{color:var(--brand) !important; background:rgba(59,130,246,.08) !important}

/* Mobile toggle */
header.site-header .mobile-toggle{color:#fff !important}
header.site-header.scrolled .mobile-toggle{color:var(--navy-900) !important}

/* CTA buttons */
header.site-header .btn-secondary{
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:none;
}
header.site-header .btn-secondary:hover{background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.35)}
header.site-header.scrolled .btn-secondary{background:#fff; color:var(--navy-800); border-color:var(--slate-100)}
header.site-header.scrolled .btn-secondary:hover{color:var(--brand); border-color:var(--brand)}

/* The nav container — guarantee single row */
header.site-header .nav{flex-wrap:nowrap; gap:18px}

/* Tightening for cramped viewports */
@media (max-width:1180px){
  header.site-header .nav-links a{padding:7px 8px; font-size:.85rem}
  header.site-header .nav{gap:12px}
  header.site-header .logo .logo-text{font-size:1.1rem}
  header.site-header .logo svg{height:30px}
  header.site-header .nav-cta .btn-sm{padding:7px 12px; font-size:.82rem}
}

/* Mobile: hide buttons, show toggle, full-width dropdown */
@media (max-width:900px){
  header.site-header .nav-cta{display:none}
  header.site-header .mobile-toggle{display:flex; flex-direction:column; align-items:center; justify-content:center}
  header.site-header .nav-links{
    position:fixed;
    top:64px; left:0; right:0;
    background:rgba(255,255,255,.98) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-direction:column;
    align-items:stretch;
    padding:14px;
    gap:4px;
    transform:translateY(-150%);
    transition:transform .3s;
    box-shadow:0 18px 40px rgba(15,25,51,.15);
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    margin:0;
  }
  header.site-header .nav-links.open{transform:translateY(0)}
  header.site-header .nav-links a,
  header.site-header.scrolled .nav-links a{
    color:var(--navy-800) !important;
    padding:14px 16px;
    font-size:1rem;
    border-radius:10px;
  }
  header.site-header .nav-links a.active,
  header.site-header.scrolled .nav-links a.active{
    background:rgba(59,130,246,.1) !important;
    color:var(--brand) !important;
  }
  header.site-header .nav-links a.active::after{display:none}
  header.site-header .nav-cta-mobile{display:flex; margin-top:8px}
}

/* Hide mobile-cta on desktop, NO exceptions */
.nav-cta-mobile{display:none !important}
@media (max-width:900px){
  .nav-cta-mobile{display:flex !important; margin-top:8px}
}

/* Make the toggle button visible on dark header */
.site-header .mobile-toggle span{background:currentColor}

/* Push body content below fixed header on page-hero so it never hides under it */
.hero, .page-hero{padding-top:120px}
@media (max-width:900px){
  .hero, .page-hero{padding-top:100px}
}

/* ============================================================
   PREMIUM ANIMATION LAYER — modern, smooth, professional
   ============================================================ */

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#06b6d4,#3b82f6,#8b5cf6,#ec4899);
  background-size:200% 100%;
  z-index:200;
  pointer-events:none;
  transition:width .08s linear;
  animation:gradFlow 4s linear infinite;
}
@keyframes gradFlow{0%{background-position:0% 50%} 100%{background-position:200% 50%}}

/* Animated gradient text */
@keyframes gradText{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
.gradient-text{
  background:linear-gradient(90deg,#1e3a8a 0%,#06b6d4 25%,#8b5cf6 50%,#ec4899 75%,#f59e0b 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradText 6s ease infinite;
}

/* Floating blob bg for hero */
.hero::after{
  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: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation:gridShift 30s linear infinite;
}
@keyframes gridShift{from{background-position:0 0, 0 0} to{background-position:60px 60px, 60px 60px}}

/* Animated blob */
.hero-visual::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(circle at 30% 30%, rgba(34,211,238,.25), transparent 50%),
             radial-gradient(circle at 70% 70%, rgba(139,92,246,.22), transparent 55%);
  filter:blur(40px);
  z-index:-1;
  animation:blobMorph 14s ease-in-out infinite;
}
@keyframes blobMorph{
  0%,100%{transform:translate(0,0) scale(1) rotate(0)}
  33%{transform:translate(5%,-3%) scale(1.05) rotate(120deg)}
  66%{transform:translate(-4%,3%) scale(.95) rotate(240deg)}
}

/* Hero card subtle float */
.hero-card{animation:cardFloat 6s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}

/* Service card sweep on hover */
.service-card{overflow:hidden}
.service-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .9s ease;
  pointer-events:none;
}
.service-card:hover::after{transform:translateX(100%)}

/* Pricing card glow ring on hover */
.price-card{position:relative}
.price-card::after{
  content:""; position:absolute; inset:-2px;
  background:linear-gradient(135deg,#06b6d4,#8b5cf6,#ec4899,#f59e0b,#06b6d4);
  background-size:200% 200%;
  border-radius:inherit;
  opacity:0; z-index:-1;
  transition:opacity .35s ease;
  animation:gradFlow 4s linear infinite;
}
.price-card:hover::after{opacity:.85}
.price-card{background:#fff;}
.price-card.featured{background:var(--grad-dark)}

/* Floating CTA buttons subtle pulse */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .7s ease;
}
.btn-primary:hover::before{transform:translateX(100%)}

/* Metric counter glow */
.metric .num{transition:transform .3s ease, text-shadow .3s ease}
.metric:hover .num{transform:scale(1.08); text-shadow:0 0 24px currentColor}

/* Reveal — improved 3D effect */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal-stagger > *{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-stagger.in > *{opacity:1; transform:translateY(0)}

/* Hover lift for trust cards */
.trust-card{transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s, box-shadow .3s}
.trust-card:hover{transform:translateY(-8px) scale(1.04); background:rgba(255,255,255,.15); box-shadow:0 16px 40px rgba(34,211,238,.25)}

/* FAQ smooth */
.faq-item{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.faq-item:hover{transform:translateY(-2px); border-color:#dbe6fb}

/* Domain search button magnetic */
.search-form button{transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.search-form button:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 10px 24px rgba(245,158,11,.4)}

/* Newsletter wow */
.newsletter::before{animation:blobMorph 18s ease-in-out infinite}
.newsletter::after{animation:blobMorph 22s ease-in-out infinite reverse}

/* Section dividers animated */
@keyframes underlineExpand{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Page-specific entrance animations */
.page-home .hero h1{animation:fadeUpBig .9s cubic-bezier(.22,1,.36,1) both}
.page-home .hero p{animation:fadeUpBig .9s cubic-bezier(.22,1,.36,1) .15s both}
.page-home .hero .hero-cta{animation:fadeUpBig .9s cubic-bezier(.22,1,.36,1) .3s both}
.page-home .hero-visual{animation:scaleIn 1.1s cubic-bezier(.22,1,.36,1) .2s both}

.page-hosting .page-hero h1{animation:slideRight .9s cubic-bezier(.22,1,.36,1) both}
.page-design .page-hero h1{animation:scaleIn .9s cubic-bezier(.22,1,.36,1) both}
.page-domains .page-hero h1{animation:rotateIn 1s cubic-bezier(.22,1,.36,1) both}
.page-email .page-hero h1{animation:fadeUpBig .9s cubic-bezier(.22,1,.36,1) both}
.page-about .page-hero h1{animation:slideRight .9s cubic-bezier(.22,1,.36,1) both}
.page-contact .page-hero h1{animation:scaleIn .9s cubic-bezier(.22,1,.36,1) both}
.page-faq .page-hero h1{animation:fadeUpBig .9s cubic-bezier(.22,1,.36,1) both}

@keyframes fadeUpBig{from{opacity:0; transform:translateY(50px)} to{opacity:1; transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:scale(1)}}
@keyframes slideRight{from{opacity:0; transform:translateX(-50px)} to{opacity:1; transform:translateX(0)}}
@keyframes rotateIn{from{opacity:0; transform:rotate(-3deg) scale(.95)} to{opacity:1; transform:rotate(0) scale(1)}}

/* Floating particles in dark sections */
.section.dark{position:relative; overflow:hidden}
.section.dark::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(34,211,238,.6), transparent),
    radial-gradient(2px 2px at 80% 70%, rgba(167,139,250,.6), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(251,191,36,.6), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(236,72,153,.6), transparent),
    radial-gradient(2px 2px at 60% 50%, rgba(34,211,238,.5), transparent);
  animation:particles 30s linear infinite;
  pointer-events:none;
  opacity:.5;
}
@keyframes particles{0%{transform:translateY(0)} 100%{transform:translateY(-120px)}}

/* Hover for service icons - rotate + glow */
.service-card .icon-wrap{position:relative}
.service-card:hover .icon-wrap{transform:scale(1.1) rotate(-6deg)}
.service-card .icon-wrap::after{
  content:""; position:absolute; inset:-4px;
  background:inherit;
  border-radius:inherit;
  filter:blur(12px);
  opacity:0;
  transition:opacity .3s ease;
  z-index:-1;
}
.service-card:hover .icon-wrap::after{opacity:.6}

/* Smooth marquee for trust bar */
.marquee{display:flex; overflow:hidden; gap:60px; white-space:nowrap; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.marquee > *{animation:marqueeMove 35s linear infinite; flex-shrink:0}
@keyframes marqueeMove{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}

/* Reduce-motion safety (re-affirm) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition-duration:.01ms !important}
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important}
}

/* ============================================================
   REAL CANADIAN MAPLE LEAF — make it bigger + more prominent
   ============================================================ */
.canadian-badge{
  padding:10px 18px 10px 14px;
  gap:10px;
  font-size:.92rem;
  font-weight:700;
  border-radius:999px;
  background:rgba(213,43,30,.12);
  border:1.5px solid rgba(213,43,30,.4);
  color:#fff;
  position:relative;
}
.canadian-badge .maple-icon{
  width:26px; height:26px;
  display:inline-flex;
  align-items:center; justify-content:center;
  flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(213,43,30,.5));
}
.canadian-badge .maple-icon svg{width:100%; height:100%}

/* Footer canadian badge — high contrast */
.site-footer .canadian-badge{
  background:rgba(213,43,30,.18);
  border-color:rgba(213,43,30,.6);
}

/* Hero canadian badge — most visible */
.hero .canadian-badge{
  background:rgba(255,255,255,.1);
  border-color:rgba(213,43,30,.7);
  backdrop-filter:blur(6px);
}

/* Big floating maple leaf as hero decoration */
.maple-decoration{
  position:absolute;
  width:120px; height:120px;
  opacity:.08;
  pointer-events:none;
  transform:rotate(-12deg);
  animation:mapleFloat 14s ease-in-out infinite;
  z-index:1;
}
@keyframes mapleFloat{
  0%,100%{transform:translateY(0) rotate(-12deg)}
  50%{transform:translateY(-16px) rotate(-8deg)}
}
.hero .maple-decoration.top-right{top:80px; right:8%; opacity:.12}
.hero .maple-decoration.bottom-left{bottom:60px; left:5%; opacity:.08; transform:rotate(18deg)}
.page-hero .maple-decoration{top:30%; right:8%; width:90px; height:90px; opacity:.1}

/* Contact info maple badge */
.contact-info .canadian-badge{
  background:rgba(213,43,30,.18);
  border-color:rgba(213,43,30,.5);
}

/* ============================================
   LOGO SIZING — match new wide W-mark logo (400x100 viewBox)
   ============================================ */
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.logo svg{
  height:42px;
  width:auto;
  display:block;
}
@media (max-width:1180px){
  .logo svg{height:36px}
}
@media (max-width:768px){
  .logo svg{height:34px}
}
/* Hide any leftover .logo-text span since the SVG now contains the wordmark */
.logo .logo-text{display:none !important}

/* ============================================
   LOGO — make it bigger and more prominent
   ============================================ */
.logo svg{height:50px !important; width:auto; display:block}
@media (max-width:1180px){.logo svg{height:42px !important}}
@media (max-width:768px){.logo svg{height:38px !important}}
.site-header{padding:18px 0}
.site-header.scrolled{padding:12px 0}

/* ============================================
   MAPLE LEAF — bigger badge, modern animation
   ============================================ */
.canadian-badge .maple-icon{
  width:30px !important;
  height:30px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  filter:drop-shadow(0 3px 10px rgba(213,43,30,.6));
  animation:mapleSway 4s ease-in-out infinite;
  transform-origin:center 80%;
}
.canadian-badge .maple-icon svg{
  width:100%; height:100%; display:block;
}

@keyframes mapleSway{
  0%, 100%{transform:rotate(-3deg) scale(1)}
  25%{transform:rotate(2deg) scale(1.05)}
  50%{transform:rotate(-1deg) scale(1)}
  75%{transform:rotate(3deg) scale(1.05)}
}

.canadian-badge:hover .maple-icon{
  animation:mapleSpin 1.2s ease-in-out;
}
@keyframes mapleSpin{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.25)}
  100%{transform:rotate(360deg) scale(1)}
}

/* Maple leaf decorations in hero - more prominent + animated */
.maple-decoration{
  position:absolute;
  width:140px; height:140px;
  opacity:.15;
  pointer-events:none;
  z-index:1;
  filter:drop-shadow(0 6px 20px rgba(213,43,30,.4));
}
.maple-decoration svg{width:100%; height:100%; display:block}
.hero .maple-decoration.top-right{
  top:90px; right:6%;
  opacity:.18;
  animation:mapleFloatA 8s ease-in-out infinite;
}
.hero .maple-decoration.bottom-left{
  bottom:60px; left:5%;
  width:110px; height:110px;
  opacity:.13;
  animation:mapleFloatB 10s ease-in-out infinite;
}
.page-hero .maple-decoration{
  top:20%; right:8%;
  width:120px; height:120px;
  opacity:.18;
  animation:mapleFloatA 9s ease-in-out infinite;
}

@keyframes mapleFloatA{
  0%, 100%{transform:translateY(0) rotate(-8deg) scale(1)}
  33%{transform:translateY(-22px) rotate(4deg) scale(1.04)}
  66%{transform:translateY(-12px) rotate(-2deg) scale(.98)}
}
@keyframes mapleFloatB{
  0%, 100%{transform:translateY(0) rotate(12deg) scale(1)}
  50%{transform:translateY(-18px) rotate(20deg) scale(1.06)}
}

/* Maple leaf in footer badge - subtle pulse */
.site-footer .canadian-badge .maple-icon{
  animation:maplePulse 3s ease-in-out infinite;
}
@keyframes maplePulse{
  0%, 100%{filter:drop-shadow(0 3px 10px rgba(213,43,30,.6))}
  50%{filter:drop-shadow(0 3px 18px rgba(213,43,30,1))}
}

/* ============================================
   LOGO SIZE FIX - definitive override
   ============================================ */
header.site-header .logo{display:flex; align-items:center; flex-shrink:0; min-width:0}
header.site-header .logo svg{
  height:56px !important;
  width:auto !important;
  max-height:none !important;
  display:block !important;
}
@media (max-width:1180px){
  header.site-header .logo svg{height:52px !important}
}
@media (max-width:900px){
  header.site-header .logo svg{height:46px !important}
}
@media (max-width:480px){
  header.site-header .logo svg{height:40px !important}
}

/* Give header room for the bigger logo */
header.site-header{padding:14px 0 !important}
header.site-header.scrolled{padding:10px 0 !important}

/* ============================================
   LOGO XL — FINAL OVERRIDE (highest specificity + !important)
   ============================================ */
html body header.site-header .container .logo{
  display:flex !important;
  align-items:center !important;
  flex-shrink:0 !important;
}
html body header.site-header .container .logo svg{
  height:72px !important;
  width:auto !important;
  max-height:none !important;
  max-width:none !important;
  display:block !important;
}
@media (max-width:1280px){
  html body header.site-header .container .logo svg{height:64px !important}
}
@media (max-width:1024px){
  html body header.site-header .container .logo svg{height:56px !important}
}
@media (max-width:768px){
  html body header.site-header .container .logo svg{height:50px !important}
}
@media (max-width:480px){
  html body header.site-header .container .logo svg{height:44px !important}
}

/* Header padding accommodates bigger logo */
html body header.site-header{padding:18px 0 !important; min-height:96px}
html body header.site-header.scrolled{padding:12px 0 !important; min-height:80px}
@media (max-width:1024px){
  html body header.site-header{min-height:80px}
  html body header.site-header.scrolled{min-height:72px}
}

/* Push hero down to clear bigger fixed header */
.hero, .page-hero{padding-top:130px !important}
@media (max-width:900px){.hero, .page-hero{padding-top:108px !important}}

/* ============================================
   FINAL WOW POLISH PASS
   ============================================ */
/* Premium button — magnetic + gradient flow */
.btn-primary{
  background-size:200% 200%;
  background-position:0% 50%;
  transition:background-position .6s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-primary:hover{
  background-position:100% 50%;
}

/* Hero metric numbers glow */
.metric .num{
  text-shadow:0 0 30px currentColor;
}

/* Section eyebrow shimmer */
.eyebrow{
  position:relative;
  overflow:hidden;
}

/* Premium card hover lift consistency */
.service-card, .price-card, .trust-card{
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}

/* Footer brand block more prominent */
.footer-brand{padding-right:20px}
.footer-brand p{font-size:.93rem; line-height:1.7}

/* Improved focus visibility */
button:focus-visible, a:focus-visible{
  outline:2px solid #22d3ee !important;
  outline-offset:3px;
  border-radius:6px;
}

/* Better text rendering */
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* CTA banner pulse on enter */
.cta-banner{
  background-size:200% 200%;
  animation:gradFlow 8s ease infinite;
}

/* Make the dark sections feel more premium with subtle radial */
.section.dark{
  background:radial-gradient(ellipse at top, #152043 0%, #0a1024 70%) !important;
}

/* Form labels — tighter */
.form-group label{font-weight:700; letter-spacing:.01em}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:#1d4ed8;
  box-shadow:0 0 0 4px rgba(29,78,216,.12);
}

/* Final mobile hero tightening */
@media (max-width:768px){
  .hero h1{font-size:clamp(1.8rem, 8vw, 2.4rem)}
  .hero p{font-size:1rem}
  .hero .canadian-badge{padding:8px 14px; font-size:.85rem}
}

/* ============================================
   LOGO SIZE — final tuning for user's actual logo
   ============================================ */
html body header.site-header .container .logo svg{
  height:64px !important;
  width:auto !important;
}
@media (max-width:1280px){
  html body header.site-header .container .logo svg{height:56px !important}
}
@media (max-width:900px){
  html body header.site-header .container .logo svg{height:48px !important}
}
@media (max-width:480px){
  html body header.site-header .container .logo svg{height:42px !important}
}

/* ============================================================
   LOGO POLISH + ANIMATIONS — final pass
   ============================================================ */

/* ----- Header logo entrance + hover animation ----- */
header.site-header .logo svg{
  filter:drop-shadow(0 4px 14px rgba(6,182,212,.18));
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  animation:logoEntrance .9s cubic-bezier(.22,1,.36,1) both;
}
header.site-header .logo:hover svg{
  transform:scale(1.04);
  filter:drop-shadow(0 6px 22px rgba(34,211,238,.5));
}
@keyframes logoEntrance{
  0%   {opacity:0; transform:translateX(-18px) scale(.92)}
  60%  {opacity:1; transform:translateX(2px) scale(1.02)}
  100% {opacity:1; transform:translateX(0) scale(1)}
}

/* Subtle gradient color shift on hover for richer feel */
header.site-header .logo svg polygon[fill="#0a1e6e"]{transition:fill .4s ease}
header.site-header .logo:hover svg polygon[fill="#0a1e6e"]{fill:#1d4ed8}

/* ----- FOOTER LOGO — much bigger and centered ----- */
.site-footer .footer-brand .logo svg{
  height:84px !important;
  width:auto !important;
  display:block;
  filter:drop-shadow(0 6px 20px rgba(34,211,238,.25));
}
@media (max-width:768px){
  .site-footer .footer-brand .logo svg{height:64px !important}
}
.site-footer .footer-brand .logo{
  margin-bottom:18px;
}
/* Hide any leftover text spans next to the footer logo */
.site-footer .footer-brand .logo .logo-text{display:none !important}

/* Footer brand block gets a touch more space for the larger logo */
.site-footer .footer-brand{padding-right:30px}

/* ----- MAPLE LEAF — bigger, stronger, definitely-visible animation ----- */
.canadian-badge .maple-icon{
  width:34px !important;
  height:34px !important;
  filter:drop-shadow(0 4px 14px rgba(213,43,30,.7));
  animation:mapleBreathe 3.6s ease-in-out infinite !important;
  transform-origin:50% 80%;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

@keyframes mapleBreathe{
  0%, 100% {transform:rotate(-4deg) scale(1);   filter:drop-shadow(0 4px 14px rgba(213,43,30,.7))}
  25%      {transform:rotate(3deg)  scale(1.08); filter:drop-shadow(0 6px 22px rgba(213,43,30,1))}
  50%      {transform:rotate(-2deg) scale(1.02); filter:drop-shadow(0 4px 16px rgba(213,43,30,.85))}
  75%      {transform:rotate(4deg)  scale(1.06); filter:drop-shadow(0 6px 22px rgba(213,43,30,1))}
}

/* Hover = full spin */
.canadian-badge:hover .maple-icon{
  animation:mapleSpinFull 1.4s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes mapleSpinFull{
  0%   {transform:rotate(0) scale(1)}
  50%  {transform:rotate(180deg) scale(1.3);   filter:drop-shadow(0 10px 30px rgba(213,43,30,1))}
  100% {transform:rotate(360deg) scale(1);     filter:drop-shadow(0 4px 14px rgba(213,43,30,.7))}
}

/* Footer maple gets an extra warm glow pulse on top of the breathe */
.site-footer .canadian-badge{
  background:rgba(213,43,30,.18) !important;
  border:1.5px solid rgba(213,43,30,.55) !important;
  padding:10px 18px 10px 14px !important;
  border-radius:999px !important;
  font-weight:700 !important;
  color:#fff !important;
}

/* Make sure no other selector accidentally hides the maple animation */
.canadian-badge .maple-icon, .canadian-badge .maple-icon *{animation-play-state:running !important}

/* If user has reduced-motion preference, give a static but still-visible state */
@media (prefers-reduced-motion: reduce){
  .canadian-badge .maple-icon{
    animation:none !important;
    transform:scale(1.05) rotate(2deg) !important;
  }
  header.site-header .logo svg{animation:none !important}
}

/* ============================================================
   CLIENT LOGIN BUTTON — prominent accent CTA in header
   ============================================================ */
.btn-login{
  background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%) !important;
  color:#fff !important;
  font-weight:700 !important;
  padding:9px 16px !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  border:0 !important;
  box-shadow:0 8px 22px rgba(245,158,11,.35) !important;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-login:hover{
  transform:translateY(-2px);
  color:#fff !important;
  box-shadow:0 12px 28px rgba(245,158,11,.5) !important;
}
.btn-login svg{flex-shrink:0; width:16px !important; height:16px !important}
.btn-login::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .7s ease;
}
.btn-login:hover::before{transform:translateX(100%)}

/* Subtle pulse so it draws the eye */
.btn-login::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:12px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  z-index:-1;
  opacity:0;
  filter:blur(8px);
  animation:loginPulse 3s ease-in-out infinite;
}
@keyframes loginPulse{
  0%,100%{opacity:.3}
  50%{opacity:.6}
}

/* In scrolled (white) header, keep accent color */
header.site-header.scrolled .btn-login{
  color:#fff !important;
}

/* Mobile: hide nav-cta normally, show in mobile menu */
@media (max-width:900px){
  .nav-cta .btn-login{display:none}
}
@media (min-width:901px){
  .nav-links .btn-login{display:none}
}

/* Larger button on bigger screens */
@media (min-width:1280px){
  .btn-login{padding:11px 20px !important; font-size:.92rem}
}

/* ============================================================
   LOGO IMG — user's actual logo file rendered via <img>
   ============================================================ */
.logo-img{
  height:60px;
  width:auto;
  display:block;
  transition:filter .4s ease, transform .4s ease;
}

/* On dark header, apply hue-rotate + saturate to shift purples toward cyan/blue */
header.site-header:not(.scrolled) .logo-img{
  filter:hue-rotate(160deg) saturate(1.4) brightness(1.1);
}
header.site-header.scrolled .logo-img{
  filter:hue-rotate(160deg) saturate(1.3);
}
.logo:hover .logo-img{transform:scale(1.04)}

/* Footer logo bigger */
.site-footer .footer-brand .logo-img{
  height:74px;
  filter:hue-rotate(160deg) saturate(1.4) brightness(1.15);
}

/* Responsive sizing */
@media (max-width:1280px){
  .logo-img{height:54px}
  .site-footer .footer-brand .logo-img{height:64px}
}
@media (max-width:900px){
  .logo-img{height:46px}
  .site-footer .footer-brand .logo-img{height:54px}
}
@media (max-width:480px){
  .logo-img{height:40px}
}

/* Entrance animation on header */
header.site-header .logo-img{
  animation:logoIn .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes logoIn{
  0%   {opacity:0; transform:translateX(-14px) scale(.92)}
  100% {opacity:1; transform:translateX(0)    scale(1)}
}

/* Hide any leftover text wrapper so img stands alone */
.logo .logo-text{display:none !important}

/* ============================================================
   LOGO IMG — recolored brand variant, no filter needed
   ============================================================ */
header.site-header:not(.scrolled) .logo-img,
header.site-header.scrolled .logo-img,
.site-footer .footer-brand .logo-img{
  filter:none !important;
}
.logo-img{filter:drop-shadow(0 4px 14px rgba(6,182,212,.2))}
.site-footer .footer-brand .logo-img{
  filter:drop-shadow(0 6px 22px rgba(34,211,238,.3)) !important;
}

/* ============================================================
   LOGO IMG — FINAL SIZE OVERRIDE (highest specificity)
   ============================================================ */
html body header.site-header .container .logo img.logo-img,
html body header.site-header .container .logo .logo-img{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
}
@media (max-width:1280px){
  html body header.site-header .container .logo img.logo-img,
  html body header.site-header .container .logo .logo-img{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
  }
}
@media (max-width:1024px){
  html body header.site-header .container .logo img.logo-img,
  html body header.site-header .container .logo .logo-img{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }
}
@media (max-width:768px){
  html body header.site-header .container .logo img.logo-img,
  html body header.site-header .container .logo .logo-img{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
}
@media (max-width:480px){
  html body header.site-header .container .logo img.logo-img,
  html body header.site-header .container .logo .logo-img{
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}

/* Header must accommodate the bigger logo */
html body header.site-header{padding:18px 0 !important; min-height:108px !important}
html body header.site-header.scrolled{padding:14px 0 !important; min-height:96px !important}
@media (max-width:1024px){
  html body header.site-header{min-height:90px !important}
  html body header.site-header.scrolled{min-height:80px !important}
}
@media (max-width:768px){
  html body header.site-header{min-height:80px !important}
  html body header.site-header.scrolled{min-height:72px !important}
}

/* Footer logo extra prominent */
html body .site-footer .footer-brand .logo img.logo-img,
html body .site-footer .footer-brand .logo .logo-img{
  height:90px !important;
  min-height:90px !important;
  max-height:90px !important;
}
@media (max-width:768px){
  html body .site-footer .footer-brand .logo img.logo-img{height:70px !important; min-height:70px !important; max-height:70px !important}
}

/* Push hero down to clear the taller header */
.hero, .page-hero{padding-top:140px !important}
@media (max-width:1024px){.hero, .page-hero{padding-top:120px !important}}
@media (max-width:768px){.hero, .page-hero{padding-top:108px !important}}

/* ============================================================
   PHASE 2 — PRODUCTION POLISH
   Premium typography, spacing rhythm, micro-interactions
   ============================================================ */

/* Refined typography scale (modular, fluid) */
:root{
  --fs-xs:clamp(.75rem, .7rem + .2vw, .82rem);
  --fs-sm:clamp(.85rem, .8rem + .3vw, .95rem);
  --fs-base:clamp(.95rem, .9rem + .35vw, 1.05rem);
  --fs-lg:clamp(1.05rem, 1rem + .5vw, 1.2rem);
  --fs-xl:clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  --fs-2xl:clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
  --fs-3xl:clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-4xl:clamp(2.4rem, 1.8rem + 3vw, 3.8rem);
  --fs-5xl:clamp(2.8rem, 2rem + 4vw, 4.5rem);
  --line-tight:1.15;
  --line-snug:1.3;
  --line-normal:1.55;
  --line-relaxed:1.75;
  --space-xs:6px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:72px;
  --space-3xl:96px;
}

body{font-feature-settings:'kern','liga','ss01';font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5{font-feature-settings:'kern','ss01';text-wrap:balance}
p, .lead{text-wrap:pretty;font-size:var(--fs-base);line-height:var(--line-normal)}
.lead{font-size:var(--fs-lg);line-height:var(--line-relaxed);color:var(--slate-500)}

h1{font-size:var(--fs-5xl); line-height:var(--line-tight); font-weight:800; letter-spacing:-.025em}
h2{font-size:var(--fs-4xl); line-height:var(--line-tight); font-weight:800; letter-spacing:-.02em}
h3{font-size:var(--fs-2xl); line-height:var(--line-snug); font-weight:700; letter-spacing:-.01em}
h4{font-size:var(--fs-xl); line-height:var(--line-snug); font-weight:700}

/* Premium section padding rhythm */
.section{padding:var(--space-3xl) 0}
.section-tight{padding:var(--space-2xl) 0}
.section-head{margin-bottom:var(--space-xl)}
@media (max-width:768px){.section{padding:var(--space-2xl) 0} .section-tight{padding:var(--space-xl) 0}}

/* Eyebrow refinement */
.eyebrow{
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  padding:7px 16px;
  font-weight:800;
  text-transform:uppercase;
  background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(59,130,246,.12));
  border:1px solid rgba(6,182,212,.18);
  color:#0891b2;
}
.section.dark .eyebrow{background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(59,130,246,.18));border-color:rgba(34,211,238,.3);color:#67e8f9}

/* Buttons - premium tactile feel */
.btn{
  font-size:var(--fs-base);
  padding:14px 28px;
  letter-spacing:.005em;
  font-weight:700;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
}
.btn-lg{padding:17px 34px; font-size:var(--fs-lg)}
.btn-sm{padding:10px 18px; font-size:var(--fs-sm)}
.btn:active{transform:scale(.98)}

/* Premium card style */
.service-card{
  padding:var(--space-lg);
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border:1px solid rgba(15,25,51,.06);
  box-shadow:0 1px 3px rgba(15,25,51,.04), 0 8px 24px -8px rgba(15,25,51,.06);
}
.service-card:hover{
  box-shadow:0 4px 12px rgba(15,25,51,.06), 0 20px 50px -10px rgba(15,25,51,.14);
}
.service-card .icon-wrap{
  width:56px; height:56px;
  border-radius:14px;
  box-shadow:0 8px 20px -4px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.service-card h3{margin-bottom:8px; font-size:var(--fs-xl)}
.service-card p{margin-bottom:0; font-size:var(--fs-sm); color:var(--slate-500); line-height:1.65}
.service-card .more{margin-top:18px; font-size:var(--fs-sm); font-weight:700}

/* Premium price card */
.price-card{
  padding:36px 28px;
  border-radius:22px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1.5px solid rgba(15,25,51,.06);
  box-shadow:0 2px 8px rgba(15,25,51,.04), 0 16px 40px -16px rgba(15,25,51,.08);
}
.price-card.featured{
  background:linear-gradient(180deg,#0a1024 0%, #152043 100%);
  box-shadow:0 30px 80px -20px rgba(29,78,216,.4), 0 8px 16px rgba(15,25,51,.15);
}
.price-card .price{margin-bottom:4px}
.price-card .price-sub{margin-bottom:28px; font-size:var(--fs-sm); opacity:.7}
.price-card ul li{padding:11px 0; font-size:var(--fs-sm)}

/* Form polish */
.form-group input,.form-group select,.form-group textarea{
  padding:14px 18px;
  border-radius:12px;
  border:1.5px solid rgba(15,25,51,.08);
  background:#fafbff;
  font-size:var(--fs-base);
  transition:all .25s ease;
}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:rgba(15,25,51,.15)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 4px rgba(59,130,246,.12), 0 4px 12px rgba(59,130,246,.08);
}

/* Premium hero meta items */
.hero-meta div{
  padding:8px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  font-size:var(--fs-xs);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Subtle grid pattern in dark sections (was hero only) */
.section.dark{position:relative}
.section.dark > .container{position:relative; z-index:2}

/* Footer refinement */
.site-footer{padding:var(--space-3xl) 0 var(--space-md)}
.footer-grid h5{
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  margin-bottom:24px;
  position:relative;
  padding-bottom:14px;
}
.footer-grid h5::after{
  content:""; position:absolute; bottom:0; left:0;
  width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#22d3ee,#3b82f6);
}
.footer-grid a{font-size:var(--fs-sm); transition:all .25s ease; display:inline-block}
.footer-grid a:hover{color:#22d3ee; transform:translateX(3px)}

/* Section transitions */
.section + .section.alt, .section.alt + .section{position:relative}
.section + .section.alt::before{
  content:""; position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
  width:120px; height:6px; background:linear-gradient(90deg, transparent, var(--brand), transparent);
  border-radius:3px;
}

/* Scroll-snap for premium feel on testimonials/grids (optional, no breakage) */
.scroll-snap-x{scroll-snap-type:x mandatory; overflow-x:auto; gap:20px; display:flex}
.scroll-snap-x > *{scroll-snap-align:start; flex-shrink:0}

/* Disable animations on print */
@media print{
  *{animation:none !important; transition:none !important}
  .site-header, .go-top, .site-footer .socials, .site-footer form{display:none !important}
}

/* Premium scrollbar (webkit) */
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1d4ed8,#06b6d4); border-radius:8px; border:2px solid #f1f5f9}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0a1e6e,#0891b2)}

/* Body anti-aliasing */
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}

/* Selection */
::selection{background:#3b82f6; color:#fff; text-shadow:none}
::-moz-selection{background:#3b82f6; color:#fff}

/* Smooth section reveal with stagger */
.reveal-stagger > *:nth-child(n+9){transition-delay:.55s}

/* Premium link underline on prose */
.entry-content p a, .prose a{
  text-decoration:underline;
  text-decoration-color:rgba(59,130,246,.4);
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;
  transition:all .25s ease;
}
.entry-content p a:hover, .prose a:hover{
  text-decoration-color:#06b6d4;
  text-decoration-thickness:2.5px;
}

/* Improved focus ring (WCAG AA) */
*:focus-visible{
  outline:3px solid #06b6d4 !important;
  outline-offset:3px;
  border-radius:6px;
}
button:focus-visible, .btn:focus-visible{outline-offset:4px}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0;
  padding:12px 20px;
  background:var(--brand);
  color:#fff;
  z-index:9999;
  border-radius:0 0 12px 0;
  font-weight:700;
}
.skip-link:focus{left:0}

/* Content-visibility for performance (off-screen sections deferred) */
.section{content-visibility:auto; contain-intrinsic-size:auto 800px}

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   PREVENT MENU DUPLICATES — only first .nav-links shows
   ============================================================ */
header.site-header .primary-nav .nav-links ~ .nav-links{display:none !important}
header.site-header .nav-links + .nav-links{display:none !important}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.testimonials{margin-top:40px}
.testimonial-card{
  background:#fff;
  padding:32px 28px;
  border-radius:20px;
  border:1px solid rgba(15,25,51,.06);
  box-shadow:0 1px 3px rgba(15,25,51,.04), 0 16px 40px -16px rgba(15,25,51,.1);
  position:relative;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(15,25,51,.06), 0 24px 50px -10px rgba(15,25,51,.16);
}
.testimonial-card .t-quote-icon{
  position:absolute; top:-14px; left:24px;
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(29,78,216,.3);
}
.testimonial-card .t-stars{color:#fbbf24; margin:14px 0 14px; display:flex; gap:2px}
.testimonial-card .t-quote{
  font-size:1.05rem;
  line-height:1.65;
  color:#1a233f;
  margin-bottom:24px;
  font-style:italic;
}
.testimonial-card .t-author{display:flex; align-items:center; gap:14px}
.testimonial-card .t-avatar{
  width:48px; height:48px; border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  overflow:hidden;
}
.testimonial-card .t-avatar img,
.testimonial-card .t-avatar.t-avatar-placeholder img{width:100%; height:100%; object-fit:cover}
.testimonial-card .t-author strong{display:block; color:#0a1024; font-size:.95rem}
.testimonial-card .t-author span{color:#6b7494; font-size:.85rem}

/* ============================================================
   SIMPLIFIED HEADER — only Client Login CTA
   ============================================================ */
header.site-header .nav-cta{display:flex; align-items:center}
header.site-header .btn-login{
  padding:13px 24px !important;
  font-size:1rem !important;
  font-weight:800 !important;
  border-radius:12px !important;
  letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(245,158,11,.4), 0 0 0 0 rgba(245,158,11,.6) !important;
  animation:loginAttention 3s ease-in-out infinite !important;
}
@keyframes loginAttention{
  0%, 100%{box-shadow:0 10px 26px rgba(245,158,11,.4), 0 0 0 0 rgba(245,158,11,.5)}
  50%{box-shadow:0 14px 32px rgba(245,158,11,.55), 0 0 0 8px rgba(245,158,11,0)}
}
header.site-header .btn-login svg{width:18px !important; height:18px !important}

/* Hide stale plans/get-started fallback if any leftover code still emits them */
.nav-cta .btn-secondary, .nav-cta .btn-primary:not(.btn-login){
  display:none !important;
}

/* Mobile menu — single Client Login at bottom */
@media (max-width:900px){
  .nav-cta-mobile{display:flex !important}
}

/* Header layout variants */
body.header-centered .site-header .nav{flex-direction:column; gap:14px}
body.header-centered .site-header .nav-links{justify-content:center}
body.header-minimal .nav-links{display:none}

/* Footer layout variants */
body.footer-compact .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
body.footer-compact .footer-grid > div:nth-child(n+4){display:none}
body.footer-minimal .footer-grid{grid-template-columns:1fr; text-align:center}
body.footer-minimal .footer-grid > div:not(.footer-brand){display:none}
body.footer-minimal .footer-brand p{max-width:600px; margin-left:auto; margin-right:auto}

/* Animation speed body classes (also handled in inline CSS but be explicit) */
body.anim-off .reveal, body.anim-off .reveal-stagger > *{opacity:1 !important; transform:none !important}
body.anim-slow [class*="reveal"]{transition-duration:1.2s !important}
body.anim-fast [class*="reveal"]{transition-duration:.3s !important}

/* ============================================================
   LOGO POLISH — subtle premium animation
   ============================================================ */
header.site-header .logo{
  position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
header.site-header .logo:hover{
  transform:translateY(-1px);
}
header.site-header .logo::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--brand-2), transparent);
  opacity:0; transform:scaleX(.5);
  transition:opacity .35s ease, transform .35s ease;
  transform-origin:center;
}
header.site-header .logo:hover::after{
  opacity:.7; transform:scaleX(1);
}
.logo-img{transition:transform .4s cubic-bezier(.22,1,.36,1), filter .4s ease}
.logo:hover .logo-img{filter:drop-shadow(0 8px 26px rgba(34,211,238,.55))}

/* ============================================================
   SOCIAL ICONS — refined with per-brand hover
   ============================================================ */
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  flex-shrink:0;
}
.socials a:hover{
  transform:translateY(-3px) scale(1.05);
  color:#fff;
  border-color:transparent;
}
.socials a.soc-x:hover{background:#000; box-shadow:0 8px 22px rgba(0,0,0,.5)}
.socials a.soc-fb:hover{background:#1877f2; box-shadow:0 8px 22px rgba(24,119,242,.5)}
.socials a.soc-li:hover{background:#0a66c2; box-shadow:0 8px 22px rgba(10,102,194,.5)}
.socials a.soc-ig:hover{background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); box-shadow:0 8px 22px rgba(214,41,118,.5)}
.socials a svg{width:18px; height:18px; transition:transform .3s ease}
.socials a:hover svg{transform:scale(1.08)}

/* ============================================================
   PAGE EDITOR CONTENT (Gutenberg / Elementor compatible area)
   ============================================================ */
.wc-editable-content{padding-top:30px}
.wc-editable-content .prose{
  font-size:1.08rem;
  line-height:1.75;
  color:#1a233f;
}
.wc-editable-content .prose > * + *{margin-top:1.2em}
.wc-editable-content .prose h2, .wc-editable-content .prose h3{
  margin-top:1.6em; margin-bottom:.6em;
}
.wc-editable-content .prose img{
  border-radius:12px; box-shadow:0 12px 30px rgba(15,25,51,.1);
}
.wc-editable-content .prose ul, .wc-editable-content .prose ol{
  padding-left:1.5em;
}
.wc-editable-content .prose blockquote{
  border-left:4px solid var(--brand);
  padding:8px 20px;
  background:#f8fafc;
  border-radius:0 12px 12px 0;
  font-style:italic;
  color:var(--navy-800);
  margin:1.2em 0;
}
.wc-editable-content .prose code{
  background:#f1f5f9;
  padding:2px 8px;
  border-radius:4px;
  font-size:.92em;
  font-family:ui-monospace,monospace;
}
/* Elementor inside our pages — no width clipping */
.elementor-section{margin:0 !important}
.elementor-section-full_width > .elementor-container{max-width:none !important}
/* When Elementor is active on a page, hide our hardcoded sections so user content is the only thing */
body.elementor-page .wc-editable-content{padding:0}
body.elementor-page main > section:not(.page-hero):not(.wc-editable-content){display:none}

/* ============================================================
   v2.0 RESPONSIVE — fine-tune for all devices & browsers
   ============================================================ */
/* iOS safe-area awareness */
@supports (padding: max(0px)) {
  .site-header{padding-left:max(20px, env(safe-area-inset-left)) !important; padding-right:max(20px, env(safe-area-inset-right)) !important}
  .site-footer{padding-bottom:max(30px, env(safe-area-inset-bottom)) !important}
  .go-top{right:max(22px, env(safe-area-inset-right)) !important; bottom:max(22px, env(safe-area-inset-bottom)) !important}
}

/* Larger screens (1920px+ ultra-wide) */
@media (min-width:1600px){
  .container, .container-wide{max-width:1400px}
  h1{font-size:clamp(2.5rem, 3.5vw, 4.5rem)}
  .section{padding:110px 0}
}
/* Standard laptop / tablet landscape */
@media (max-width:1280px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
}
/* Tablet portrait */
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer-grid > div:nth-child(4),.footer-grid > div:nth-child(5){grid-column:span 3}
}
/* Mobile landscape */
@media (max-width:768px){
  .grid-3, .grid-4, .testimonials, .pricing{grid-template-columns:1fr; gap:18px}
  .price-card.featured{transform:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:nth-child(n+3){grid-column:span 2}
  .footer-grid > div:first-child{grid-column:span 2}
  .contact-grid{grid-template-columns:1fr}
  .hero{padding:120px 0 60px}
  .page-hero{padding:120px 0 60px}
  .section{padding:60px 0}
  .section-tight{padding:40px 0}
  h1{font-size:clamp(1.8rem, 6vw, 2.6rem)}
  h2{font-size:clamp(1.5rem, 5vw, 2rem)}
  .hero-meta{flex-direction:column; gap:10px; align-items:flex-start}
  .hero-cta{flex-direction:column; width:100%}
  .hero-cta .btn{width:100%}
  .cta-banner{flex-direction:column; align-items:flex-start; gap:16px}
  .cta-banner .btns{width:100%; flex-direction:column}
  .cta-banner .btns .btn{width:100%}
}
/* Mobile portrait */
@media (max-width:480px){
  body{font-size:15px}
  .container, .container-wide{padding:0 16px}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid > div{grid-column:1}
  .testimonial-card{padding:24px 20px}
  .service-card{padding:24px 20px}
  .price-card{padding:28px 22px}
  .nav-cta{display:none !important}
  .nav-links .nav-cta-mobile{display:flex !important; margin-top:8px}
  .btn-login{padding:11px 18px !important; font-size:.92rem !important}
  .canadian-badge{font-size:.85rem; padding:8px 14px}
}

/* Print-friendly */
@media print {
  .site-header, .go-top, .nav, .socials, .newsletter, .cta-banner{display:none !important}
  body{font-size:11pt; color:#000; background:#fff}
  .section, .section.dark{background:#fff !important; color:#000 !important; padding:20px 0}
  h1,h2,h3{color:#000 !important}
  a{color:#000; text-decoration:underline}
  .hero h1, .page-hero h1{color:#000 !important; font-size:24pt}
  img{max-width:60%; page-break-inside:avoid}
}

/* High-contrast (Windows) and forced-colors mode */
@media (forced-colors: active){
  .btn-primary, .btn-secondary, .btn-accent{border:2px solid; forced-color-adjust:none}
  .service-card, .price-card, .trust-card{border:1px solid}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   WORDPRESS ADMIN BAR FIX
   When logged-in WordPress users browse the front-end, the
   admin bar adds 32px (46px on mobile) at the top. Push the
   fixed header below it so they don't overlap.
   ============================================================ */
html[lang] body.admin-bar header.site-header{
  top:32px !important;
}
@media screen and (max-width: 782px){
  html[lang] body.admin-bar header.site-header{
    top:46px !important;
  }
}
/* Add scroll-margin so anchors don't hide under both bars */
body.admin-bar section[id]{scroll-margin-top:122px}
@media (max-width:782px){
  body.admin-bar section[id]{scroll-margin-top:136px}
}

/* ============================================================
   DEFENSIVE: hide accidental duplicate nav-links menus
   (when a plugin filter re-emits wp_nav_menu)
   ============================================================ */
header.site-header .primary-nav .nav-links ~ .nav-links,
header.site-header .nav-links + .nav-links,
header.site-header .primary-nav > ul + ul,
header.site-header nav.primary-nav nav{
  display:none !important;
}

/* ============================================================
   HERO v2.1 — international-friendly, tighter layout, stronger first impression
   ============================================================ */
.hero{
  padding:120px 0 80px !important;
  min-height:auto;
}
@media (max-width:1024px){
  .hero{padding:100px 0 60px !important}
}
@media (max-width:768px){
  .hero{padding:90px 0 40px !important}
}
.hero h1{
  font-size:clamp(2.2rem, 4.6vw, 4rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.025em;
  margin-bottom:18px !important;
  text-wrap:balance;
  max-width:14ch;
}
.hero h1 .accent-word{
  background:linear-gradient(90deg,#22d3ee, #818cf8, #ec4899);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradText 6s ease infinite;
}
.hero p{
  font-size:clamp(1rem, 1.25vw, 1.18rem) !important;
  max-width:50ch !important;
  margin-bottom:30px !important;
  line-height:1.6;
}
.hero .eyebrow{margin-bottom:12px}
.hero .canadian-badge{margin-bottom:14px}

/* CTAs higher, tighter */
.hero .hero-cta{
  margin-top:18px !important;
  margin-bottom:24px;
}
.hero .hero-meta{
  margin-top:24px !important;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.hero .hero-meta div{
  font-size:.85rem !important;
}

/* Tighter container with logical max-widths */
.hero-grid{
  grid-template-columns:1.05fr 1fr !important;
  gap:50px !important;
  align-items:center;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr !important; gap:36px !important}
  .hero h1{max-width:none}
}

/* Stronger hero card depth */
.hero-card{
  box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Optional Canadian badge — subtle when shown */
.canadian-badge{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(213,43,30,.5);
  padding:6px 14px;
  font-size:.78rem;
  font-weight:600;
}
.canadian-badge .maple-icon{
  width:18px !important;
  height:18px !important;
}

/* Better visual rhythm — pre-headline tags */
.hero .eyebrow{
  background:rgba(34,211,238,.12);
  border-color:rgba(34,211,238,.3);
  color:#67e8f9;
  font-size:.72rem;
  letter-spacing:.18em;
  padding:6px 14px;
  display:inline-block;
}

/* ============================================================
   HERO PRE-HEADLINE ROW — badge + eyebrow on one line
   ============================================================ */
.hero .reveal > .canadian-badge + .eyebrow,
.hero .canadian-badge + .eyebrow{
  margin-top:0 !important;
  margin-left:8px;
}
.hero .reveal.in,
.hero > .container .reveal{
  position:relative;
}
/* Wrap badge + eyebrow in a flex row on first hero column */
.hero .pre-headline-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.hero .pre-headline-row .canadian-badge{margin:0; padding:5px 12px; font-size:.72rem}
.hero .pre-headline-row .canadian-badge .maple-icon{width:16px !important; height:16px !important}
.hero .pre-headline-row .eyebrow{margin:0; padding:5px 14px; font-size:.7rem; letter-spacing:.18em}

/* When only one of them shows, center vertically */
.hero .canadian-badge,
.hero .eyebrow{vertical-align:middle}

/* Slim and subtle separator dot between if both shown */
.hero .pre-headline-row .canadian-badge + .eyebrow::before{
  content:none;
}

/* Compact badge style update */
.canadian-badge{
  background:rgba(213,43,30,.08);
  border-color:rgba(213,43,30,.35);
  font-weight:600;
}

/* ============================================================
   UNIFIED PAGE HERO COLOR — consistent brand across all pages
   ============================================================ */
.page-hero::before,
.page-hosting .page-hero::before,
.page-domains .page-hero::before,
.page-design .page-hero::before,
.page-email .page-hero::before,
.page-about .page-hero::before,
.page-contact .page-hero::before,
.page-faq .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(34,211,238,.35), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(500px 300px at 50% 50%, rgba(139,92,246,.15), transparent 70%) !important;
}

/* Each page can have a SUBTLE per-page accent tint without breaking the brand */
.page-hosting  .page-hero::before{filter:hue-rotate(-5deg)}
.page-domains  .page-hero::before{filter:hue-rotate(0deg)}
.page-design   .page-hero::before{filter:hue-rotate(15deg) saturate(1.05)}
.page-email    .page-hero::before{filter:hue-rotate(-15deg)}
.page-about    .page-hero::before{filter:hue-rotate(10deg)}
.page-contact  .page-hero::before{filter:hue-rotate(5deg)}
.page-faq      .page-hero::before{filter:hue-rotate(-10deg)}

/* Ensure background base color is the same dark navy on every page-hero */
.page-hero, .page-hosting .page-hero, .page-domains .page-hero,
.page-design .page-hero, .page-email .page-hero, .page-about .page-hero,
.page-contact .page-hero, .page-faq .page-hero{
  background:linear-gradient(180deg, #0a1024 0%, #0f1933 100%) !important;
}

/* ============================================================
   PER-PAGE HERO ACCENT COLORS — each page has its own identity
   while staying on-brand (dark navy base, never harsh)
   ============================================================ */

/* Reset/override any earlier per-page overrides + unified rules */
.page-hero, .page-hero::before, .page-hero::after{}

/* Common dark navy base — never changes */
body.page-hosting .page-hero,
body.page-domains .page-hero,
body.page-design .page-hero,
body.page-email .page-hero,
body.page-about .page-hero,
body.page-contact .page-hero,
body.page-faq .page-hero{
  background:linear-gradient(180deg, #0a1024 0%, #0f1933 100%) !important;
}

/* HOSTING — Cyan/Blue (performance, speed) */
body.page-hosting .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(34,211,238,.35), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.28), transparent 60%) !important;
  filter:none !important;
}

/* DOMAINS — Royal Blue + Subtle Gold (ownership, certificates) */
body.page-domains .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(96,165,250,.32), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(251,191,36,.18), transparent 60%) !important;
  filter:none !important;
}

/* WEB DESIGN — Purple/Violet (creative, design) */
body.page-design .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(167,139,250,.35), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(99,102,241,.25), transparent 60%) !important;
  filter:none !important;
}

/* EMAIL & SSL — Emerald/Teal (security, trust) */
body.page-email .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(52,211,153,.3), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(34,211,238,.25), transparent 60%) !important;
  filter:none !important;
}

/* ABOUT — Deep Blue (corporate, trustworthy) */
body.page-about .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(96,165,250,.32), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(167,139,250,.22), transparent 60%) !important;
  filter:none !important;
}

/* FAQ — Teal (helpful, informative) */
body.page-faq .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(45,212,191,.32), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.22), transparent 60%) !important;
  filter:none !important;
}

/* CONTACT — Rose/Pink (welcoming, friendly) */
body.page-contact .page-hero::before{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(244,114,182,.3), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(99,102,241,.25), transparent 60%) !important;
  filter:none !important;
}

/* Eyebrow color also matches the page accent */
.page-hosting  .page-hero .eyebrow{background:rgba(34,211,238,.16); color:#67e8f9; border-color:rgba(34,211,238,.3)}
.page-domains  .page-hero .eyebrow{background:rgba(251,191,36,.16); color:#fcd34d; border-color:rgba(251,191,36,.3)}
.page-design   .page-hero .eyebrow{background:rgba(167,139,250,.16); color:#c4b5fd; border-color:rgba(167,139,250,.3)}
.page-email    .page-hero .eyebrow{background:rgba(52,211,153,.16); color:#6ee7b7; border-color:rgba(52,211,153,.3)}
.page-about    .page-hero .eyebrow{background:rgba(96,165,250,.16); color:#bfdbfe; border-color:rgba(96,165,250,.3)}
.page-faq      .page-hero .eyebrow{background:rgba(45,212,191,.16); color:#5eead4; border-color:rgba(45,212,191,.3)}
.page-contact  .page-hero .eyebrow{background:rgba(244,114,182,.16); color:#fbcfe8; border-color:rgba(244,114,182,.3)}

/* ============================================================
   PER-PAGE COLORS — definitive override (highest specificity)
   This wins over any older or future cached rule
   ============================================================ */
html body.page-hosting  .page-hero::before,
html body.page-hosting  .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(34,211,238,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.28), transparent 60%) !important;
  filter:none !important;
}
html body.page-domains  .page-hero::before,
html body.page-domains  .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(96,165,250,.32), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(251,191,36,.18), transparent 60%) !important;
  filter:none !important;
}
html body.page-design   .page-hero::before,
html body.page-design   .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(167,139,250,.38), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(99,102,241,.28), transparent 60%) !important;
  filter:none !important;
}
html body.page-email    .page-hero::before,
html body.page-email    .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(52,211,153,.32), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(34,211,238,.25), transparent 60%) !important;
  filter:none !important;
}
html body.page-about    .page-hero::before,
html body.page-about    .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(96,165,250,.32), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(167,139,250,.24), transparent 60%) !important;
  filter:none !important;
}
html body.page-faq      .page-hero::before,
html body.page-faq      .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(45,212,191,.32), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(59,130,246,.22), transparent 60%) !important;
  filter:none !important;
}
html body.page-contact  .page-hero::before,
html body.page-contact  .page-hero::after{
  background:radial-gradient(700px 500px at 80% 0%, rgba(244,114,182,.3), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(99,102,241,.25), transparent 60%) !important;
  filter:none !important;
}

/* Each page also gets its accent on the section.dark "Why WebClub" block */
body.page-hosting  .section.dark{background:radial-gradient(ellipse at top, #0c2138 0%, #0a1024 70%) !important}
body.page-domains  .section.dark{background:radial-gradient(ellipse at top, #1e2940 0%, #0a1024 70%) !important}
body.page-design   .section.dark{background:radial-gradient(ellipse at top, #1f1a4f 0%, #0a1024 70%) !important}
body.page-email    .section.dark{background:radial-gradient(ellipse at top, #0a2b2b 0%, #0a1024 70%) !important}
body.page-about    .section.dark{background:radial-gradient(ellipse at top, #161e3e 0%, #0a1024 70%) !important}
body.page-faq      .section.dark{background:radial-gradient(ellipse at top, #0c2532 0%, #0a1024 70%) !important}
body.page-contact  .section.dark{background:radial-gradient(ellipse at top, #2d1727 0%, #0a1024 70%) !important}

/* ============================================================
   UNIFIED PER-PAGE ACCENT — glow + eyebrow + dark section
   share ONE color identity per page
   ============================================================ */

/* HOSTING — Cyan/Teal */
html body.page-hosting{--page-accent:#22d3ee; --page-accent-2:#0891b2; --page-accent-rgb:34,211,238}
html body.page-hosting .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(34,211,238,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(34,211,238,.18), transparent 60%) !important;
}
html body.page-hosting .page-hero .eyebrow{background:rgba(34,211,238,.18); color:#67e8f9; border-color:rgba(34,211,238,.35)}

/* DOMAINS — Gold/Amber */
html body.page-domains{--page-accent:#fbbf24; --page-accent-2:#d97706; --page-accent-rgb:251,191,36}
html body.page-domains .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(251,191,36,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(251,191,36,.15), transparent 60%) !important;
}
html body.page-domains .page-hero .eyebrow{background:rgba(251,191,36,.18); color:#fcd34d; border-color:rgba(251,191,36,.35)}

/* WEB DESIGN — Violet/Purple */
html body.page-design{--page-accent:#a78bfa; --page-accent-2:#7c3aed; --page-accent-rgb:167,139,250}
html body.page-design .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(167,139,250,.4), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(139,92,246,.18), transparent 60%) !important;
}
html body.page-design .page-hero .eyebrow{background:rgba(167,139,250,.2); color:#c4b5fd; border-color:rgba(167,139,250,.35)}

/* EMAIL & SSL — Emerald/Green */
html body.page-email{--page-accent:#34d399; --page-accent-2:#059669; --page-accent-rgb:52,211,153}
html body.page-email .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(52,211,153,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(16,185,129,.18), transparent 60%) !important;
}
html body.page-email .page-hero .eyebrow{background:rgba(52,211,153,.18); color:#6ee7b7; border-color:rgba(52,211,153,.35)}

/* ABOUT — Indigo/Blue */
html body.page-about{--page-accent:#818cf8; --page-accent-2:#4f46e5; --page-accent-rgb:129,140,248}
html body.page-about .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(129,140,248,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(99,102,241,.18), transparent 60%) !important;
}
html body.page-about .page-hero .eyebrow{background:rgba(129,140,248,.18); color:#a5b4fc; border-color:rgba(129,140,248,.35)}

/* FAQ — Teal */
html body.page-faq{--page-accent:#2dd4bf; --page-accent-2:#0d9488; --page-accent-rgb:45,212,191}
html body.page-faq .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(45,212,191,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(20,184,166,.18), transparent 60%) !important;
}
html body.page-faq .page-hero .eyebrow{background:rgba(45,212,191,.18); color:#5eead4; border-color:rgba(45,212,191,.35)}

/* CONTACT — Rose/Pink */
html body.page-contact{--page-accent:#f472b6; --page-accent-2:#db2777; --page-accent-rgb:244,114,182}
html body.page-contact .page-hero::before{
  background:radial-gradient(700px 500px at 80% 0%, rgba(244,114,182,.35), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(236,72,153,.18), transparent 60%) !important;
}
html body.page-contact .page-hero .eyebrow{background:rgba(244,114,182,.18); color:#fbcfe8; border-color:rgba(244,114,182,.35)}

/* Use --page-accent for breadcrumb hover + maple decoration + section dividers per-page */
.page-hero a:hover, .breadcrumb a:hover{color:var(--page-accent) !important}
.page-hero .maple-decoration svg path{filter:hue-rotate(0deg)}

/* ============================================================
   PER-PAGE DARK SECTION — accent-tinted to match hero/eyebrow
   ============================================================ */

/* HOSTING — Cyan dark section */
html body.page-hosting .section.dark{
  background:radial-gradient(ellipse at top, rgba(34,211,238,.15), transparent 70%), linear-gradient(180deg,#0a1024 0%,#0c2138 100%) !important;
}
html body.page-hosting .section.dark .eyebrow{background:rgba(34,211,238,.18); color:#67e8f9; border-color:rgba(34,211,238,.35)}
html body.page-hosting .trust-card .num{background:linear-gradient(90deg,#22d3ee,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent}

/* DOMAINS — Gold dark section */
html body.page-domains .section.dark{
  background:radial-gradient(ellipse at top, rgba(251,191,36,.13), transparent 70%), linear-gradient(180deg,#0a1024 0%,#1e2940 100%) !important;
}
html body.page-domains .section.dark .eyebrow{background:rgba(251,191,36,.18); color:#fcd34d; border-color:rgba(251,191,36,.35)}
html body.page-domains .trust-card .num{background:linear-gradient(90deg,#fbbf24,#fcd34d); -webkit-background-clip:text; background-clip:text; color:transparent}

/* WEB DESIGN — Violet dark section */
html body.page-design .section.dark{
  background:radial-gradient(ellipse at top, rgba(167,139,250,.18), transparent 70%), linear-gradient(180deg,#0a1024 0%,#1f1a4f 100%) !important;
}
html body.page-design .section.dark .eyebrow{background:rgba(167,139,250,.2); color:#c4b5fd; border-color:rgba(167,139,250,.35)}
html body.page-design .trust-card .num{background:linear-gradient(90deg,#a78bfa,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent}

/* EMAIL & SSL — Emerald dark section */
html body.page-email .section.dark{
  background:radial-gradient(ellipse at top, rgba(52,211,153,.16), transparent 70%), linear-gradient(180deg,#0a1024 0%,#0a2b2b 100%) !important;
}
html body.page-email .section.dark .eyebrow{background:rgba(52,211,153,.18); color:#6ee7b7; border-color:rgba(52,211,153,.35)}
html body.page-email .trust-card .num{background:linear-gradient(90deg,#34d399,#6ee7b7); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ABOUT — Indigo dark section */
html body.page-about .section.dark{
  background:radial-gradient(ellipse at top, rgba(129,140,248,.16), transparent 70%), linear-gradient(180deg,#0a1024 0%,#161e3e 100%) !important;
}
html body.page-about .section.dark .eyebrow{background:rgba(129,140,248,.18); color:#a5b4fc; border-color:rgba(129,140,248,.35)}
html body.page-about .trust-card .num{background:linear-gradient(90deg,#818cf8,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent}

/* FAQ — Teal dark section */
html body.page-faq .section.dark{
  background:radial-gradient(ellipse at top, rgba(45,212,191,.16), transparent 70%), linear-gradient(180deg,#0a1024 0%,#0c2532 100%) !important;
}
html body.page-faq .section.dark .eyebrow{background:rgba(45,212,191,.18); color:#5eead4; border-color:rgba(45,212,191,.35)}
html body.page-faq .trust-card .num{background:linear-gradient(90deg,#2dd4bf,#5eead4); -webkit-background-clip:text; background-clip:text; color:transparent}

/* CONTACT — Rose dark section */
html body.page-contact .section.dark{
  background:radial-gradient(ellipse at top, rgba(244,114,182,.15), transparent 70%), linear-gradient(180deg,#0a1024 0%,#2d1727 100%) !important;
}
html body.page-contact .section.dark .eyebrow{background:rgba(244,114,182,.18); color:#fbcfe8; border-color:rgba(244,114,182,.35)}
html body.page-contact .trust-card .num{background:linear-gradient(90deg,#f472b6,#fbcfe8); -webkit-background-clip:text; background-clip:text; color:transparent}

/* HOME — keeps the master multi-color gradient (no override) */

/* ============================================================
   FOUC FIX — no color transitions on initial page load
   Color/background transitions only apply on actual hover/interaction,
   never during initial render or page refresh.
   ============================================================ */
html:not(.wc-loaded) *,
html:not(.wc-loaded) *::before,
html:not(.wc-loaded) *::after{
  transition:none !important;
  animation-play-state:paused !important;
}
html.wc-loaded *{} /* allow transitions */

/* Specifically — prevent background-color transitions on hero containers */
.hero, .hero::before, .hero::after,
.page-hero, .page-hero::before, .page-hero::after,
.hero-card, .hero-visual,
.section.dark{
  transition:none !important;
}

/* Prevent the gradient-text animation from showing initial flash */
.gradient-text, .hero h1 .accent-word{
  background-attachment:scroll;
}

/* ============================================================
   ACTIVE MENU ITEM — clearly highlights the current page
   Targets: WordPress (.current-menu-item, .current_page_item)
   + our manual (.active)
   ============================================================ */
header.site-header .nav-links a.active,
header.site-header .nav-links .current-menu-item > a,
header.site-header .nav-links .current_page_item > a,
header.site-header .nav-links .current-menu-ancestor > a,
header.site-header .nav-links .current_page_ancestor > a{
  color:#22d3ee !important;
  background:linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,.04)) !important;
  font-weight:700;
  position:relative;
}
header.site-header.scrolled .nav-links a.active,
header.site-header.scrolled .nav-links .current-menu-item > a,
header.site-header.scrolled .nav-links .current_page_item > a{
  color:#1d4ed8 !important;
  background:linear-gradient(180deg, rgba(29,78,216,.08), rgba(29,78,216,.02)) !important;
}
/* underline accent under active item */
header.site-header .nav-links a.active::after,
header.site-header .nav-links .current-menu-item > a::after,
header.site-header .nav-links .current_page_item > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2.5px; border-radius:3px;
  background:linear-gradient(90deg,#22d3ee,#3b82f6,#8b5cf6);
  background-size:200% 100%;
  animation:activeUnderline 3s ease-in-out infinite;
}
@keyframes activeUnderline{
  0%, 100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Mobile menu also gets clear active state */
@media (max-width:900px){
  header.site-header .nav-links a.active,
  header.site-header .nav-links .current-menu-item > a,
  header.site-header .nav-links .current_page_item > a{
    background:rgba(59,130,246,.1) !important;
    color:#1d4ed8 !important;
    border-left:3px solid #1d4ed8;
    padding-left:13px !important;
  }
  header.site-header .nav-links a.active::after{display:none}
}

/* ============================================================
   STAT METRIC COLORS — locked, no transitions during count
   Fixes color shift when counter animation completes
   ============================================================ */
.hero-card .metrics .metric,
.hero-card .metrics .metric .num,
.hero-card .metrics .metric .lbl{
  transition:none !important;
  animation:none !important;
}
.hero-card .metric .num{
  /* Disable any background-gradient or background-clip that might be inherited */
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:none;
}
/* Lock each accent color with !important so per-page overrides don't shift */
.hero-card .metric.cyan .num{color:#22d3ee !important}
.hero-card .metric.violet .num{color:#a78bfa !important}
.hero-card .metric.amber .num{color:#fbbf24 !important}

/* Only allow hover to add a subtle scale (no color change) */
.hero-card .metric:hover .num{
  transform:scale(1.04);
  transition:transform .3s ease !important;
}

/* Trust-grid stat numbers stay per-page gradient but no animation either */
.section.dark .trust-card .num{
  transition:none !important;
  animation:none !important;
}

/* ============================================================
   ACTIVE MENU — remove the underline accent
   Keep only the color + background highlight
   ============================================================ */
header.site-header .nav-links a.active::after,
header.site-header .nav-links .current-menu-item > a::after,
header.site-header .nav-links .current_page_item > a::after,
header.site-header .nav-links .current-menu-ancestor > a::after,
header.site-header .nav-links .current_page_ancestor > a::after{
  display:none !important;
  content:none !important;
  background:none !important;
  animation:none !important;
}

/* ============================================================
   LIVE CHAT WIDGET
   ============================================================ */
.wc-chat-widget{position:fixed;right:22px;bottom:22px;z-index:90}
@supports (padding: max(0px)) {
  .wc-chat-widget{right:max(22px, env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom))}
}
.wc-chat-toggle{
  position:relative;
  width:60px; height:60px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(29,78,216,.45);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.wc-chat-toggle:hover{transform:scale(1.08); box-shadow:0 20px 50px rgba(29,78,216,.6)}
.wc-chat-pulse{
  position:absolute; inset:-4px;
  border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
  opacity:.5;
  animation:chatPulse 2.2s ease-in-out infinite;
  z-index:-1;
}
@keyframes chatPulse{
  0%{transform:scale(1); opacity:.5}
  50%{transform:scale(1.18); opacity:0}
  100%{transform:scale(1); opacity:0}
}
.wc-chat-widget.open .wc-chat-pulse{display:none}
.wc-chat-widget.open .wc-chat-open-icon{display:none}
.wc-chat-widget.open .wc-chat-close-icon{display:block !important}

.wc-chat-panel{
  position:absolute; right:0; bottom:74px;
  width:360px; max-width:calc(100vw - 44px);
  height:520px; max-height:calc(100vh - 100px);
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(15,25,51,.25);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform-origin:bottom right;
  animation:chatPanelIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes chatPanelIn{
  from{opacity:0; transform:scale(.85) translateY(20px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}

.wc-chat-header{
  padding:18px 20px;
  background:linear-gradient(135deg,#0a1024,#1e3a8a);
  color:#fff;
  display:flex; align-items:center; gap:12px;
}
.wc-chat-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#22d3ee,#3b82f6);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem;
  flex-shrink:0;
}
.wc-chat-header strong{display:block; font-size:.95rem}
.wc-chat-header span{font-size:.78rem; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:6px}
.wc-online-dot{width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:onlinePulse 2s infinite}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

.wc-chat-messages{
  flex:1;
  padding:20px;
  overflow-y:auto;
  background:#f8fafc;
  display:flex; flex-direction:column; gap:12px;
}
.wc-msg{max-width:80%}
.wc-msg-agent{align-self:flex-start}
.wc-msg-user{align-self:flex-end}
.wc-msg p{
  margin:0;
  padding:12px 16px;
  border-radius:18px;
  font-size:.93rem;
  line-height:1.5;
}
.wc-msg-agent p{background:#fff; color:#0a1024; box-shadow:0 1px 3px rgba(0,0,0,.05); border-bottom-left-radius:4px}
.wc-msg-user p{background:linear-gradient(135deg,#1d4ed8,#06b6d4); color:#fff; border-bottom-right-radius:4px}

.wc-chat-quick{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.wc-quick{
  padding:8px 14px;
  border:1.5px solid #e2e8f0;
  background:#fff;
  border-radius:999px;
  color:#1d4ed8;
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  transition:all .2s ease;
}
.wc-quick:hover{background:#1d4ed8; color:#fff; border-color:#1d4ed8; transform:translateY(-1px)}

.wc-chat-input{
  display:flex; gap:8px;
  padding:14px 16px;
  background:#fff;
  border-top:1px solid #e2e8f0;
}
.wc-chat-input input{
  flex:1;
  padding:12px 16px;
  border:1.5px solid #e2e8f0;
  border-radius:999px;
  font-size:.92rem;
  font-family:inherit;
  outline:none;
  transition:border-color .2s;
}
.wc-chat-input input:focus{border-color:#1d4ed8}
.wc-chat-input button{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
  color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.wc-chat-input button:hover{transform:scale(1.08)}

/* Mobile: full-width panel */
@media (max-width:480px){
  .wc-chat-panel{
    position:fixed; right:10px; left:10px; bottom:84px;
    width:auto; max-width:none;
    height:75vh;
  }
}

/* Hide on print */
@media print{ .wc-chat-widget{display:none !important} }