/* * CaseMate — casemate.pk * * The whole front end, hand-written, loaded directly. No build step on * purpose: no Vite, no Tailwind, no npm at runtime. Cache-busting is * `?v={filemtime}` on the . * * Navy #0B1B45 with a blue-to-violet accent, light and dark, switched by * `data-theme` on and falling back to the device setting. * * Card accents come from the `hue()` helper in app/helpers.php, which sets * --cg, --cshadow and --cvar inline — which is why so many rules read from * those three variables instead of naming a colour. * * It holds rules for the components this site actually renders, and nothing * else. If you add a section, give it a heading; if you remove one, take its * rules with you. */ :root{ --bg:#FFFFFF; --bg-alt:#F5F8FE; --surface:#FFFFFF; --navy:#0B1B45; --navy-2:#141F5C; --ink:#0F1B36; --ink-2:#4A5878; --muted:#8090AD; --line:#E6EBF5; --line-2:#D6DEEE; /* accent hues */ --blue:#2E6BFF; --blue-d:#1E4FD1; --violet:#7A4DFF; --cyan:#0FA9CC; --emerald:#0FA672; --amber:#EA9A1F; --rose:#E5468A; /* gradients */ --grad-brand:linear-gradient(120deg,#2E6BFF 0%,#7A4DFF 100%); --grad-brand-soft:linear-gradient(120deg,#2E6BFF 0%,#6A8BFF 55%,#7A4DFF 100%); --g-blue:linear-gradient(135deg,#4C86FF,#2E6BFF); --g-violet:linear-gradient(135deg,#9B6BFF,#6A38F0); --g-cyan:linear-gradient(135deg,#2AD0EA,#0B93B8); --g-emerald:linear-gradient(135deg,#2BD69C,#079466); --g-amber:linear-gradient(135deg,#FCC24B,#E08414); --g-rose:linear-gradient(135deg,#F779B0,#DB3179); --tint-blue:#EAF1FF; --tint-violet:#F0EBFF; --tint-cyan:#E4F7FB; --tint-emerald:#E2F6EE; --tint-amber:#FDF2DD; --tint-rose:#FCEAF3; --gold:#C9922E; --shadow-sm:0 1px 2px rgba(15,27,54,.06), 0 4px 12px rgba(15,27,54,.05); --shadow:0 2px 8px rgba(15,27,54,.07), 0 20px 44px -20px rgba(46,107,255,.24); --shadow-l:0 6px 14px rgba(15,27,54,.1), 0 44px 80px -30px rgba(46,107,255,.34); --radius:16px; --maxw:1200px; --disp:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --body:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace; } @media (prefers-color-scheme:dark){ :root{ --bg:#070E22; --bg-alt:#0B142E; --surface:#0E1938; --navy:#0A1436; --navy-2:#111C46; --ink:#EAF0FB; --ink-2:#AEBCD8; --muted:#7C8CAC; --line:#1A264A; --line-2:#243361; --blue:#5B8CFF; --blue-d:#7AA0FF; --violet:#9B7BFF; --cyan:#39C6E4; --emerald:#2BD69C; --amber:#F2B441; --rose:#F06BA6; --tint-blue:#122145; --tint-violet:#1C1A4A; --tint-cyan:#0E2E3A; --tint-emerald:#0D2E28; --tint-amber:#2E2413; --tint-rose:#2E1728; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45), 0 20px 44px -20px rgba(0,0,0,.6); --shadow-l:0 6px 14px rgba(0,0,0,.5), 0 44px 80px -28px rgba(0,0,0,.72); } } :root[data-theme="light"]{ --bg:#FFFFFF; --bg-alt:#F5F8FE; --surface:#FFFFFF; --navy:#0B1B45; --navy-2:#141F5C; --ink:#0F1B36; --ink-2:#4A5878; --muted:#8090AD; --line:#E6EBF5; --line-2:#D6DEEE; --blue:#2E6BFF; --blue-d:#1E4FD1; --violet:#7A4DFF; --cyan:#0FA9CC; --emerald:#0FA672; --amber:#EA9A1F; --rose:#E5468A; --tint-blue:#EAF1FF; --tint-violet:#F0EBFF; --tint-cyan:#E4F7FB; --tint-emerald:#E2F6EE; --tint-amber:#FDF2DD; --tint-rose:#FCEAF3; --shadow-sm:0 1px 2px rgba(15,27,54,.06),0 4px 12px rgba(15,27,54,.05); --shadow:0 2px 8px rgba(15,27,54,.07),0 20px 44px -20px rgba(46,107,255,.24); --shadow-l:0 6px 14px rgba(15,27,54,.1),0 44px 80px -30px rgba(46,107,255,.34); } :root[data-theme="dark"]{ --bg:#070E22; --bg-alt:#0B142E; --surface:#0E1938; --navy:#0A1436; --navy-2:#111C46; --ink:#EAF0FB; --ink-2:#AEBCD8; --muted:#7C8CAC; --line:#1A264A; --line-2:#243361; --blue:#5B8CFF; --blue-d:#7AA0FF; --violet:#9B7BFF; --cyan:#39C6E4; --emerald:#2BD69C; --amber:#F2B441; --rose:#F06BA6; --tint-blue:#122145; --tint-violet:#1C1A4A; --tint-cyan:#0E2E3A; --tint-emerald:#0D2E28; --tint-amber:#2E2413; --tint-rose:#2E1728; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45),0 20px 44px -20px rgba(0,0,0,.6); --shadow-l:0 6px 14px rgba(0,0,0,.5),0 44px 80px -28px rgba(0,0,0,.72); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:0; } p{ margin:0; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } .tnum{ font-variant-numeric:tabular-nums; } .gtext{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--disp); font-weight:560; font-size:15px; padding:13px 24px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:filter .15s, box-shadow .15s, transform .15s, border-color .15s, background .15s; white-space:nowrap; } .btn svg{ width:16px; height:16px; } .btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px -6px rgba(46,107,255,.5); } .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(46,107,255,.55); } .btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-2); } .btn-outline:hover{ border-color:var(--blue); color:var(--blue); } .btn-onnavy{ background:#fff; color:var(--navy); } .btn-onnavy:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.5); } .btn-ghost-navy{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); } .btn-ghost-navy:hover{ background:rgba(255,255,255,.2); } /* UTILITY BAR */ .util{ background:var(--navy); color:rgba(255,255,255,.95); font-size:13px; font-weight:600; position:relative; overflow:hidden; } .util::before{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.16; } .util-in{ position:relative; display:flex; align-items:center; justify-content:space-between; height:40px; } .util a{ color:rgba(255,255,255,.95); } .util .l{ display:flex; gap:24px; align-items:center; } .util .l span{ display:inline-flex; align-items:center; gap:7px; } .util .l svg{ width:14px; height:14px; opacity:.85; } .util .r{ display:flex; gap:20px; align-items:center; } .util .r a:hover{ color:#fff; } @media (max-width:760px){ .util .l span.addr{ display:none; } } @media (max-width:600px){ .util .r{ display:none; } .util .l span:not(:first-child){ display:none; } .util-in{ justify-content:center; } } /* NAV */ header.nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:saturate(1.7) blur(18px); box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(15,27,54,.6); } header.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad-brand); opacity:.55; } .nav-in{ display:flex; align-items:center; justify-content:space-between; height:78px; } .brand{ display:flex; align-items:center; gap:12px; font-family:var(--disp); color:var(--ink); } .nav-links{ display:flex; gap:32px; font-size:15px; font-weight:540; } .nav-links a{ position:relative; color:var(--ink); padding:6px 0; transition:color .15s; } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } .nav-links a:hover, .nav-links a.active{ color:var(--blue); } .nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); } .nav-actions{ display:flex; align-items:center; gap:12px; } .theme-btn{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line-2); background:var(--bg-alt); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:border-color .15s, color .15s; } .theme-btn:hover{ border-color:var(--blue); color:var(--blue); } .theme-btn svg{ width:17px; height:17px; } .nav-login{ font-size:15px; font-weight:560; color:var(--ink); } .nav-login:hover{ color:var(--blue); } .hamburger{ display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:var(--bg-alt); cursor:pointer; align-items:center; justify-content:center; color:var(--ink); } .hamburger svg{ width:22px; height:22px; } .mobile-menu{ display:none; } @media (max-width:940px){ .nav-links,.nav-login{ display:none; } .nav-actions .btn-primary{ display:none; } /* Start free moves into the menu */ .hamburger{ display:inline-grid; place-items:center; } .mobile-menu{ position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 24px 44px -18px rgba(15,27,54,.35); padding:14px 26px 20px; flex-direction:column; gap:2px; z-index:59; } .mobile-menu.open{ display:flex; } .mobile-menu a{ padding:13px 12px; border-radius:10px; font-size:16px; font-weight:560; color:var(--ink); font-family:var(--disp); } .mobile-menu a:hover, .mobile-menu a.active{ background:var(--bg-alt); color:var(--blue); } .mobile-menu .mm-login{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; } .mobile-menu .btn-primary{ color:#fff; justify-content:center; margin-top:8px; } } /* HERO */ .hero{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(60% 55% at 12% 8%, rgba(46,107,255,.55), transparent 60%), radial-gradient(55% 60% at 88% 12%, rgba(122,77,255,.5), transparent 58%), radial-gradient(50% 60% at 70% 100%, rgba(15,169,204,.42), transparent 60%), linear-gradient(135deg,#0B1B45 0%,#14205C 55%,#1A1E5E 100%); } .hero::before{ content:""; position:absolute; inset:0; opacity:.4; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(120% 90% at 30% 0%,#000,transparent 72%); } .hero-in{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; padding-block:52px 58px; } .slider{ position:relative; min-height:352px; } .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; pointer-events:none; } .slide.active{ opacity:1; visibility:visible; transition:opacity .55s ease .2s, visibility 0s; pointer-events:auto; position:relative; } .s-tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(120deg,rgba(46,107,255,.34),rgba(122,77,255,.34)); border:1px solid rgba(255,255,255,.22); padding:7px 14px; border-radius:100px; } .s-tag .dot{ width:7px; height:7px; border-radius:50%; background:#8FE0C0; box-shadow:0 0 0 3px rgba(143,224,192,.28); } .slide h1, .slide h2{ font-size:clamp(34px,4.4vw,54px); margin-top:22px; color:#fff; letter-spacing:-.03em; font-weight:700; } .slide h1 .u, .slide h2 .u{ background:linear-gradient(100deg,#8FC2FF,#B69BFF,#7FE3EC); -webkit-background-clip:text; background-clip:text; color:transparent; } .slide p{ font-size:18.5px; color:rgba(233,240,248,.84); margin-top:20px; max-width:44ch; } .hero-cta{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; } .s-top{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; } .s-top .hero-trust{ margin-top:0; } .hero-trust{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; } .hero-trust span{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:rgba(233,240,248,.82); } .hero-trust svg{ width:17px; height:17px; color:#7FE3B0; } @media (max-width:940px){ .hero-in{ grid-template-columns:1fr; gap:44px; padding-block:48px 60px; } .slider{ min-height:0; } } /* HIGHLIGHTS */ .highlights{ background:linear-gradient(180deg,var(--bg),var(--bg-alt)); border-bottom:1px solid var(--line); } .hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-block:28px; } .hl{ position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; } .hl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cg); } .hl:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -20px var(--cshadow); border-color:transparent; } .hl .hi{ width:44px; height:44px; border-radius:11px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 9px 18px -7px var(--cshadow); } .hl .hi svg{ width:22px; height:22px; } .hl .ht{ font-family:var(--disp); font-weight:620; font-size:15.5px; letter-spacing:-.01em; } .hl .hs{ font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.4; } @media (max-width:900px){ .hl-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .hl-grid{ grid-template-columns:1fr; } } /* SECTION */ section.blk{ padding:28px 0; position:relative; } .sec-head{ max-width:660px; } .sec-head.center{ margin:0 auto; text-align:center; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--grad-brand); } .sec-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; } .sec-head p{ color:var(--ink-2); font-size:18px; margin-top:15px; } /* FEATURES — colourful cards */ .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; } .feat{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; overflow:hidden; transition:box-shadow .2s, transform .2s, border-color .2s; } .feat::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cg); } .feat::after{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-60px; top:-70px; background:var(--cg); opacity:.09; transition:opacity .2s, transform .2s; } .feat:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -20px var(--cshadow); border-color:transparent; } .feat:hover::after{ opacity:.16; transform:scale(1.15); } .feat .fic{ width:54px; height:54px; border-radius:14px; background:var(--cg); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 10px 22px -8px var(--cshadow); position:relative; } .feat .fic svg{ width:26px; height:26px; } .feat h3{ font-size:19.5px; position:relative; } .feat p{ color:var(--ink-2); font-size:15px; margin-top:9px; position:relative; } .feat .more{ font-size:14px; font-weight:600; margin-top:15px; display:inline-flex; align-items:center; gap:6px; position:relative; cursor:pointer; background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; transition:gap .15s; } .feat .more:hover{ gap:10px; } .feat .more svg{ width:14px; height:14px; color:var(--cvar); } @media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .feat-grid{ grid-template-columns:1fr; } } /* VALUE */ .value{ background:linear-gradient(180deg,var(--bg-alt),var(--bg)); border-top:1px solid var(--line); } .value-in{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; } .vlist{ display:flex; flex-direction:column; gap:20px; margin-top:26px; } .vitem{ display:flex; gap:16px; } .vitem .vi{ width:46px; height:46px; border-radius:12px; color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px -8px var(--cshadow); background:var(--cg); } .vitem .vi svg{ width:23px; height:23px; } .vitem h4, .vitem h3{ font-size:17px; } .vitem p{ color:var(--ink-2); font-size:14.5px; margin-top:5px; } .value-panel{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; } .vp-head{ background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; padding:20px 22px; font-family:var(--disp); font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:space-between; position:relative; } .vp-head::after{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.24; } .vp-head span, .vp-head .st{ position:relative; z-index:1; } .vp-head .st{ font-family:var(--mono); font-size:11px; color:#8FE0C0; background:rgba(43,196,141,.2); padding:5px 10px; border-radius:6px; } .vp-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid var(--line); font-size:14.5px; } .vp-row:last-child{ border-bottom:none; } .vp-row .k{ color:var(--ink-2); display:flex; align-items:center; gap:11px; } .vp-row .k .d{ width:22px; height:22px; border-radius:7px; background:var(--g-emerald); display:grid; place-items:center; } .vp-row .k .d svg{ width:12px; height:12px; color:#fff; } .vp-row .v{ font-family:var(--mono); font-weight:600; color:var(--emerald); } @media (max-width:860px){ .value-in{ grid-template-columns:1fr; gap:40px; } } /* PROCESS */ .proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px; } .pcol{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; overflow:hidden; } .pcol::before{ content:""; position:absolute; top:0; left:0; width:4px; bottom:0; background:var(--cg); } .pcol .pn{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; } .pcol .pi{ width:48px; height:48px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; margin:14px 0 16px; box-shadow:0 10px 20px -8px var(--cshadow); } .pcol .pi svg{ width:24px; height:24px; } .pcol h4, .pcol h3{ font-size:17px; } .pcol p{ color:var(--ink-2); font-size:14px; margin-top:8px; } @media (max-width:860px){ .proc{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .proc{ grid-template-columns:1fr; } } /* COMPLIANCE BAND */ .band{ color:#fff; border-radius:24px; padding:42px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden; background:radial-gradient(70% 120% at 10% 10%, rgba(46,107,255,.6), transparent 55%), radial-gradient(80% 120% at 100% 90%, rgba(122,77,255,.55), transparent 55%), linear-gradient(130deg,#0B1B45,#141F5C); } .band::after{ content:""; position:absolute; inset:0; opacity:.35; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(90% 90% at 80% 20%,#000,transparent 70%); } .band > *{ position:relative; z-index:1; } .band h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); } .band p{ color:rgba(233,240,248,.84); font-size:17px; margin-top:16px; } .band .badges{ display:flex; flex-direction:column; gap:14px; } .band .bd{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:16px 18px; backdrop-filter:blur(4px); } .band .bd .bi{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; color:#fff; background:var(--cg); box-shadow:0 8px 18px -7px rgba(0,0,0,.5); } .band .bd .bi svg{ width:21px; height:21px; } .band .bd .bt{ font-family:var(--disp); font-weight:600; font-size:15px; } .band .bd .bs{ font-size:12.5px; color:rgba(233,240,248,.65); } @media (max-width:760px){ .band{ grid-template-columns:1fr; padding:36px 28px; } } @keyframes marqL{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } } @keyframes marqR{ from{ transform:translateX(calc(-50% - 8px)); } to{ transform:translateX(0); } } /* CTA */ .cta{ position:relative; text-align:center; border-radius:24px; padding:48px 40px; overflow:hidden; color:#fff; background:radial-gradient(60% 120% at 15% 15%, rgba(46,107,255,.7), transparent 55%), radial-gradient(60% 120% at 85% 85%, rgba(122,77,255,.65), transparent 55%), linear-gradient(130deg,#12205A,#1A1E5E); } .cta::after{ content:""; position:absolute; inset:0; opacity:.3; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(90% 90% at 50% 0%,#000,transparent 72%); } .cta > *{ position:relative; z-index:1; } .cta h2{ color:#fff; font-size:clamp(28px,3.6vw,44px); } .cta p{ color:rgba(233,240,248,.82); font-size:18px; margin-top:14px; max-width:46ch; margin-inline:auto; } .cta .hero-cta{ justify-content:center; margin-top:28px; } /* FOOTER */ footer{ color:rgba(233,240,248,.9); padding:44px 0 26px; margin-top:0; position:relative; overflow:hidden; background:linear-gradient(180deg,#0B1B45,#0A1436); } footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-brand); } .foot-grid{ position:relative; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:40px; } .foot-brand .brand{ color:#fff; } .foot-brand .brand .mark{ box-shadow:none; } .foot-brand .brand em{ background:linear-gradient(120deg,#8FC2FF,#B69BFF); -webkit-background-clip:text; background-clip:text; color:transparent; } .foot-brand p{ font-size:14px; margin-top:16px; max-width:30ch; color:rgba(233,240,248,.82); } .foot-col h4, .foot-col .foot-h{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,240,248,.72); margin-bottom:15px; } .foot-col a{ display:block; color:rgba(233,240,248,.9); font-size:14px; padding:6px 0; } .foot-col a:hover{ color:#fff; } .crow{ display:flex; align-items:center; gap:11px; font-size:14px; color:rgba(233,240,248,.9); padding:6px 0; } .crow svg{ width:16px; height:16px; opacity:.75; flex-shrink:0; } .foot-bot{ position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.92); flex-wrap:wrap; gap:12px; } @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } } /* PAGE HERO */ .page-hero{ position:relative; overflow:hidden; color:#fff; padding:48px 0 44px; background:radial-gradient(62% 120% at 8% 0%, rgba(46,107,255,.55), transparent 55%), radial-gradient(60% 120% at 94% 30%, rgba(122,77,255,.5), transparent 55%), radial-gradient(50% 120% at 60% 100%, rgba(15,169,204,.4), transparent 60%), linear-gradient(130deg,#0B1B45,#141F5C); } .page-hero::before{ content:""; position:absolute; inset:0; opacity:.4; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(120% 90% at 30% 0%,#000,transparent 72%); } .ph-in{ position:relative; z-index:1; text-align:center; max-width:760px; margin:0 auto; } .ph-crumb{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,240,248,.55); } .ph-crumb b{ color:#8FC2FF; font-weight:600; } .page-hero h1{ font-size:clamp(34px,4.6vw,54px); margin-top:16px; color:#fff; letter-spacing:-.03em; } .page-hero h1 .u{ background:linear-gradient(100deg,#8FC2FF,#B69BFF,#7FE3EC); -webkit-background-clip:text; background-clip:text; color:transparent; } .page-hero p{ font-size:19px; color:rgba(233,240,248,.82); margin-top:18px; } /* FEATURE ROWS */ .frow{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:48px 0; border-bottom:1px solid var(--line); } .frow:last-of-type{ border-bottom:none; } .frow.rev .ftext{ order:2; } .ftext h2{ font-size:clamp(25px,2.9vw,34px); margin-top:14px; } .ftext > p{ color:var(--ink-2); font-size:16.5px; margin-top:14px; } .fbul{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:13px; } .fbul li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); } .fbul li .ck{ width:23px; height:23px; border-radius:7px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; margin-top:1px; box-shadow:0 6px 12px -5px var(--cshadow); } .fbul li .ck svg{ width:13px; height:13px; } .fvisual{ position:relative; border-radius:20px; padding:30px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:linear-gradient(160deg, color-mix(in srgb, var(--cvar) 10%, var(--surface)), var(--surface)); } .fvisual::after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; top:-80px; background:var(--cg); opacity:.12; } .fv-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; } .fv-top{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); } .fv-top .ic{ width:38px; height:38px; border-radius:10px; background:var(--cg); color:#fff; display:grid; place-items:center; box-shadow:0 8px 16px -6px var(--cshadow); } .fv-top .ic svg{ width:19px; height:19px; } .fv-top .tt{ font-family:var(--disp); font-weight:620; font-size:14.5px; } .fv-top .ss{ font-size:11.5px; color:var(--muted); } .fv-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2); } .fv-row:last-child{ border-bottom:none; } .fv-row .mono{ font-family:var(--mono); font-weight:600; color:var(--ink); } .fv-row .pill{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:100px; background:var(--tint-emerald); color:var(--emerald); font-weight:600; } @media (max-width:840px){ .frow{ grid-template-columns:1fr; gap:30px; padding:48px 0; } .frow.rev .ftext{ order:0; } } /* PRICING */ .pricing-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:stretch; } .ptable-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); } .ptable{ width:100%; border-collapse:collapse; } .ptable th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:22px 26px 12px; } .ptable th:last-child{ text-align:right; } .ptable td{ padding:18px 26px; border-top:1px solid var(--line); font-size:16px; } .ptable td:last-child{ text-align:right; font-family:var(--mono); font-weight:600; } .ptable tr.best td{ background:var(--tint-blue); } .ptable .tier{ font-weight:600; display:flex; align-items:center; gap:10px; } .ptable .amt b{ font-family:var(--disp); font-size:20px; } .ptable .amt .rs{ color:var(--muted); font-size:13px; } .best-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grad-brand); padding:3px 9px; border-radius:6px; } .pwork{ background:linear-gradient(155deg,var(--navy),var(--navy-2)); border-radius:20px; padding:30px; color:#fff; position:relative; overflow:hidden; } .pwork::after{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.16; pointer-events:none; } .pwork > *{ position:relative; z-index:1; } .pwork h3{ color:#fff; font-size:20px; } .pwork ul{ list-style:none; padding:0; margin:20px 0; display:flex; flex-direction:column; gap:15px; } .pwork li{ display:flex; gap:12px; font-size:14.5px; color:rgba(233,240,248,.95); } .pwork li b{ color:#fff; } .pwork li .ci{ width:26px; height:26px; border-radius:8px; background:rgba(43,196,141,.22); color:#8FE0C0; display:grid; place-items:center; flex-shrink:0; } .pwork li .ci svg{ width:14px; height:14px; } @media (max-width:820px){ .pricing-wrap{ grid-template-columns:1fr; } } .pwork-wide{ margin-top:22px; } .pwork-wide h3{ margin-bottom:18px; } .pwork-wide .pwork-inner{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; } .pwork-wide .pwork-inner ul{ flex:1; min-width:280px; display:grid; grid-template-columns:1fr; gap:14px; margin:0; } .pwork-wide .pwork-inner .btn{ flex-shrink:0; } @media (max-width:760px){ .pwork-wide .pwork-inner{ flex-direction:column; align-items:stretch; } .pwork-wide .pwork-inner ul{ grid-template-columns:1fr; } } /* FAQ */ .faq-list{ max-width:800px; margin:30px auto 0; display:flex; flex-direction:column; gap:12px; } .faq{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--disp); font-weight:600; font-size:16.5px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .faq summary::-webkit-details-marker{ display:none; } .faq summary .pl{ width:26px; height:26px; border-radius:8px; background:var(--tint-blue); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; } .faq[open] summary .pl{ transform:rotate(45deg); } .faq summary .pl svg{ width:14px; height:14px; } .faq .a{ padding:0 24px 20px; color:var(--ink-2); font-size:15px; } /* CONTACT */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; } .cform{ background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:34px; } .cform h3{ font-size:22px; } .cform .sub{ color:var(--ink-2); font-size:14.5px; margin-top:8px; margin-bottom:22px; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:13.5px; font-weight:560; color:var(--ink-2); margin-bottom:7px; } .field input, .field textarea{ width:100%; border:1px solid var(--line-2); border-radius:11px; padding:13px 14px; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--bg); outline:none; transition:border-color .15s, box-shadow .15s; } .field input:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--tint-blue); } .field.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; } .field.two .field{ margin:0; } .cinfo{ display:flex; flex-direction:column; gap:16px; } .cinfo-card{ display:flex; gap:15px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; } .cinfo-card .ci{ width:46px; height:46px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px -8px var(--cshadow); } .cinfo-card .ci svg{ width:22px; height:22px; } .cinfo-card .cl{ font-size:12.5px; color:var(--muted); } .cinfo-card .cv{ font-family:var(--disp); font-weight:600; font-size:15.5px; margin-top:3px; } .form-ok{ display:none; background:var(--tint-emerald); border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent); color:var(--emerald-d,var(--emerald)); border-radius:12px; padding:14px 16px; font-size:14.5px; font-weight:560; margin-bottom:18px; } .form-ok.show{ display:flex; gap:10px; align-items:center; } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:30px; } } /* SEO FAQ */ .faq-seo{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:28px; border-bottom:1px solid var(--line); } .fq{ border-top:1px solid var(--line); } .fq summary{ list-style:none; cursor:pointer; padding:12px 2px; font-family:var(--disp); font-weight:600; font-size:14.5px; line-height:1.35; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:14px; } .fq summary::-webkit-details-marker{ display:none; } .fq summary .pm{ width:21px; height:21px; border-radius:6px; background:var(--tint-blue); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; } .fq[open] summary .pm{ transform:rotate(45deg); } .fq summary .pm svg{ width:12px; height:12px; } .fq .a{ padding:0 2px 13px; font-size:13.5px; color:var(--ink-2); line-height:1.5; } @media (max-width:760px){ .faq-seo{ grid-template-columns:1fr; gap:0; } } /* footer social + whatsapp float */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.6); transition:transform .18s; } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:32px; height:32px; color:#fff; } @media (prefers-reduced-motion:no-preference){ .wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:waPulse 2.4s infinite; } } @keyframes waPulse{ 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } } .foot-bot a{ color:inherit; text-decoration:underline; text-underline-offset:3px; } .foot-bot a:hover{ color:#fff; } /* LEGAL / PRIVACY */ .legal{ max-width:820px; margin:0 auto; } .legal .updated{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--blue); background:var(--tint-blue); padding:7px 13px; border-radius:100px; margin-bottom:26px; } .legal .lead{ font-size:17px; color:var(--ink-2); margin-bottom:8px; } .legal h2{ font-size:20px; margin:32px 0 12px; scroll-margin-top:90px; } .legal h2 .n{ color:var(--blue); font-family:var(--mono); font-size:14px; margin-right:8px; } .legal p{ color:var(--ink-2); margin-bottom:14px; font-size:15.5px; line-height:1.7; } .legal strong{ color:var(--ink); font-weight:600; } .legal a{ color:var(--blue); } .legal ul{ color:var(--ink-2); margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .legal ul li{ position:relative; padding-left:24px; line-height:1.6; font-size:15.5px; } .legal ul li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--grad-brand); } .legal .note{ border-left:4px solid var(--blue); background:var(--tint-blue); border-radius:0 12px 12px 0; padding:16px 18px; font-size:14.5px; color:var(--ink-2); margin:22px 0; } :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:5px; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto; } } /* SKIP LINK, BRAND MARK, SHARED PIECES */ .skip-link{ position:absolute; left:-9999px; } .skip-link:focus{ left:12px; top:12px; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; } .brand-mark{ width:38px; height:38px; border-radius:11px; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:15px; flex-shrink:0; } .brand-text{ line-height:1.15; } .brand-name{ display:block; font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.02em; } .brand-tag{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .ph-crumb a:hover{ color:#fff; } [x-cloak]{ display:none !important; } .cinfo-card .cv a:hover{ color:var(--blue); } /* ===== Lock hero height: stack all slides in one grid cell so the tallest slide sets the height and rotating never shifts the page ===== */ .slider{ display:grid; grid-template-rows:1fr auto; align-content:start; min-height:0; } .slide{ grid-column:1; grid-row:1; position:relative; inset:auto; } .slide.active{ position:relative; } /* FAQ jump list */ .faq-index{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; } .faq-index a{ position:relative; display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; overflow:hidden; transition:transform .15s, box-shadow .15s, border-color .15s; } .faq-index a::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cg); } .faq-index a:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px var(--cshadow); border-color:transparent; } .faq-index .fi-n{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; } .faq-index .fi-t{ flex:1; font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:-.01em; line-height:1.3; } .faq-index .fi-c{ font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--bg-alt); border-radius:100px; padding:3px 9px; flex-shrink:0; } section.blk[id]{ scroll-margin-top:96px; } @media (max-width:900px){ .faq-index{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .faq-index{ grid-template-columns:1fr; } } /* ===== WCAG AA contrast corrections ===== The ported palette failed AA on three light-background pairings: muted 3.23:1, emerald-on-tint 2.78:1, amber-on-tint 2.07:1 (4.5:1 required). These override the tokens for light surfaces only; the dark-mode block in :root already ships lighter variants that pass. */ @media (prefers-color-scheme: light){ :root { --muted: #616F87; /* 5.08:1 on white, 4.78:1 on the tinted band */ --emerald: #097A54; /* 4.75:1 on --tint-emerald */ --amber: #8A5600; /* 5.55:1 on --tint-amber */ } } /* Manual light toggle needs the same treatment. Dark mode keeps its own lighter variants, which already pass against the dark surfaces. */ :root[data-theme="light"] { --muted: #616F87; --emerald: #097A54; --amber: #8A5600; } /* ===== Tap target sizing (WCAG 2.5.8 — minimum 24x24) ===== The utility bar, breadcrumb and footer link rows rendered under 24px tall, which is awkward on touch. Padding raises the hit area without moving anything. */ .util .l a, .util .r a { display:inline-block; padding:6px 2px; } .util-in { min-height:40px; } .ph-crumb a { display:inline-block; padding:5px 2px; } .foot-col a { padding:8px 0; } .crow a { display:inline-block; padding:5px 0; } .foot-bot a { display:inline-block; padding:6px 0; } /* ===== Top utility bar readability ===== Was rgba(255,255,255,.95) at weight 600 with .85-opacity icons, which read as grey against the navy. Pure white, bolder, full-strength icons. */ .util { color: #fff; font-weight: 700; } .util a { color: #fff; font-weight: 700; } .util a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .util .l svg, .util .r svg { opacity: 1; } .util .r span { color: #fff; font-weight: 700; } /* Main nav sits dark-on-white; give it a little more weight to match. */ .nav-links a { font-weight: 620; } /* CONTACT CARDS */ /* ===== Hero sizing ===== Trust ticks moved up beside the tag, so the block below the headline is just copy + buttons. Padding and type scale tightened to match. */ .hero-in{ padding-block:38px 42px; gap:44px; } .slider{ min-height:0; grid-template-rows:1fr; } .s-top{ gap:12px 18px; } .s-top .hero-trust{ gap:18px; } .s-top .hero-trust span{ font-size:13px; } .slide h1, .slide h2{ font-size:clamp(30px,3.5vw,44px); margin-top:18px; } .slide p{ font-size:17px; margin-top:14px; max-width:52ch; } .hero-cta{ margin-top:22px; } /* Hero spacing on small screens */ @media (max-width:940px){ .hero-in{ padding-block:34px 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ SPACING SCALE Measured before changing: sections carried 28px top + 28px bottom (56px of dead space at every boundary), headings sat 34px above their grids, and cards used 30px padding. Everything below is one coherent, tighter scale rather than per-section overrides. ═══════════════════════════════════════════════════════════════════════════ */ /* Section rhythm */ section.blk{ padding:20px 0; } section.blk.blk-first{ padding-top:36px; } section.blk.blk-tight{ padding-bottom:4px; } /* Heading block → content */ .sec-head h2{ margin-top:10px; } .sec-head p{ margin-top:10px; } .feat-grid, .proc, .tgrid, .values{ margin-top:22px; } .faq-seo{ margin-top:20px; } .faq-index, .stats, .price-grid, .contact-methods{ margin-top:24px; } /* Cards */ .feat{ padding:24px 24px; } .feat .fic{ margin-bottom:14px; } .feat p{ margin-top:8px; } .feat .more{ margin-top:12px; } .hl{ padding:16px 18px; } .highlights .hl-grid{ padding-block:20px; gap:16px; } .pcol{ padding:22px 20px; } .pcol .pi{ margin:10px 0 12px; } .pcol p{ margin-top:6px; } .cinfo-card{ padding:16px 18px; } /* Bands */ .band{ padding:32px; gap:32px; } .cta{ padding:36px 34px; } .cta p{ margin-top:12px; } .cta .hero-cta{ margin-top:22px; } /* Long-form + legal */ .frow{ padding:34px 0; gap:44px; } .legal h2{ margin:26px 0 10px; } .legal p{ margin-bottom:12px; } /* Footer */ footer{ padding:34px 0 22px; } .foot-grid{ gap:32px; } .foot-bot{ margin-top:22px; padding-top:16px; } @media (max-width:900px){ section.blk{ padding:16px 0; } section.blk.blk-first{ padding-top:28px; } .band{ padding:26px 22px; } .cta{ padding:30px 24px; } } /* Footer rhythm */ footer{ padding:26px 0 18px; } .foot-grid{ gap:26px; } .foot-brand p{ margin-top:12px; font-size:13.5px; } .foot-col h4, .foot-col .foot-h{ margin-bottom:10px; } .foot-col a{ padding:5px 0; font-size:13.5px; } .crow{ padding:5px 0; font-size:13.5px; } .foot-bot{ margin-top:16px; padding-top:14px; } /* Mobile gutters: keep a safe edge margin so text never touches the screen. */ @media (max-width:600px){ .wrap{ padding-left:20px; padding-right:20px; } } /* FAQ CATEGORY INDEX — the jump list above the hundred questions */ .ind-pill{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:9px 15px; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; } .ind-pill svg{ width:17px; height:17px; color:var(--blue); } .ind-pill span{ font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--bg-alt); border-radius:100px; padding:2px 8px; } .ind-pill:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(46,107,255,.5); border-color:transparent; } .ind-sec{ scroll-margin-top:96px; } /* Footer legal / non-affiliation disclaimer — clarifies this is independent software, not a government site (guards against social-engineering flags). */ .foot-legal{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); font-size:11.5px; line-height:1.65; color:rgba(255,255,255,.5); } .foot-legal strong{ color:rgba(255,255,255,.72); font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════ LOGO — the mark and wordmark lockup (resources/views/components/logo.blade.php) ═══════════════════════════════════════════════════════════════════════════ */ .logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; } .logo-tile{ width:38px; height:38px; border-radius:11px; flex-shrink:0; background:var(--grad-brand); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -8px rgba(46,107,255,.55); } .logo-tile svg{ width:21px; height:21px; } .logo-text{ display:flex; flex-direction:column; line-height:1.05; } .logo-word{ font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.025em; white-space:nowrap; } .logo-case{ color:var(--ink); } /* "Mate" carries the accent, so the two halves read apart at a glance. */ .logo-mate{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } .logo-tagline{ font-family:var(--mono); font-size:8.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-top:3px; } /* On the navy footer the wordmark has to hold its own against the dark. */ .logo-on-navy .logo-case{ color:#fff; } .logo-on-navy .logo-mate{ background:linear-gradient(120deg,#8FC2FF,#B69BFF); -webkit-background-clip:text; background-clip:text; } .logo-on-navy .logo-tagline{ color:rgba(233,240,248,.62); } .logo-on-navy .logo-tile{ box-shadow:none; } .logo-sm .logo-tile{ width:30px; height:30px; border-radius:9px; } .logo-sm .logo-tile svg{ width:17px; height:17px; } .logo-sm .logo-word{ font-size:17px; } @media (max-width:420px){ .logo-word{ font-size:18px; } .logo-tagline{ display:none; } } /* ═══════════════════════════════════════════════════════════════════════════ ANCHORS, BACK TO TOP, TAP TARGETS ═══════════════════════════════════════════════════════════════════════════ */ /* The header is sticky and 78px tall, so an anchor jump used to land with the heading hidden underneath it. */ [id]{ scroll-margin-top:96px; } .to-top{ position:fixed; right:20px; bottom:88px; z-index:70; width:44px; height:44px; border-radius:50%; cursor:pointer; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; box-shadow:var(--shadow-sm); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s, visibility .18s, transform .18s, color .15s, border-color .15s; } .to-top.shown{ opacity:1; visibility:visible; transform:none; } .to-top:hover{ color:var(--blue); border-color:var(--blue); } .to-top svg{ width:20px; height:20px; } /* Without a WhatsApp button below it, it can sit where that one would. */ @media (max-width:600px){ .to-top{ right:16px; bottom:84px; } } /* Secondary text: the counts in the FAQ jump list, labels beside a value. */ .muted{ color:var(--muted); font-weight:500; } .ind-pill .muted{ font-family:var(--mono); font-size:11.5px; } /* WCAG 2.5.8: an inline link in running text still needs a 24px target. */ .legal p a, .sec-head p a, .faq .a a, .fq .a a{ display:inline-block; min-height:24px; padding:2px 0; }