/* eDehradun — PRO visual layer (SEO-20261009c). Loaded AFTER the base stylesheet. Pure CSS + inline SVG: no external images/fonts. Dark mode follows the base tokens. Everything animated is switched off under prefers-reduced-motion. */ :root{ --g1: var(--accent); --g2: var(--accent-2); --glow: color-mix(in srgb, var(--accent) 22%, transparent); } html{scroll-behavior:smooth; scroll-padding-top:84px;} .ico{width:1em; height:1em; flex:none; display:block;} /* ---------- scroll progress + nav state ---------- */ .progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none; background:linear-gradient(90deg,var(--plate-a),var(--plate-b),var(--plate-c)); transform:scaleX(0); transform-origin:0 50%;} .nav{transition:box-shadow .25s ease, background .25s ease;} .nav.scrolled{box-shadow:0 8px 28px -18px rgba(0,0,0,.45);} /* ---------- aurora + dot grid behind the hero ---------- */ main{position:relative; isolation:isolate;} .aurora{position:absolute; inset:0 0 auto 0; height:min(980px,120vh); overflow:hidden; z-index:-1; pointer-events:none; -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent);} .aurora::before{content:""; position:absolute; inset:0; background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.2px); background-size:26px 26px; opacity:.5;} .aurora i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.34; will-change:transform;} .aurora i:nth-child(1){width:46vw; height:46vw; max-width:620px; max-height:620px; left:-8%; top:-14%; background:var(--plate-a); animation:drift1 22s ease-in-out infinite alternate;} .aurora i:nth-child(2){width:40vw; height:40vw; max-width:540px; max-height:540px; right:-6%; top:6%; background:var(--plate-b); animation:drift2 26s ease-in-out infinite alternate;} .aurora i:nth-child(3){width:34vw; height:34vw; max-width:460px; max-height:460px; left:38%; top:34%; background:var(--plate-c); opacity:.22; animation:drift3 30s ease-in-out infinite alternate;} @keyframes drift1{to{transform:translate(9vw,7vh) scale(1.15);}} @keyframes drift2{to{transform:translate(-8vw,10vh) scale(.9);}} @keyframes drift3{to{transform:translate(-6vw,-6vh) scale(1.2);}} /* ---------- hero polish ---------- */ .hero h1 em{ background:linear-gradient(100deg,var(--g1),var(--g2),var(--g1)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 7s linear infinite;} @keyframes shine{to{background-position:-220% 0;}} .btn{border-radius:10px;} .btn-primary{background:linear-gradient(135deg,var(--g1),color-mix(in srgb,var(--g1) 60%,var(--g2))); border-color:transparent; box-shadow:0 10px 24px -12px var(--g1);} .btn-primary:hover{background:var(--ink); box-shadow:0 14px 28px -14px rgba(0,0,0,.5);} /* floating service badges around the hero lockup */ .float-badge{position:absolute; z-index:3; display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem .5rem .55rem; border-radius:999px; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:color-mix(in srgb,var(--paper-2) 82%,transparent); border:1px solid var(--rule); backdrop-filter:blur(8px); box-shadow:var(--shadow-lg); animation:bob 6s ease-in-out infinite; will-change:transform;} .float-badge .ico{width:26px; height:26px; padding:5px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--b1,var(--g1)),var(--b2,var(--g2)));} .float-badge:nth-of-type(5){top:2%; left:-4%; --b1:#00A0DF; --b2:#3D7BFF; animation-delay:0s;} .float-badge:nth-of-type(6){top:10%; right:-5%; --b1:#EC008C; --b2:#FF63B4; animation-delay:-1.4s;} .float-badge:nth-of-type(7){bottom:22%; left:-7%; --b1:#2BB673; --b2:#00A0DF; animation-delay:-2.6s;} .float-badge:nth-of-type(8){bottom:8%; right:-3%; --b1:#FFB400; --b2:#EC008C; animation-delay:-3.8s;} .float-badge:nth-of-type(9){top:46%; right:-9%; --b1:#7A5CFF; --b2:#EC008C; animation-delay:-4.9s;} @keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}} @media (max-width:1100px){ .float-badge:nth-of-type(n+8){display:none;} .float-badge{left:auto;} .float-badge:nth-of-type(5){left:0;} } @media (max-width:560px){ .float-badge{display:none;} } /* ---------- stats band ---------- */ .stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-block:0 clamp(3rem,6vw,4.5rem); background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);} .stat{background:color-mix(in srgb,var(--paper-2) 92%,transparent); padding:clamp(1.2rem,2.6vw,1.9rem); display:flex; align-items:center; gap:1rem;} .stat .ico{width:46px; height:46px; padding:11px; border-radius:14px; color:var(--g1); background:color-mix(in srgb,var(--g1) 12%,transparent);} .stat b{display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1; font-stretch:condensed; font-variation-settings:'wdth' 80; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--ink) 50%,var(--g1))); -webkit-background-clip:text; background-clip:text; color:transparent;} .stat span{display:block; margin-top:.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);} @media (max-width:820px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:420px){ .stat{flex-direction:column; align-items:flex-start;} } /* ---------- marquee ---------- */ .marquee{overflow:hidden; border-block:1px solid var(--rule-soft); background:color-mix(in srgb,var(--paper-2) 70%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .marquee-track{display:flex; width:max-content; animation:marq 48s linear infinite;} .marquee:hover .marquee-track{animation-play-state:paused;} .marquee ul{display:flex; flex:none; margin:0; padding:1rem 0; list-style:none;} .marquee li{display:flex; align-items:center; gap:.7rem; padding-inline:1.6rem; white-space:nowrap; font-family:var(--display); font-size:1.35rem; font-weight:600; font-stretch:condensed; font-variation-settings:'wdth' 80; color:var(--ink-soft);} .marquee li .ico{width:20px; height:20px; color:var(--g1);} .marquee li::after{content:""; width:7px; height:7px; border-radius:50%; margin-left:1.6rem; background:linear-gradient(135deg,var(--plate-a),var(--plate-b));} @keyframes marq{to{transform:translateX(-50%);}} /* ---------- section heads ---------- */ .section-head h2{position:relative; padding-bottom:.9rem;} .section-head h2::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:64px; border-radius:4px; background:linear-gradient(90deg,var(--plate-a),var(--plate-b),var(--plate-c)); transition:width .8s cubic-bezier(.16,.86,.28,1);} .in .section-head h2::after, .section-head.in h2::after{width:120px;} /* ---------- cards: gradient icon tiles, spotlight, accent bar ---------- */ .cards{border-radius:16px; overflow:hidden; box-shadow:var(--shadow);} .card{position:relative; overflow:hidden;} .card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--glow), transparent 60%);} .card:hover::before{opacity:1;} .card::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--plate-a),var(--plate-b),var(--plate-c)); transition:transform .45s cubic-bezier(.16,.86,.28,1);} .card:hover::after{transform:scaleX(1);} .card > *{position:relative;} .card-ico{width:50px; height:50px; padding:12px; border-radius:15px; color:var(--g1); background:color-mix(in srgb,var(--g1) 11%,transparent); border:1px solid color-mix(in srgb,var(--g1) 22%,transparent); transition:transform .35s cubic-bezier(.16,.86,.28,1), background .25s ease, color .25s ease;} .card:hover .card-ico{color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); border-color:transparent; transform:translateY(-3px) rotate(-6deg) scale(1.06);} .card li{border-radius:999px;} /* ---------- plans ---------- */ @property --ang{syntax:''; inherits:false; initial-value:0deg;} .plan{border-radius:18px; transition:transform .3s ease, box-shadow .3s ease; overflow:hidden;} .plan:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);} .plan.featured{border:2px solid transparent; background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box, conic-gradient(from var(--ang),var(--plate-a),var(--plate-b),var(--plate-c),var(--plate-a)) border-box; animation:spin 6s linear infinite;} @keyframes spin{to{--ang:360deg;}} .plan-tag{border-radius:0 0 8px 8px; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff;} .price b{background:linear-gradient(135deg,var(--ink),var(--g1)); -webkit-background-clip:text; background-clip:text; color:transparent;} /* ---------- steps ---------- */ .steps{border-radius:16px; overflow:hidden; position:relative;} .step{position:relative; transition:background .25s ease; counter-increment:s;} .step:hover{background:var(--paper-2);} .step .step-no{transition:transform .35s cubic-bezier(.16,.86,.28,1);} .step:hover .step-no{transform:translateY(-4px) scale(1.06);} .step::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,var(--plate-a),var(--plate-b),var(--plate-c)); transition:width .5s ease;} .step:hover::after{width:100%;} /* ---------- sectors / why ---------- */ .sector{border-radius:14px;} .sector-ico{width:42px; height:42px; padding:9px; border-radius:12px; background:color-mix(in srgb,var(--g1) 10%,transparent); color:var(--g1); transition:transform .3s ease, background .25s ease, color .25s ease;} .sector:hover .sector-ico{background:linear-gradient(135deg,var(--g1),var(--g2)); color:#fff; transform:rotate(-8deg) scale(1.08);} .why{border-radius:16px; overflow:hidden;} .why > div{position:relative; overflow:hidden; transition:background .25s ease;} .why > div:hover{background:var(--paper-3);} .why > div::before{content:counter(w,decimal-leading-zero); counter-increment:w; position:absolute; right:1rem; top:.2rem; font-family:var(--display); font-size:4.5rem; font-weight:600; line-height:1; color:color-mix(in srgb,var(--ink) 7%,transparent);} .why{counter-reset:w;} /* ---------- decorative illustrations ---------- */ .deco{position:absolute; right:var(--gut); top:0; width:clamp(140px,20vw,230px); opacity:.95; pointer-events:none;} @media (max-width:860px){ .deco{display:none;} } .deco-wrap{position:relative;} .rack rect.u{fill:var(--paper-2); stroke:var(--rule); stroke-width:1.5;} .rack .led{animation:blink 1.6s steps(2,jump-none) infinite;} .rack .led:nth-of-type(3n){animation-duration:2.3s; animation-delay:-.7s;} .rack .led:nth-of-type(3n+1){animation-duration:1.1s; animation-delay:-.3s;} @keyframes blink{50%{opacity:.15;}} .regmark{animation:rot 24s linear infinite; transform-origin:50% 50%;} @keyframes rot{to{transform:rotate(360deg);}} .cmy circle{mix-blend-mode:var(--blend); animation:breathe 7s ease-in-out infinite;} .cmy circle:nth-child(2){animation-delay:-2.3s;} .cmy circle:nth-child(3){animation-delay:-4.6s;} @keyframes breathe{50%{transform:scale(1.08);}} .cmy circle{transform-box:fill-box; transform-origin:center;} /* ---------- stagger reveal (classes added by pro.js only) ---------- */ .pro-rv{opacity:0; transform:translateY(22px) scale(.985); transition:opacity .7s ease var(--d,0ms), transform .8s cubic-bezier(.16,.86,.28,1) var(--d,0ms);} .in .pro-rv, .pro-rv.in{opacity:1; transform:none;} /* ---------- faq + cta ---------- */ .faq details{border-radius:0; transition:background .2s ease;} .faq details[open]{background:color-mix(in srgb,var(--g1) 4%,transparent);} .cta-band{position:relative; overflow:hidden; border-radius:22px; padding:clamp(1.8rem,5vw,3.2rem); color:#fff; background:linear-gradient(120deg,#0b5f8a,#6a1b9a 55%,#c4007a); box-shadow:var(--shadow-lg);} .cta-band::before,.cta-band::after{content:""; position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; animation:drift2 14s ease-in-out infinite alternate;} .cta-band::before{width:300px; height:300px; right:-60px; top:-90px; background:#00A0DF;} .cta-band::after{width:260px; height:260px; left:-60px; bottom:-110px; background:#FFD400; opacity:.28; animation-name:drift1;} .cta-band > *{position:relative; z-index:1;} .cta-band .eyebrow{color:rgba(255,255,255,.75);} .cta-band h2{color:#fff; font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.8rem;} .cta-band .lede{color:rgba(255,255,255,.88);} .cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5);} .cta-band .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12); color:#fff;} .cta-band .btn-primary{background:#fff; color:#14181A; box-shadow:0 12px 26px -14px rgba(0,0,0,.6);} .cta-band .btn-primary:hover{background:#14181A; color:#fff;} .cta-band .addr{margin-top:1.1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:rgba(255,255,255,.8);} /* ---------- service-page hero scene ---------- */ .scene{position:relative; aspect-ratio:1/1; max-width:460px; width:100%; margin-inline:auto; display:grid; place-items:center;} .scene .ring{position:absolute; inset:6%; border-radius:50%; border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent); animation:rot 40s linear infinite;} .scene .ring.r2{inset:20%; animation-duration:28s; animation-direction:reverse; border-style:solid; border-color:color-mix(in srgb,var(--g1) 30%,transparent);} .scene .ring i{position:absolute; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--plate-a),var(--plate-b)); top:-7px; left:50%; box-shadow:0 0 18px var(--g1);} .scene .ring.r2 i{background:var(--plate-c); top:auto; bottom:-7px;} .scene .core{position:relative; width:46%; aspect-ratio:1; border-radius:28%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 30px 60px -24px var(--g1), inset 0 1px 0 rgba(255,255,255,.35); animation:bob 7s ease-in-out infinite;} .scene .core .ico{width:52%; height:52%; stroke-width:1.5;} .scene .tag{position:absolute; padding:.45rem .8rem; border-radius:999px; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:color-mix(in srgb,var(--paper-2) 85%,transparent); border:1px solid var(--rule); box-shadow:var(--shadow); backdrop-filter:blur(6px); display:flex; align-items:center; gap:.45rem; animation:bob 6s ease-in-out infinite;} .scene .tag .ico{width:16px; height:16px; color:var(--g1);} .scene .tag:nth-of-type(1){top:7%; left:-2%;} .scene .tag:nth-of-type(2){top:26%; right:-4%; animation-delay:-2s;} .scene .tag:nth-of-type(3){bottom:12%; left:2%; animation-delay:-4s;} @media (max-width:940px){ .scene{max-width:340px;} .scene .tag{display:none;} } /* ---------- floating contact dock ---------- */ .dock{position:fixed; right:clamp(.8rem,2vw,1.5rem); bottom:clamp(.8rem,2vw,1.5rem); z-index:110; display:flex; flex-direction:column; gap:.7rem;} .dock a{position:relative; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; text-decoration:none; box-shadow:0 14px 30px -10px rgba(0,0,0,.5); transition:transform .2s ease;} .dock a:hover{transform:translateY(-3px) scale(1.06);} .dock .ico{width:28px; height:28px;} .dock .wa{background:#25D366;} .dock .tel{background:linear-gradient(135deg,var(--g1),var(--g2));} .dock .wa::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ping 2.4s ease-out infinite;} @keyframes ping{0%{transform:scale(1); opacity:.8;} 100%{transform:scale(1.7); opacity:0;}} .dock span.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .aurora i,.float-badge,.marquee-track,.hero h1 em,.plan.featured,.regmark,.cmy circle,.rack .led,.scene .ring,.scene .core,.scene .tag,.dock .wa::before{animation:none !important;} .pro-rv{opacity:1; transform:none;} html{scroll-behavior:auto;} } /* ---------- nav + hero fit (v d) ---------- */ .nav-links a,.nav .btn{white-space:nowrap;} @media (max-width:1180px){ .nav-in{gap:1rem;} .nav-links{gap:1.05rem;} .nav-links a{font-size:.7rem; letter-spacing:.05em;} .nav .btn{padding:.6rem .8rem;} } .hero h1{font-size:clamp(2.35rem,5.2vw,4.1rem); line-height:1;} .aurora i{opacity:.27;} .aurora i:nth-child(3){opacity:.18;} /* ---------- top bar: service ticker above the menu (links) ---------- */ .topbar{position:relative; z-index:90; border-top:0; background:color-mix(in srgb,var(--paper-2) 94%,transparent);} .topbar ul{padding:.5rem 0;} .topbar li{font-size:1.06rem; padding-inline:1.3rem;} .topbar li::after{margin-left:1.3rem;} .topbar li a{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; border-radius:999px; padding:.18rem .2rem; transition:color .2s ease;} .topbar li a:hover,.topbar li a:focus-visible{color:var(--g1);} .topbar li a:hover .ico{transform:scale(1.2) rotate(-6deg);} .topbar li .ico{transition:transform .25s ease;} .topbar:hover .marquee-track,.topbar:focus-within .marquee-track{animation-play-state:paused;} /* ---------- form fit: long