:root{ --primary:#1D4ED8; --secondary:#22C55E; --accent:#F59E0B; --bg:#F8FAFC; --text:#0F172A; --primary-rgb:29,78,216; --secondary-rgb:34,197,94; --accent-rgb:245,158,11; --text-rgb:15,23,42; --white:#ffffff; --surface:#ffffff; --surface-2:#EFF6FF; --surface-3:#E2E8F0; --surface-tint:#F1F5F9; --border:rgba(15,23,42,.09); --border-strong:rgba(15,23,42,.16); --text-soft:rgba(15,23,42,.72); --text-muted:rgba(15,23,42,.56); --text-faint:rgba(15,23,42,.38); --shadow:0 20px 60px rgba(15,23,42,.08); --radius:22px; --radius-sm:12px; --container:min(1180px, calc(100% - 40px)); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#F8FAFC; color:var(--text); font-family:'Manrope','Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:relative; overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image: radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb),.9) 0 1px, transparent 1px), radial-gradient(circle at 80% 60%, rgba(var(--primary-rgb),.9) 0 1px, transparent 1px); background-size:28px 28px, 34px 34px; mix-blend-mode:multiply; } ::selection{background:rgba(var(--accent-rgb),.24);color:var(--text)} ::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:#E2E8F0} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--accent));border-radius:999px;border:3px solid #E2E8F0} a{color:inherit;text-decoration:none} p{margin:0 0 1rem;color:var(--text-soft);line-height:1.75} h1,h2,h3,h4{margin:0;font-family:'Plus Jakarta Sans','Helvetica Neue',sans-serif;letter-spacing:-.03em} img{max-width:100%} .container{width:var(--container);margin:0 auto;position:relative} .section{position:relative} .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--primary);margin-bottom:18px;position:relative;z-index:2 } .eyebrow::before{ content:"";width:28px;height:2px;border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--secondary)) } .section-title{ font-size:clamp(34px,5vw,66px); line-height:.98; position:relative; z-index:2; } .section-title .grad{ background:linear-gradient(135deg,var(--accent),var(--primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .section-intro{ max-width:650px; margin-top:18px; font-size:18px; color:var(--text-soft); position:relative; z-index:2; } .accent-bar{height:3px;width:100%;background:linear-gradient(90deg,var(--primary),var(--accent),var(--secondary))} .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;animation:float 9s ease-in-out infinite} .orb-1{width:420px;height:420px;background:radial-gradient(circle, rgba(var(--accent-rgb),.6), transparent 65%);top:-120px;right:-60px} .orb-2{width:320px;height:320px;background:radial-gradient(circle, rgba(var(--primary-rgb),.5), transparent 65%);bottom:-80px;left:200px;animation-delay:-3s} .orb-3{width:240px;height:240px;background:radial-gradient(circle, rgba(var(--secondary-rgb),.4), transparent 65%);top:20%;left:-60px;animation-delay:-5s} .bg-ring{position:absolute;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.18);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none} .bg-ring-1{width:420px;height:420px;opacity:.6} .bg-ring-2{width:620px;height:620px;opacity:.35} .bg-ring-3{width:820px;height:820px;opacity:.16} .dot-grid{ position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle, rgba(var(--text-rgb),.08) 1px, transparent 1.5px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); } .btn-primary,.btn-outline{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 28px;border-radius:14px;font-weight:800;font-size:16px; letter-spacing:.02em;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; position:relative;overflow:hidden } .btn-primary{ background:linear-gradient(135deg,var(--accent),var(--primary)); color:var(--bg); box-shadow:0 8px 32px rgba(var(--accent-rgb),.35); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(var(--accent-rgb),.5)} .btn-primary::after,.btn-outline::after{ content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); transform:translateX(-120%);transition:transform .6s ease } .btn-primary:hover::after,.btn-outline:hover::after{transform:translateX(120%)} .btn-outline{ color:var(--text); border:1.5px solid rgba(var(--text-rgb),.15); background:rgba(255,255,255,.7); backdrop-filter:blur(10px); } .btn-outline:hover{transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.45);color:var(--primary);box-shadow:var(--shadow)} .pulse-badge{ display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px; background:rgba(34,197,94,.12);color:#15803D;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase } .pulse-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:rgb(0,200,120);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}} @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-30px) scale(1.1)}66%{transform:translate(-15px,20px) scale(.95)}} @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}} @keyframes drawSig{to{stroke-dashoffset:0}} @keyframes glowShift{0%,100%{box-shadow:0 0 0 rgba(var(--primary-rgb),0)}50%{box-shadow:0 0 36px rgba(var(--primary-rgb),.2)}} .fade-up{animation:fadeUp .9s ease both} .delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}.delay-4{animation-delay:.32s}.delay-5{animation-delay:.4s} .nav-wrap{ width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:16px 0;position:relative } .brand{ display:flex;align-items:center;gap:14px;min-width:0 } .brand-mark{ width:48px;height:48px;border-radius:16px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:grid;place-items:center; box-shadow:0 10px 24px rgba(var(--primary-rgb),.22); position:relative;overflow:hidden } .brand-mark::before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.28);border-radius:13px} .brand-mark span{ color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.05em;position:relative;z-index:2 } .brand-text strong{display:block;font-size:16px;line-height:1.1} .brand-text small{display:block;font-family:'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:3px} nav{display:flex;align-items:center;gap:28px} nav a{ font-size:15px;font-weight:700;color:var(--text-soft);position:relative;padding:8px 0;transition:color .25s ease } nav a::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent)); transform:scaleX(0);transform-origin:left;transition:transform .25s ease } nav a:hover,nav a.active{color:var(--text)} nav a:hover::after,nav a.active::after{transform:scaleX(1)} .hero{ padding:42px 0 90px; position:relative; overflow:visible; } .hero::before{ content:"JN"; position:absolute;right:-10px;top:30px; font-size:min(20vw,260px);font-weight:800;line-height:1; color:transparent;-webkit-text-stroke:1px rgba(var(--primary-rgb),.08); pointer-events:none } .hero-grid{ display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;position:relative } .hero-copy{position:relative;z-index:3;padding:42px 0 0} .hero-copy h1{ font-size:clamp(52px,8vw,110px);line-height:.93;max-width:8.5ch } .hero-copy p{ font-size:19px;max-width:640px;margin-top:18px } .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} .hero-meta{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px;max-width:760px } .hero-stat{ background:rgba(255,255,255,.74);backdrop-filter:blur(10px);border:1px solid rgba(var(--text-rgb),.08); border-radius:18px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease } .hero-stat:hover{transform:translateY(-3px);border-color:rgba(var(--primary-rgb),.25);box-shadow:var(--shadow)} .hero-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),var(--accent))} .hero-stat strong{display:block;font-size:28px;font-family:'Plus Jakarta Sans',sans-serif;line-height:1} .hero-stat span{display:block;margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-family:'JetBrains Mono',monospace} .hero-visual{ position:relative;z-index:2;overflow:visible;padding:18px 0 18px 16px } .hero-frame{ position:relative;background:linear-gradient(180deg,#fff,rgba(255,255,255,.82)); border:1px solid rgba(var(--text-rgb),.08);border-radius:34px;padding:18px;box-shadow:var(--shadow) } .hero-frame::before{ content:"";position:absolute;inset:-1px;border-radius:34px;padding:1px; background:linear-gradient(135deg, rgba(var(--primary-rgb),.22), rgba(var(--accent-rgb),.28), rgba(var(--secondary-rgb),.2)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none } .hero-photo{ display:block;width:100%;height:auto;border-radius:24px;background:linear-gradient(180deg,var(--surface-2),#fff) } .float-card{ position:absolute;right:-16px;bottom:24px;z-index:3;width:min(280px,70%); background:var(--bg);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.12);animation:float 10s ease-in-out infinite } .float-card::before{ content:"";position:absolute;left:16px;top:0;width:54px;height:3px;background:linear-gradient(90deg,var(--secondary),var(--accent));border-radius:999px } .float-card-num{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:800;color:var(--accent);line-height:1} .float-card-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.55);margin-top:4px;font-family:'JetBrains Mono',monospace} .sig{display:block;margin-top:10px} .trust-band{ padding:22px 0 0;position:relative } .trust-scroller{ background:var(--text);color:#fff;border-radius:26px;padding:24px 28px; display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:18px;align-items:center; position:relative;overflow:hidden } .trust-scroller::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(var(--primary-rgb),.16), transparent 40%, rgba(var(--accent-rgb),.12))} .trust-intro,.trust-point{position:relative;z-index:2} .trust-intro strong{display:block;font-size:20px;color:#fff} .trust-intro p,.trust-point p{color:rgba(255,255,255,.72);margin:6px 0 0} .trust-point{ padding-left:18px;border-left:1px solid rgba(255,255,255,.14) } .trust-point span{ display:block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px } .services{ padding:110px 0 90px; position:relative } .services::after{ content:"01";position:absolute;right:4%;top:54px;font-size:min(20vw,230px);font-weight:800;line-height:1; color:transparent;-webkit-text-stroke:1px rgba(var(--text-rgb),.05) } .services-layout{ margin-top:40px;display:grid;grid-template-columns:1.15fr .85fr;gap:24px } .service-featured{ background:linear-gradient(180deg, rgba(var(--primary-rgb),.06), rgba(var(--accent-rgb),.08)); border:1px solid rgba(var(--text-rgb),.08);border-radius:30px;padding:28px;position:relative;overflow:hidden } .service-featured::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(var(--accent-rgb),.18), transparent 68%)} .service-featured::after{content:"";position:absolute;left:26px;bottom:24px;width:80px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--primary),transparent)} .service-featured svg{width:100%;height:auto;border-radius:22px;margin-bottom:20px;display:block} .service-featured h3{font-size:34px;line-height:1.05;margin-bottom:12px} .service-side{display:grid;grid-template-columns:1fr;gap:18px} .service-card{ background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:22px;position:relative;transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease } .service-card:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),.24);box-shadow:var(--shadow)} .service-card::before{content:"";position:absolute;left:22px;top:0;width:54px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--secondary))} .service-card h3{font-size:24px;margin:14px 0 10px} .service-icon{ width:54px;height:54px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(135deg, rgba(var(--primary-rgb),.08), rgba(var(--accent-rgb),.12)); transition:transform .25s ease, background .25s ease } .service-card:hover .service-icon{transform:scale(1.06);background:linear-gradient(135deg, rgba(var(--primary-rgb),.13), rgba(var(--accent-rgb),.18))} .service-icon svg{width:30px;height:30px} .editorial-showcase{ padding:40px 0 110px;position:relative } .editorial-grid{ display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:34px } .showcase-main,.showcase-stack article{ background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);position:relative;overflow:hidden } .showcase-main{padding:24px} .showcase-main::before,.showcase-stack article::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--secondary)) } .showcase-main svg,.showcase-stack article svg{ width:100%;height:auto;display:block;border-radius:20px;background:var(--surface-tint) } .showcase-main .meta,.showcase-stack .meta{ margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted) } .showcase-main h3,.showcase-stack h3{font-size:30px;line-height:1.05;margin:10px 0 10px} .showcase-stack{display:grid;gap:22px} .showcase-stack article{padding:18px;transition:transform .25s ease,border-color .25s ease} .showcase-stack article:hover,.showcase-main:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),.2)} .about{ padding:110px 0; background:linear-gradient(180deg, rgba(var(--primary-rgb),.045), rgba(var(--secondary-rgb),.045)); position:relative } .about::before{content:"02";position:absolute;left:2%;top:40px;font-size:min(18vw,220px);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(var(--primary-rgb),.08)} .about-grid{ display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center } .about-visual{position:relative;overflow:visible} .about-visual .panel{ background:var(--surface);border:1px solid rgba(var(--text-rgb),.08);border-radius:32px;padding:18px;box-shadow:var(--shadow);position:relative } .about-visual .panel::after{ content:"";position:absolute;right:18px;top:18px;width:62px;height:62px;border-radius:18px;border:1px solid rgba(var(--accent-rgb),.3) } .about-photo{display:block;width:100%;height:auto;border-radius:24px} .about-note{ position:absolute;left:-14px;bottom:34px;z-index:3; background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);max-width:260px } .about-note strong{display:block;font-size:28px;color:var(--primary);line-height:1} .about-note span{display:block;margin-top:6px;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)} .about-copy{position:relative;z-index:2} .about-copy ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px} .about-copy li{ background:rgba(255,255,255,.72);border:1px solid rgba(var(--text-rgb),.08);border-radius:18px;padding:16px 16px 16px 58px;position:relative } .about-copy li::before{ content:"";position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:50%; background:linear-gradient(135deg,var(--secondary),var(--primary)); box-shadow:0 0 0 6px rgba(var(--secondary-rgb),.12) } .stats{ padding:90px 0; position:relative } .stats-band{ background:linear-gradient(135deg,var(--primary),#14389a 60%, var(--text)); color:#fff;border-radius:34px;padding:34px;position:relative;overflow:hidden } .stats-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb),.24), transparent 32%)} .stats-grid{ display:grid;grid-template-columns:1fr 1.6fr !important;gap:16px;align-items:stretch;position:relative;z-index:2 } .stats-intro h2{font-size:40px;line-height:1} .stats-intro p{color:rgba(255,255,255,.8);margin-top:12px} .stat-card{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px;transition:background .25s ease,transform .25s ease } .stat-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)} .stat-card svg{width:28px;height:28px} .stat-card strong{display:block;margin-top:16px;font-size:34px;line-height:1;color:#fff} .stat-card span{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)} .sf-testimonial-section{ padding:110px 0 90px; position:relative } .sf-testimonial-section::after{ content:"03";position:absolute;right:2%;top:40px;font-size:min(18vw,220px);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(var(--text-rgb),.05) } .sf-testimonial-grid{ margin-top:34px;display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px } .sf-testimonial-item{ background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:26px;position:relative;box-shadow:var(--shadow); transition:transform .25s ease,border-color .25s ease,background .25s ease } .sf-testimonial-item:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.26);background:linear-gradient(180deg,#fff,rgba(var(--accent-rgb),.04))} .sf-testimonial-item::before{ content:"";position:absolute;top:0;left:26px;width:64px;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary));border-radius:999px } .sf-testimonial-stars{font-size:18px;letter-spacing:2px;color:var(--accent);margin-bottom:14px} .sf-testimonial-quote{font-size:20px;line-height:1.6;color:var(--text);margin:0 0 24px} .sf-testimonial-author{display:flex;align-items:center;gap:14px} .sf-testimonial-avatar{ width:56px;height:56px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg, rgba(var(--primary-rgb),.12), rgba(var(--accent-rgb),.14)) } .sf-testimonial-name{font-weight:800} .sf-testimonial-role{font-size:13px;color:var(--text-muted)} .sf-faq-section{ padding:90px 0 110px; position:relative } .faq-grid{ margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px } .sf-faq-item{ background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:0;overflow:hidden;transition:border-color .25s ease, box-shadow .25s ease } .sf-faq-item:hover{border-color:rgba(var(--primary-rgb),.24);box-shadow:var(--shadow)} .sf-faq-item summary{ list-style:none;cursor:pointer;padding:22px 24px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;position:relative } .sf-faq-item summary::-webkit-details-marker{display:none} .sf-faq-item summary::after{ content:"+";position:absolute;right:22px;top:18px;font-size:28px;color:var(--primary);transition:transform .25s ease,color .25s ease } .sf-faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent)} .sf-faq-item .faq-content{ padding:0 24px 22px;color:var(--text-soft) } .contact{ padding:0 0 110px; position:relative } .contact-wrap{ display:grid;grid-template-columns:.88fr 1.12fr;gap:24px;align-items:stretch } .contact-panel,.contact-form-panel{ background:var(--surface);border:1px solid var(--border);border-radius:30px;box-shadow:var(--shadow);position:relative } .contact-panel{padding:30px;overflow:hidden} .contact-panel::before{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(var(--secondary-rgb),.16), transparent 65%)} .contact-form-panel{padding:30px} .contact-list{display:grid;gap:16px;margin-top:22px} .contact-item{ background:var(--surface-tint);border:1px solid rgba(var(--text-rgb),.07);border-radius:18px;padding:16px 18px 16px 60px;position:relative } .contact-item::before{ content:"";position:absolute;left:18px;top:18px;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent)) } .contact-item strong{display:block;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px} .location-map{ width:100%;min-height:360px;margin-top:22px;border-radius:22px;border:1px solid rgba(var(--text-rgb),.08); background: linear-gradient(135deg, rgba(var(--primary-rgb),.06), rgba(var(--secondary-rgb),.08)), repeating-linear-gradient(0deg, transparent 0 28px, rgba(var(--text-rgb),.05) 28px 29px), repeating-linear-gradient(90deg, transparent 0 28px, rgba(var(--text-rgb),.05) 28px 29px); position:relative;overflow:hidden } .location-map::before{ content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;border-radius:50%; transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 0 10px rgba(var(--accent-rgb),.18), 0 0 0 22px rgba(var(--accent-rgb),.08) } .location-map::after{ content:"Tampa Bay, Florida";position:absolute;left:50%;top:calc(50% + 36px);transform:translateX(-50%); background:#fff;border:1px solid var(--border);padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap } .contact-form-wrapper form{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:grid;gap:8px} .field.full{grid-column:1/-1} label{font-weight:700;font-size:14px;color:var(--text)} input,textarea{ width:100%;border:1px solid rgba(var(--text-rgb),.12);background:#fff;color:var(--text); border-radius:14px;padding:15px 16px;font:inherit;outline:none;transition:border-color .25s ease, box-shadow .25s ease } input:focus,textarea:focus{border-color:rgba(var(--primary-rgb),.55);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12)} textarea{min-height:150px;resize:vertical} .footer-cta{ margin-top:20px;padding:26px 28px;border-radius:24px;background:linear-gradient(135deg, rgba(var(--primary-rgb),.08), rgba(var(--accent-rgb),.12)); border:1px solid rgba(var(--text-rgb),.08) } footer{ background:var(--text);color:#fff;position:relative;overflow:hidden } footer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%, rgba(var(--primary-rgb),.22), transparent 35%), radial-gradient(circle at 90% 100%, rgba(var(--accent-rgb),.18), transparent 30%)} .footer-grid{ width:var(--container);margin:0 auto;padding:76px 0 28px; display:grid;grid-template-columns:1.2fr .8fr .8fr .9fr;gap:28px;position:relative;z-index:2 } .footer-brand p{color:rgba(255,255,255,.72);max-width:380px} .footer-col h4{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:14px;color:rgba(255,255,255,.78)} .footer-col a{ display:inline-block;color:rgba(255,255,255,.72);margin:8px 0;position:relative;transition:color .25s ease, transform .25s ease } .footer-col a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .footer-col a:hover{color:#fff;transform:translateX(2px)} .footer-col a:hover::after{transform:scaleX(1)} .footer-bottom{ width:var(--container);margin:0 auto;padding:0 0 24px;position:relative;z-index:2; display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:20px } .footer-bottom p{margin:0;color:rgba(255,255,255,.62);font-size:14px} .phone-link:hover,.address-link:hover{color:var(--primary)} @media (max-width:1024px){ .hero-grid,.services-layout,.editorial-grid,.about-grid,.contact-wrap,.stats-grid,.footer-grid,.trust-scroller,.sf-testimonial-grid{grid-template-columns:1fr} .hero-meta{grid-template-columns:repeat(3,1fr)} nav{gap:18px;flex-wrap:wrap;justify-content:flex-end} .trust-point{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:16px} .stats-intro{margin-bottom:10px} .footer-grid{padding-bottom:20px} } @media (max-width:768px){ .nav-wrap{flex-wrap:wrap} nav{width:100%;justify-content:flex-start;gap:16px} .hero{padding-top:26px} .hero-grid{grid-template-columns:1fr} .hero-copy{order:1} .hero-visual{order:2;padding-left:0} .hero-meta{grid-template-columns:1fr} .contact-form-wrapper form,.faq-grid{grid-template-columns:1fr} .float-card{right:10px;bottom:-12px;width:min(240px,78%)} .about-note{position:relative;left:auto;bottom:auto;margin-top:16px} .section-title{font-size:clamp(32px,9vw,54px)} .hero-copy h1{font-size:clamp(46px,13vw,76px)} .trust-scroller,.stats-band,.contact-panel,.contact-form-panel,.service-featured,.showcase-main,.sf-testimonial-item{border-radius:24px} .footer-bottom{flex-direction:column;align-items:flex-start} } /* sf-form-color-reset */ .contact-form-wrapper { color: var(--text, #111); } .contact-form-wrapper input::placeholder, .contact-form-wrapper textarea::placeholder { color: var(--muted, #6b7280); } .panel-dark .contact-form-wrapper, .section.dark .contact-form-wrapper, .section-dark .contact-form-wrapper, .dark .contact-form-wrapper, .bg-dark .contact-form-wrapper, .bg-black .contact-form-wrapper, [class*="panel-dark"] .contact-form-wrapper { color: var(--text-on-dark, #f0f0f0); } .ba-comparison-wrap { display: grid; gap: 1.5rem; margin-top: 2rem; width: 100%;} .ba-col { position: relative; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; height: 100%;} .ba-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 4px 18px rgba(0,0,0,0.10); min-height: 180px; max-height: none; flex: 1;} .ba-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; width: fit-content;} .ba-label--before { background: rgba(180,60,60,0.12); color: #a33;} .ba-label--after { background: rgba(60,130,80,0.12); color: #2a6b3c;} .ba-comparison-wrap { grid-template-columns: 1fr 1fr !important; height: 100%; align-content: stretch;} /* Mobile overflow guard — kills horizontal scroll on narrow viewports. overflow-x:clip is stricter than overflow-x:hidden and cannot be subverted by descendant sticky/fixed ancestors establishing scroll containers. */ html { overflow-x: clip !important; max-width: 100vw !important; } body { overflow-x: clip !important; max-width: 100vw !important; } /* Fallback for browsers without overflow-x: clip support. */ @supports not (overflow-x: clip) { html, body { overflow-x: hidden !important; } } /* Decorative shapes commonly extend past viewport on mobile. Their parent contexts (.hero / .hero-bg / sections with shape backgrounds) should clip — visual loses nothing on mobile, mobile gains a usable layout. */ .hero, .hero-bg, .hero-visual, [class*="hero-section"], section [class*="decorative"], section [class*="float-shape"], section [class*="abstract-bg"] { overflow-x: clip !important; } @supports not (overflow-x: clip) { .hero, .hero-bg, .hero-visual, [class*="hero-section"], section [class*="decorative"], section [class*="float-shape"], section [class*="abstract-bg"] { overflow-x: hidden !important; } } /* Force card-grid stacking on narrow viewports so portfolio/blog/ product/team grids don't extend past the viewport horizontally. */ @media (max-width: 600px) { .sf-portfolio-grid, .sf-blog-grid, .sf-products-grid, .sf-team-grid, [class*="portfolio-grid"], [class*="blog-grid"], [class*="products-grid"], [class*="team-grid"] { grid-template-columns: 1fr !important; } } /* Hamburger toggle — sf-ui.js APPENDS a fully-independent