/* Theme Name: Coinverse Pro Theme URI: https://coinverse.co.in Author: Coinverse Author URI: https://coinverse.co.in Description: Production-ready premium crypto-fintech WordPress theme. Dark glassmorphism UI, 3D animations, GSAP scroll effects, full WordPress Customizer support. INR-USDT exchange platform with Buy/Sell forms, live rate display, KYC, testimonials, FAQ. Version: 3.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GPL-2.0-or-later Tags: dark, crypto, fintech, animated, glassmorphism, premium, elementor Text Domain: coinverse-pro */ /* ═══════════════════════════════════════════════ CSS CUSTOM PROPERTIES (Customizer overrides in ) ═══════════════════════════════════════════════ */ :root { /* Brand */ --clr-primary: #0FF4C6; --clr-secondary: #5B5EFF; --clr-accent: #FFB800; --clr-danger: #FF4560; --clr-success: #00E396; --clr-wa: #25D366; /* Backgrounds */ --bg-deep: #020817; --bg-dark: #050F24; --bg-mid: #091428; --bg-card: rgba(255,255,255,0.04); --bg-card2: rgba(255,255,255,0.06); --bg-glass: rgba(5,15,36,0.7); /* Borders */ --border: rgba(255,255,255,0.08); --border-p: rgba(15,244,198,0.2); --border-s: rgba(91,94,255,0.2); /* Text */ --text-1: #F0F6FF; --text-2: #8BA4C8; --text-3: #4E6A8F; /* Glows */ --glow-p: rgba(15,244,198,0.15); --glow-s: rgba(91,94,255,0.15); --glow-a: rgba(255,184,0,0.15); /* Typography */ --font-display: 'Outfit', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'Fira Code', monospace; /* Layout */ --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; --transition: all .3s cubic-bezier(.4,0,.2,1); --shadow-card: 0 8px 48px rgba(0,0,0,.6); --shadow-glow-p: 0 0 60px rgba(15,244,198,0.12); --shadow-glow-s: 0 0 60px rgba(91,94,255,0.12); } /* ═══════════════════════════════════════════════ RESET ═══════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{ background:var(--bg-deep); color:var(--text-1); font-family:var(--font-body); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block} a{color:var(--clr-primary);text-decoration:none;transition:var(--transition)} a:hover{color:var(--clr-accent)} h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.02em} ul{list-style:none} input,select,textarea,button{font-family:var(--font-body)} button{cursor:pointer;border:none;background:none} ::selection{background:var(--clr-primary);color:#020817} ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--bg-dark)} ::-webkit-scrollbar-thumb{background:var(--clr-primary);border-radius:3px} /* ═══════════════════════════════════════════════ LAYOUT UTILITIES ═══════════════════════════════════════════════ */ .container{max-width:1220px;margin:0 auto;padding:0 28px} .section{padding:110px 0} .section--alt{background:var(--bg-dark)} .section--mid{background:var(--bg-mid)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .text-center{text-align:center} .text-primary{color:var(--clr-primary)} .text-secondary{color:var(--clr-secondary)} .text-accent{color:var(--clr-accent)} .text-muted{color:var(--text-2)} .text-gradient{ background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 60%,var(--clr-accent) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } /* Section labels */ .overline{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--clr-primary);margin-bottom:14px; } .overline::before,.overline::after{ content:'';display:block;width:18px;height:1.5px; background:var(--clr-primary);border-radius:2px; } .section-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;margin-bottom:18px} .section-sub{font-size:1.05rem;color:var(--text-2);max-width:560px;line-height:1.75} /* ═══════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 32px;border-radius:var(--radius);font-weight:700;font-size:.93rem; white-space:nowrap;transition:var(--transition);position:relative;overflow:hidden; } .btn::before{ content:'';position:absolute;inset:0; background:rgba(255,255,255,0);transition:background .2s; } .btn:hover::before{background:rgba(255,255,255,0.08)} .btn:active{transform:scale(.97)} /* Shimmer effect */ .btn::after{ content:'';position:absolute;top:0;left:-100%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left .5s; } .btn:hover::after{left:140%} .btn-primary{ background:linear-gradient(135deg,var(--clr-primary),#0CC9A2); color:#020817;box-shadow:0 0 30px rgba(15,244,198,0.4); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(15,244,198,0.6);color:#020817} .btn-secondary{ background:linear-gradient(135deg,var(--clr-secondary),#7879FF); color:#fff;box-shadow:0 0 30px rgba(91,94,255,0.4); } .btn-secondary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(91,94,255,0.6);color:#fff} .btn-outline{ background:transparent;color:var(--clr-primary); border:1.5px solid var(--clr-primary); } .btn-outline:hover{background:var(--glow-p)} .btn-ghost{ background:var(--bg-card2);color:var(--text-1); border:1px solid var(--border);backdrop-filter:blur(12px); } .btn-ghost:hover{border-color:var(--border-p);color:var(--clr-primary)} .btn-wa{ background:#25D366;color:#fff; box-shadow:0 4px 24px rgba(37,211,102,0.4); } .btn-wa:hover{background:#1db954;transform:translateY(-2px);color:#fff;box-shadow:0 8px 40px rgba(37,211,102,0.6)} .btn-accent{ background:linear-gradient(135deg,var(--clr-accent),#FF9500); color:#020817;box-shadow:0 4px 24px rgba(255,184,0,0.4); } .btn-accent:hover{transform:translateY(-2px);color:#020817;box-shadow:0 8px 40px rgba(255,184,0,0.6)} .btn-lg{padding:17px 40px;font-size:1rem;border-radius:var(--radius-lg)} .btn-sm{padding:10px 20px;font-size:.83rem} /* ═══════════════════════════════════════════════ BADGE / PILL ═══════════════════════════════════════════════ */ .badge{ display:inline-flex;align-items:center;gap:6px; padding:5px 14px;border-radius:100px;font-size:.72rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .badge-primary{background:var(--glow-p);color:var(--clr-primary);border:1px solid var(--border-p)} .badge-secondary{background:var(--glow-s);color:var(--clr-secondary);border:1px solid var(--border-s)} .badge-accent{background:var(--glow-a);color:var(--clr-accent);border:1px solid rgba(255,184,0,.2)} .badge-success{background:rgba(0,227,150,.1);color:var(--clr-success);border:1px solid rgba(0,227,150,.2)} .badge-danger{background:rgba(255,69,96,.1);color:var(--clr-danger);border:1px solid rgba(255,69,96,.2)} .live-dot::before{ content:'';display:inline-block;width:7px;height:7px; border-radius:50%;background:currentColor;margin-right:5px; animation:blink 1.5s ease-in-out infinite; } @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} /* ═══════════════════════════════════════════════ TOPBAR ═══════════════════════════════════════════════ */ .topbar{ background:var(--bg-mid);border-bottom:1px solid var(--border); padding:8px 0;font-size:.79rem; } .topbar__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .topbar__left,.topbar__right{display:flex;gap:20px;align-items:center} .topbar__right a{color:var(--text-2)} .topbar__right a:hover{color:var(--clr-primary)} .topbar__rate{ display:flex;align-items:center;gap:8px; background:rgba(15,244,198,0.08);border:1px solid var(--border-p); border-radius:100px;padding:3px 12px; font-size:.76rem;font-weight:700;color:var(--clr-primary); font-family:var(--font-mono); } /* ═══════════════════════════════════════════════ HEADER / NAV ═══════════════════════════════════════════════ */ .site-header{ position:sticky;top:0;z-index:990; background:rgba(2,8,23,0.85); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid var(--border); transition:box-shadow .3s,background .3s; } .site-header.scrolled{ background:rgba(2,8,23,0.95); box-shadow:0 4px 40px rgba(0,0,0,.7),0 0 0 1px rgba(15,244,198,0.05); } .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px} /* Logo */ .site-logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo-icon{ width:40px;height:40px;border-radius:10px; background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary)); display:flex;align-items:center;justify-content:center; font-weight:900;font-size:1.1rem;color:#020817; font-family:var(--font-display);flex-shrink:0; } .logo-text{font-family:var(--font-display);font-size:1.45rem;font-weight:800;color:var(--text-1)} .logo-text span{color:var(--clr-primary)} .logo-tag{ font-size:.5rem;font-weight:700;letter-spacing:.1em; color:var(--clr-accent);vertical-align:super;margin-left:1px; } /* Nav links */ .primary-nav{display:flex;align-items:center;gap:2px} .primary-nav a{ color:var(--text-2);font-weight:500;font-size:.88rem; padding:8px 14px;border-radius:9px;transition:var(--transition);white-space:nowrap; } .primary-nav a:hover,.primary-nav a.active{color:var(--text-1);background:var(--bg-card2)} /* Nav dropdown badge */ .nav-badge{ display:inline-flex;padding:2px 7px;border-radius:5px; font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:rgba(15,244,198,0.15);color:var(--clr-primary);margin-left:4px;vertical-align:middle; } .nav-actions{display:flex;align-items:center;gap:10px} .hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer} .hamburger span{display:block;width:24px;height:2px;background:var(--text-1);border-radius:2px;transition:var(--transition)} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile nav */ .mobile-nav{ display:none;position:fixed;inset:0;z-index:980; background:rgba(2,8,23,0.98);backdrop-filter:blur(24px); flex-direction:column;align-items:center;justify-content:center;gap:18px; padding:40px; } .mobile-nav.open{display:flex} .mobile-nav a{font-size:1.4rem;font-weight:700;color:var(--text-1);transition:var(--transition)} .mobile-nav a:hover{color:var(--clr-primary)} .mobile-nav .nav-actions{flex-direction:column;width:100%;max-width:280px;margin-top:20px} .mobile-nav .nav-actions .btn{width:100%;justify-content:center} /* ═══════════════════════════════════════════════ HERO SECTION ═══════════════════════════════════════════════ */ .hero{ position:relative;min-height:100vh; display:flex;align-items:center; padding:120px 0 80px;overflow:hidden; } /* Layered backgrounds */ .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg__gradient{ position:absolute;inset:0; background: radial-gradient(ellipse 90% 70% at 60% 20%,rgba(91,94,255,0.12) 0%,transparent 65%), radial-gradient(ellipse 60% 60% at 10% 80%,rgba(15,244,198,0.08) 0%,transparent 60%), radial-gradient(ellipse 40% 40% at 95% 90%,rgba(255,184,0,0.05) 0%,transparent 55%); animation:bg-pulse 8s ease-in-out infinite alternate; } @keyframes bg-pulse{ 0%{opacity:1;transform:scale(1)} 100%{opacity:.7;transform:scale(1.05)} } .hero-bg__grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:50px 50px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%); } .hero-bg__noise{ position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity:.6;pointer-events:none; } /* Floating orbs */ .hero-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .orb{ position:absolute;border-radius:50%;filter:blur(80px); animation:orb-float linear infinite; } .orb-1{width:500px;height:500px;background:rgba(91,94,255,0.08);top:-10%;left:60%;animation-duration:25s} .orb-2{width:350px;height:350px;background:rgba(15,244,198,0.06);top:50%;left:-5%;animation-duration:20s;animation-delay:-8s} .orb-3{width:280px;height:280px;background:rgba(255,184,0,0.05);bottom:10%;right:10%;animation-duration:18s;animation-delay:-12s} @keyframes orb-float{ 0%{transform:translateY(0) translateX(0) scale(1)} 33%{transform:translateY(-40px) translateX(20px) scale(1.05)} 66%{transform:translateY(20px) translateX(-30px) scale(.96)} 100%{transform:translateY(0) translateX(0) scale(1)} } /* Particles */ .hero-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .particle{ position:absolute;border-radius:50%; background:var(--clr-primary); animation:particle-rise linear infinite; opacity:0; } @keyframes particle-rise{ 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:.4} 85%{opacity:.1} 100%{transform:translateY(-20vh) scale(1.5);opacity:0} } /* Hero layout */ .hero-inner{ position:relative;z-index:2; display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center; } /* Hero left */ .hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap} .hero-title{ font-size:clamp(2.8rem,5.5vw,4.8rem);font-weight:900; line-height:1.06;margin-bottom:26px;letter-spacing:-.03em; } .hero-title .line-2{display:block;margin-top:4px} .hero-desc{font-size:1.1rem;color:var(--text-2);margin-bottom:38px;max-width:520px;line-height:1.8} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px} /* Stats row */ .hero-stats{ display:flex;gap:0; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(12px); } .hero-stat{ flex:1;padding:20px 24px; border-right:1px solid var(--border); transition:background .25s; } .hero-stat:last-child{border-right:none} .hero-stat:hover{background:var(--bg-card2)} .hero-stat__val{ font-family:var(--font-display);font-size:1.7rem;font-weight:900; line-height:1;margin-bottom:5px; } .hero-stat__val.p{color:var(--clr-primary)} .hero-stat__val.s{color:var(--clr-secondary)} .hero-stat__val.a{color:var(--clr-accent)} .hero-stat__label{font-size:.73rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em} /* ═══════════════════════════════════════════════ CALCULATOR / RATE CARD (Hero Right) ═══════════════════════════════════════════════ */ .rate-card{ background:var(--bg-glass); border:1px solid var(--border-p); border-radius:var(--radius-xl); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); padding:32px; box-shadow:var(--shadow-card),var(--shadow-glow-p),inset 0 1px 0 rgba(255,255,255,0.06); position:relative;overflow:hidden; transition:transform .5s cubic-bezier(.4,0,.2,1),box-shadow .5s; } .rate-card::before{ content:'';position:absolute;top:0;left:15%;right:15%;height:1px; background:linear-gradient(90deg,transparent,var(--clr-primary),transparent); } .rate-card::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(15,244,198,0.06) 0%,transparent 60%); pointer-events:none; } .rate-card:hover{ transform:translateY(-6px); box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 100px rgba(15,244,198,0.2),inset 0 1px 0 rgba(255,255,255,0.1); } /* Tab switcher */ .card-tabs{ display:flex;background:rgba(0,0,0,.3); border-radius:10px;padding:4px;margin-bottom:26px; border:1px solid var(--border); } .card-tab{ flex:1;padding:9px;border-radius:7px; font-size:.83rem;font-weight:700;text-align:center;cursor:pointer; color:var(--text-2);transition:var(--transition); } .card-tab.active.buy{background:linear-gradient(135deg,var(--clr-primary),#0CC9A2);color:#020817} .card-tab.active.sell{background:linear-gradient(135deg,var(--clr-danger),#FF6B8A);color:#fff} .card-tab:not(.active):hover{background:var(--bg-card2);color:var(--text-1)} /* Tier chips */ .tier-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px} .tier-chip{ padding:5px 11px;border-radius:8px;font-size:.7rem;font-weight:700;cursor:pointer; background:rgba(0,0,0,.3);border:1px solid var(--border);color:var(--text-3); transition:var(--transition);white-space:nowrap; } .tier-chip:hover,.tier-chip.active{ background:rgba(15,244,198,.1);border-color:var(--clr-primary);color:var(--clr-primary); } /* Floating label inputs */ .input-float{position:relative;margin-bottom:16px} .input-float input,.input-float select{ width:100%;background:rgba(0,0,0,.35);border:1.5px solid var(--border); border-radius:var(--radius);color:var(--text-1);padding:20px 18px 8px; font-size:1.15rem;font-family:var(--font-mono);font-weight:700; outline:none;transition:var(--transition); -webkit-appearance:none; } .input-float input:focus,.input-float select:focus{ border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(15,244,198,0.12); background:rgba(0,0,0,.5); } .input-float label{ position:absolute;left:18px;top:14px; font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--text-3);pointer-events:none;transition:var(--transition); } .input-float .prefix{ position:absolute;left:18px;bottom:10px; font-family:var(--font-mono);font-size:1.15rem;font-weight:700;color:var(--clr-primary); pointer-events:none; } .input-float input.has-prefix{padding-left:42px} .input-float .suffix{ position:absolute;right:14px;bottom:10px; font-size:.72rem;font-weight:700;color:var(--text-3); background:var(--bg-card2);padding:2px 8px;border-radius:6px; border:1px solid var(--border); } .output-field{ background:rgba(0,0,0,.4);border:1.5px solid rgba(255,184,0,.2); border-radius:var(--radius);padding:12px 18px;margin-bottom:16px; display:flex;justify-content:space-between;align-items:center; } .output-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)} .output-val{font-family:var(--font-mono);font-size:1.5rem;font-weight:900;color:var(--clr-accent)} /* Rate info */ .rate-info-bar{ background:rgba(0,0,0,.25);border:1px solid var(--border); border-radius:var(--radius);padding:10px 14px;margin-bottom:10px; display:flex;justify-content:space-between;align-items:center; font-size:.8rem; } .rate-info-bar .val{font-family:var(--font-mono);font-weight:700;color:var(--clr-primary)} #calcTierLabel{color:var(--clr-secondary)} /* ═══════════════════════════════════════════════ TRUST BAR ═══════════════════════════════════════════════ */ .trust-bar{ padding:22px 0; background:var(--bg-mid); border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .trust-bar__items{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--text-2);font-weight:500} .trust-item svg{flex-shrink:0;opacity:.8} /* ═══════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════ */ .about-visual{ background:var(--bg-glass);border:1px solid var(--border-p); border-radius:var(--radius-xl);padding:40px; backdrop-filter:blur(12px);position:relative;overflow:hidden; } .about-visual::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--clr-secondary),transparent); } .about-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px} .about-stat{ background:rgba(0,0,0,.3);border:1px solid var(--border); border-radius:var(--radius);padding:22px 18px;text-align:center; transition:var(--transition); } .about-stat:hover{border-color:var(--border-p);background:rgba(15,244,198,0.04)} .about-stat__num{ font-family:var(--font-display);font-size:2rem;font-weight:900; margin-bottom:4px; } .about-stat__label{font-size:.73rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em} .feature-list{margin-top:28px} .feature-item{ display:flex;align-items:flex-start;gap:14px; padding:16px;border-radius:var(--radius);margin-bottom:10px; border:1px solid var(--border);background:var(--bg-card); transition:var(--transition); } .feature-item:hover{border-color:var(--border-p);background:rgba(15,244,198,0.03);transform:translateX(6px)} .feature-item__icon{ width:40px;height:40px;border-radius:9px;flex-shrink:0; background:rgba(15,244,198,0.12);display:flex;align-items:center;justify-content:center; font-size:1.1rem; } .feature-item__title{font-size:.9rem;font-weight:700;margin-bottom:3px} .feature-item__desc{font-size:.8rem;color:var(--text-2);line-height:1.55} /* ═══════════════════════════════════════════════ SERVICES ═══════════════════════════════════════════════ */ .services-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px; } .service-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:28px 24px; position:relative;overflow:hidden;cursor:default; transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .3s; } .service-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:var(--card-color,var(--clr-primary)); transform:scaleX(0);transform-origin:left;transition:transform .4s; } .service-card::after{ content:'';position:absolute;bottom:-60px;right:-60px; width:140px;height:140px;border-radius:50%; background:var(--card-color,var(--clr-primary)); opacity:0;transition:opacity .4s,transform .4s;filter:blur(40px); transform:scale(.5); } .service-card:hover{ transform:translateY(-8px); border-color:var(--card-color,var(--clr-primary)); box-shadow:0 20px 60px rgba(0,0,0,.5); } .service-card:hover::before{transform:scaleX(1)} .service-card:hover::after{opacity:.08;transform:scale(1)} .service-card__icon{ width:56px;height:56px;border-radius:13px;margin-bottom:20px; background:rgba(var(--card-rgb,15,244,198),0.1); display:flex;align-items:center;justify-content:center;font-size:1.6rem; transition:var(--transition);border:1px solid rgba(var(--card-rgb,15,244,198),.15); } .service-card:hover .service-card__icon{ background:rgba(var(--card-rgb,15,244,198),0.2); transform:scale(1.05) rotate(-3deg); } .service-card__title{font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--text-1)} .service-card__desc{font-size:.83rem;color:var(--text-2);line-height:1.65} .service-card__link{ display:inline-flex;align-items:center;gap:5px; font-size:.78rem;font-weight:700;margin-top:16px; color:var(--card-color,var(--clr-primary));opacity:0; transition:var(--transition);transform:translateX(-8px); } .service-card:hover .service-card__link{opacity:1;transform:translateX(0)} /* ═══════════════════════════════════════════════ WHY CHOOSE US ═══════════════════════════════════════════════ */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px} .why-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:28px 22px;text-align:center; transition:var(--transition);position:relative;overflow:hidden; } .why-card::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(15,244,198,0.06) 0%,transparent 70%); opacity:0;transition:opacity .35s; } .why-card:hover{border-color:var(--border-p);transform:translateY(-6px);box-shadow:var(--shadow-card)} .why-card:hover::after{opacity:1} .why-num{ font-family:var(--font-mono);font-size:.7rem;font-weight:700; color:var(--clr-primary);letter-spacing:.12em;margin-bottom:14px;opacity:.6; } .why-icon{ width:60px;height:60px;border-radius:14px;margin:0 auto 18px; background:rgba(15,244,198,0.08);border:1px solid var(--border-p); display:flex;align-items:center;justify-content:center;font-size:1.5rem; transition:var(--transition); } .why-card:hover .why-icon{background:rgba(15,244,198,0.15);transform:scale(1.08) rotate(5deg)} .why-card__title{font-size:.95rem;font-weight:700;margin-bottom:8px} .why-card__desc{font-size:.81rem;color:var(--text-2);line-height:1.6} /* ═══════════════════════════════════════════════ HOW IT WORKS ═══════════════════════════════════════════════ */ .steps-container{position:relative;margin-top:60px} .steps-track{ position:absolute;top:52px;left:calc(12.5% + 8px);right:calc(12.5% + 8px);height:2px; background:linear-gradient(90deg,var(--clr-primary),var(--clr-secondary),var(--clr-accent)); border-radius:2px;z-index:0; } .steps-track__progress{ position:absolute;inset:0; background:rgba(0,0,0,.6);transform-origin:left; animation:progress-shrink 3s ease-in-out infinite alternate; } @keyframes progress-shrink{0%{transform:scaleX(1)}100%{transform:scaleX(0.1)}} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1} .step-card{ text-align:center;padding:0 12px; transition:var(--transition); } .step-num{ width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; margin:0 auto 22px;position:relative;z-index:2; font-family:var(--font-mono);font-size:1.1rem;font-weight:800; transition:var(--transition); } .step-card:nth-child(1) .step-num{background:rgba(15,244,198,.1);border:2px solid var(--clr-primary);color:var(--clr-primary);box-shadow:0 0 30px rgba(15,244,198,.2)} .step-card:nth-child(2) .step-num{background:rgba(91,94,255,.1);border:2px solid var(--clr-secondary);color:var(--clr-secondary);box-shadow:0 0 30px rgba(91,94,255,.2)} .step-card:nth-child(3) .step-num{background:rgba(255,184,0,.1);border:2px solid var(--clr-accent);color:var(--clr-accent);box-shadow:0 0 30px rgba(255,184,0,.2)} .step-card:nth-child(4) .step-num{background:rgba(0,227,150,.1);border:2px solid var(--clr-success);color:var(--clr-success);box-shadow:0 0 30px rgba(0,227,150,.2)} .step-card:hover .step-num{transform:scale(1.1)} .step-card:nth-child(1):hover .step-num{background:var(--clr-primary);color:#020817} .step-card:nth-child(2):hover .step-num{background:var(--clr-secondary);color:#fff} .step-card:nth-child(3):hover .step-num{background:var(--clr-accent);color:#020817} .step-card:nth-child(4):hover .step-num{background:var(--clr-success);color:#020817} .step-title{font-size:1rem;font-weight:700;margin-bottom:10px} .step-desc{font-size:.83rem;color:var(--text-2);line-height:1.6} /* ═══════════════════════════════════════════════ LIVE RATE SECTION ═══════════════════════════════════════════════ */ .rate-section-inner{ display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start; } .rate-dashboard{ background:var(--bg-glass);border:1px solid var(--border); border-radius:var(--radius-xl);overflow:hidden; backdrop-filter:blur(16px); box-shadow:var(--shadow-card); } .rate-dashboard__header{ padding:18px 24px;border-bottom:1px solid var(--border); display:flex;justify-content:space-between;align-items:center; background:rgba(0,0,0,.2); } .rate-dashboard__title{font-size:.82rem;font-weight:700;color:var(--text-2)} .rate-dashboard__body{padding:20px} /* Rate display */ .rate-display{ display:flex;justify-content:space-between;align-items:center; padding:18px 20px;border-radius:var(--radius);margin-bottom:10px; border:1px solid var(--border);transition:var(--transition);cursor:default; } .rate-display:hover{border-color:var(--border-p);background:rgba(15,244,198,.03)} .rate-display--buy{border-color:rgba(15,244,198,.15);background:rgba(15,244,198,.04)} .rate-display--sell{border-color:rgba(255,69,96,.15);background:rgba(255,69,96,.04)} .rate-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)} .rate-value{font-family:var(--font-mono);font-size:1.6rem;font-weight:900} .rate-display--buy .rate-value{color:var(--clr-primary)} .rate-display--sell .rate-value{color:var(--clr-danger)} .rate-change{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:5px} .rate-change.up{background:rgba(0,227,150,.12);color:var(--clr-success)} .rate-change.down{background:rgba(255,69,96,.12);color:var(--clr-danger)} /* Ticker tape */ .ticker-tape{ background:rgba(0,0,0,.4);border-top:1px solid var(--border); overflow:hidden;height:36px;display:flex;align-items:center; } .ticker-inner{ display:flex;gap:48px;white-space:nowrap; animation:ticker-scroll 20s linear infinite; font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--text-2); } @keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .ticker-item{display:flex;align-items:center;gap:8px} .ticker-item .up{color:var(--clr-success)} .ticker-item .dn{color:var(--clr-danger)} /* Mini chart bars */ .mini-chart{display:flex;align-items:flex-end;gap:3px;height:50px;padding:10px 0} .bar{ flex:1;border-radius:3px 3px 0 0; background:linear-gradient(0deg,var(--clr-primary),rgba(15,244,198,.3)); animation:bar-pulse 2s ease-in-out infinite alternate; } @keyframes bar-pulse{0%{opacity:.6;transform:scaleY(.8);transform-origin:bottom}100%{opacity:1;transform:scaleY(1);transform-origin:bottom}} /* Volume tiers in rate section */ .tier-table{width:100%;border-collapse:collapse;margin-top:8px} .tier-table th{ padding:11px 16px;font-size:.7rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text-3); text-align:left;border-bottom:1px solid var(--border); } .tier-table td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:.88rem;vertical-align:middle} .tier-table tr:last-child td{border-bottom:none} .tier-table tr:hover td{background:rgba(255,255,255,.02)} .tier-rate{font-family:var(--font-mono);font-weight:900;color:var(--clr-primary);font-size:1rem} .tier-popular td:first-child{border-left:2px solid var(--clr-primary);padding-left:14px} .tier-popular td{background:rgba(15,244,198,.03)} /* ═══════════════════════════════════════════════ FORMS SECTION (Buy / Sell / Contact) ═══════════════════════════════════════════════ */ .forms-tabs{ display:flex;gap:6px;margin-bottom:40px; background:rgba(0,0,0,.3);border:1px solid var(--border); border-radius:var(--radius-lg);padding:6px; max-width:460px; } .forms-tab{ flex:1;padding:11px;border-radius:var(--radius); font-size:.85rem;font-weight:700;text-align:center;cursor:pointer; color:var(--text-2);transition:var(--transition); } .forms-tab.active{background:linear-gradient(135deg,var(--clr-primary),#0CC9A2);color:#020817} .forms-tab:not(.active):hover{background:var(--bg-card2);color:var(--text-1)} .form-panel{display:none} .form-panel.active{display:block} .form-wrap{ background:var(--bg-glass);border:1px solid var(--border-p); border-radius:var(--radius-xl);padding:44px; backdrop-filter:blur(24px);box-shadow:var(--shadow-card),var(--shadow-glow-p); position:relative;overflow:hidden; } .form-wrap::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--clr-primary),var(--clr-secondary),var(--clr-accent)); background-size:200%;animation:shimmer-bar 3s linear infinite; } @keyframes shimmer-bar{0%{background-position:0%}100%{background-position:200%}} .form-wrap::after{ content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:50%; background:radial-gradient(ellipse,rgba(91,94,255,.08) 0%,transparent 70%);pointer-events:none; } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .fg-full{grid-column:1/-1} /* Standard form controls */ .form-group{position:relative;margin-bottom:6px} .form-group label{ display:block;font-size:.73rem;font-weight:700; text-transform:uppercase;letter-spacing:.08em; color:var(--text-2);margin-bottom:7px; } .form-group .req{color:var(--clr-danger)} .form-ctrl{ width:100%;background:rgba(0,0,0,.4); border:1.5px solid var(--border);color:var(--text-1); border-radius:var(--radius);padding:14px 18px; font-size:.93rem;outline:none;transition:var(--transition); } .form-ctrl:focus{border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(15,244,198,0.1)} .form-ctrl::placeholder{color:var(--text-3)} textarea.form-ctrl{resize:vertical;min-height:110px} select.form-ctrl{ cursor:pointer;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%234E6A8F' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:44px; } /* Upload zones */ .upload-zone{ border:2px dashed var(--border);border-radius:var(--radius); padding:28px 20px;text-align:center;cursor:pointer;background:rgba(0,0,0,.2); transition:var(--transition); } .upload-zone:hover{border-color:var(--clr-primary);background:rgba(15,244,198,.05)} .upload-zone.has-file{border-color:var(--clr-primary);border-style:solid} .upload-zone p{font-size:.8rem;color:var(--text-2);margin-top:8px} .upload-zone strong{color:var(--clr-primary)} .upload-zone input{display:none} .uploaded-name{display:none;font-size:.76rem;color:var(--clr-primary);font-weight:600;margin-top:8px} /* Consent */ .consent-row{display:flex;gap:11px;align-items:flex-start} .consent-row input[type=checkbox]{accent-color:var(--clr-primary);width:15px;height:15px;flex-shrink:0;margin-top:3px;cursor:pointer} .consent-row label{font-size:.8rem;color:var(--text-2);cursor:pointer;line-height:1.55} .consent-row a{color:var(--clr-primary)} /* Form alerts */ .form-alert{display:none;margin-top:16px;padding:13px 18px;border-radius:var(--radius);font-size:.85rem;text-align:center} .form-alert.error{background:rgba(255,69,96,.1);border:1px solid rgba(255,69,96,.3);color:var(--clr-danger)} .form-alert.success{background:rgba(0,227,150,.1);border:1px solid rgba(0,227,150,.3);color:var(--clr-success)} /* Success overlay */ .form-success{display:none;text-align:center;padding:40px 0} .form-success.show{display:block} .form-success__icon{font-size:4rem;margin-bottom:16px} .form-success__title{font-size:1.4rem;font-weight:800;color:var(--clr-primary);margin-bottom:10px} .form-success__sub{font-size:.9rem;color:var(--text-2)} /* ═══════════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════════ */ .testimonial-track{overflow:hidden;margin-top:50px} .testimonial-slide{display:none} .testimonial-slide.active{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .testimonial-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:28px; transition:var(--transition); } .testimonial-card:hover{border-color:var(--border-p);transform:translateY(-4px);box-shadow:var(--shadow-card)} .testimonial-stars{display:flex;gap:3px;margin-bottom:14px;color:var(--clr-accent);font-size:.9rem} .testimonial-text{font-size:.88rem;color:var(--text-2);line-height:1.75;margin-bottom:20px;font-style:italic} .testimonial-author{display:flex;align-items:center;gap:12px} .testimonial-avatar{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary)); display:flex;align-items:center;justify-content:center; font-weight:800;font-size:.95rem;color:#020817;flex-shrink:0; } .testimonial-name{font-size:.88rem;font-weight:700} .testimonial-role{font-size:.75rem;color:var(--text-3)} .testimonial-controls{display:flex;justify-content:center;gap:10px;margin-top:28px} .tctrl{ width:10px;height:10px;border-radius:50%; background:var(--border);transition:var(--transition);cursor:pointer;border:none; } .tctrl.active{background:var(--clr-primary);width:28px;border-radius:5px} /* ═══════════════════════════════════════════════ FAQ ═══════════════════════════════════════════════ */ .faq-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px; margin-top:50px;align-items:start; } .faq-item{ border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;transition:border-color .25s; } .faq-item.open{border-color:rgba(15,244,198,.2)} .faq-q{ display:flex;justify-content:space-between;align-items:center; padding:20px 22px;cursor:pointer;font-weight:600;font-size:.92rem; background:var(--bg-card2);user-select:none;transition:var(--transition); gap:12px; } .faq-q:hover{background:rgba(15,244,198,.04)} .faq-icon{ width:28px;height:28px;border-radius:7px;flex-shrink:0; background:var(--bg-card);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:.9rem;color:var(--clr-primary);transition:transform .35s; } .faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(15,244,198,.1)} .faq-a{ max-height:0;overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .35s; font-size:.87rem;color:var(--text-2);line-height:1.75; background:var(--bg-card); } .faq-item.open .faq-a{max-height:220px;padding:16px 22px} /* ═══════════════════════════════════════════════ TRUST / STATS COUNTER ═══════════════════════════════════════════════ */ .counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px} .counter-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius-lg);padding:30px 22px;text-align:center; position:relative;overflow:hidden;transition:var(--transition); } .counter-card::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(15,244,198,.06) 0%,transparent 70%); opacity:0;transition:opacity .35s; } .counter-card:hover{border-color:var(--border-p);transform:translateY(-5px)} .counter-card:hover::before{opacity:1} .counter-num{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--clr-primary);line-height:1;margin-bottom:6px} .counter-num.s{color:var(--clr-secondary)} .counter-num.a{color:var(--clr-accent)} .counter-label{font-size:.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em} .counter-icon{font-size:1.8rem;margin-bottom:12px;display:block} /* ═══════════════════════════════════════════════ CTA BANNER ═══════════════════════════════════════════════ */ .cta-banner{ background:linear-gradient(135deg,rgba(91,94,255,.12) 0%,rgba(15,244,198,.08) 50%,rgba(255,184,0,.06) 100%); border:1px solid var(--border-p);border-radius:var(--radius-xl); padding:80px 60px;text-align:center;position:relative;overflow:hidden; } .cta-banner::before{ content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%); width:700px;height:280px; background:radial-gradient(ellipse,rgba(91,94,255,.12) 0%,transparent 70%); } .cta-banner::after{ content:'';position:absolute;bottom:-60px;right:-60px; width:280px;height:280px;border-radius:50%; background:radial-gradient(ellipse,rgba(15,244,198,.08) 0%,transparent 70%); } .cta-banner h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:16px;position:relative;z-index:2} .cta-banner p{font-size:1.05rem;color:var(--text-2);margin-bottom:36px;position:relative;z-index:2} .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2} /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ .site-footer{ background:var(--bg-mid);border-top:1px solid var(--border); padding:72px 0 32px; } .footer-grid{display:grid;grid-template-columns:2.4fr 1fr 1fr 1.3fr;gap:50px;margin-bottom:50px} .footer-brand p{font-size:.87rem;color:var(--text-2);margin:16px 0 24px;max-width:270px;line-height:1.7} .footer-socials{display:flex;gap:10px} .social-btn{ width:38px;height:38px;border-radius:9px; background:var(--bg-card2);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:1rem;color:var(--text-2);transition:var(--transition); } .social-btn:hover{background:var(--glow-p);border-color:var(--border-p);color:var(--clr-primary)} .footer-col h4{ font-size:.77rem;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:var(--text-3);margin-bottom:18px; } .footer-col ul li{margin-bottom:12px} .footer-col ul li a{color:var(--text-2);font-size:.86rem;transition:var(--transition)} .footer-col ul li a:hover{color:var(--clr-primary);padding-left:4px} .footer-contact li{ display:flex;gap:10px;align-items:flex-start; margin-bottom:12px;font-size:.85rem;color:var(--text-2); } .footer-contact .icon{flex-shrink:0;font-size:1rem;margin-top:1px} .footer-bottom{ border-top:1px solid var(--border);padding-top:26px; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px; font-size:.78rem;color:var(--text-3); } .footer-links{display:flex;gap:22px} .footer-links a{color:var(--text-3);font-size:.78rem;transition:var(--transition)} .footer-links a:hover{color:var(--clr-primary)} /* ═══════════════════════════════════════════════ WHATSAPP FLOAT ═══════════════════════════════════════════════ */ .wa-float{ position:fixed;bottom:30px;right:30px;z-index:9000; width:60px;height:60px;border-radius:50%; background:var(--clr-wa);color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.65rem;text-decoration:none; box-shadow:0 6px 30px rgba(37,211,102,0.6); animation:wa-bounce 2.5s ease-in-out infinite; transition:transform .2s,box-shadow .2s; } .wa-float:hover{transform:scale(1.12)!important;box-shadow:0 10px 50px rgba(37,211,102,.8);color:#fff;animation:none} @keyframes wa-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.04)}} /* WA tooltip */ .wa-float::before{ content:'Chat with us!'; position:absolute;right:72px;background:#020817;color:var(--text-1); font-size:.73rem;font-weight:600;padding:6px 12px;border-radius:8px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s; border:1px solid var(--border);font-family:var(--font-body); } .wa-float:hover::before{opacity:1} /* ═══════════════════════════════════════════════ SCROLL REVEAL ═══════════════════════════════════════════════ */ [data-aos]{opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)} [data-aos=fade-up]{transform:translateY(40px)} [data-aos=fade-left]{transform:translateX(40px)} [data-aos=fade-right]{transform:translateX(-40px)} [data-aos=zoom-in]{transform:scale(.9)} [data-aos].aos-animate{opacity:1;transform:none} [data-aos-delay="100"]{transition-delay:.1s} [data-aos-delay="200"]{transition-delay:.2s} [data-aos-delay="300"]{transition-delay:.3s} [data-aos-delay="400"]{transition-delay:.4s} [data-aos-delay="500"]{transition-delay:.5s} /* ═══════════════════════════════════════════════ SINGLE / PAGE TEMPLATES ═══════════════════════════════════════════════ */ .page-hero{ padding:100px 0 60px;text-align:center; background:linear-gradient(180deg,var(--bg-mid) 0%,var(--bg-deep) 100%); border-bottom:1px solid var(--border); } .page-hero h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px} .page-content{padding:80px 0} .page-content p{color:var(--text-2);line-height:1.85;margin-bottom:18px;font-size:.96rem} .page-content h2{font-size:1.6rem;margin:36px 0 14px;color:var(--text-1)} .page-content ul{margin:14px 0 18px 20px;list-style:disc} .page-content ul li{color:var(--text-2);margin-bottom:8px;font-size:.95rem} .error-page{text-align:center;padding:140px 0} /* ═══════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════ */ @media(max-width:1100px){ .hero-inner{grid-template-columns:1fr} .rate-card{max-width:520px;margin:0 auto} .footer-grid{grid-template-columns:1fr 1fr} .services-grid,.why-grid,.counter-grid{grid-template-columns:repeat(2,1fr)} .testimonial-slide.active{grid-template-columns:1fr 1fr} .rate-section-inner{grid-template-columns:1fr} } @media(max-width:900px){ .grid-2{grid-template-columns:1fr} .steps-track{display:none} .steps-grid{grid-template-columns:repeat(2,1fr);gap:24px} .faq-grid{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .fg-full{grid-column:auto} } @media(max-width:768px){ .section{padding:72px 0} .primary-nav,.nav-actions .btn-ghost,.nav-actions .btn-outline{display:none} .hamburger{display:flex} .topbar{display:none} .hero{min-height:auto;padding:90px 0 60px} .hero-stats{flex-direction:column;gap:0} .hero-stat{border-right:none;border-bottom:1px solid var(--border)} .hero-stat:last-child{border-bottom:none} .services-grid,.why-grid,.counter-grid{grid-template-columns:1fr} .testimonial-slide.active{grid-template-columns:1fr} .form-wrap{padding:28px 22px} .forms-tabs{flex-wrap:wrap} .cta-banner{padding:48px 28px} .footer-grid{grid-template-columns:1fr} .cta-actions{flex-direction:column;align-items:center} .hero-actions{flex-direction:column} .steps-grid{grid-template-columns:1fr} .about-stat-grid{grid-template-columns:1fr 1fr} } @media(max-width:480px){ .container{padding:0 18px} .hero-title{font-size:2.2rem} .section-title{font-size:1.8rem} .wa-float::before{display:none} }