:root{
/* Brand */
--blue:#3ba0ff;
--blue-glow:#5cc8ff;
/* =========================================================
PAGE BACKGROUND (tweak these 3 params to experiment)
- top-left tint should be VERY subtle
- bottom-right should stay near pure white
========================================================= */
--pageBgTL: #d2ebff; /* top-left (very light blue tint) */
--pageBgBR:#ffffff; /* bottom-right (pure white) */
--pageBgAngle:135deg; /* direction: top-left → bottom-right */
/* Base palette (light) */
--bg:var(--pageBgTL);
--bg2:var(--pageBgBR);
--panel:rgba(255,255,255,.78);
--panel2:rgba(255,255,255,.56);
--border:rgba(15,23,42,.12);
--text:#0f172a;
--muted:#334155;
--muted2:#475569;
--shadow:0 30px 90px rgba(2,6,23,.10);
--shadow2:0 18px 45px rgba(2,6,23,.12);
--radius:20px;
--radius2:24px;
--container: min(1650px, calc(100vw - 64px));
/* Logo window docking (unchanged) */
--logoDockLeft:80px;
--logoDockTop:96px;
--logoDockGap:14px; /* gap between hero panel and logo window */
}
*{margin:0;padding:0;box-sizing:border-box}
html { scroll-behavior: smooth; }
/* One consistent gap for all anchor targets */
#why-local, #how-it-works, #features, #screenshots, #pricing, #tutorials, #faq, #support {
scroll-margin-top: 30px;
}
body{
font-family:Inter,system-ui,sans-serif;
background:linear-gradient(var(--pageBgAngle), var(--pageBgTL), var(--pageBgBR));
background-attachment:fixed;
color:var(--text);
overflow-x:hidden;
}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
section{padding:7rem 1rem}
.center{text-align:center}
.lead{color:var(--muted);max-width:900px;margin:0 auto 3.5rem}
h1,h2,h3{letter-spacing:-.02em}
h2{font-size:clamp(2.0rem,3.2vw,2.6rem);margin-bottom:.75rem}
h3{font-size:1.15rem;margin-bottom:.55rem}
p{color:var(--muted2);line-height:1.65}
a{color:inherit}
header{
position:fixed;
top:0; left:0; right:0;
z-index:500;
background:linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.72));
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.10);
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
height:140px; /* fixed bar height — experiment with this */
padding:0; /* remove the vertical padding that grew the bar */
gap:1rem;
}
.brand{
display:flex;
align-items:center;
gap:18px;
text-decoration:none;
user-select:none;
}
.brandMark{
width:128px;
height:128px;
max-height:100%; /* never taller than the bar */
display:grid;
place-items:center;
filter:drop-shadow(0 12px 26px rgba(59,160,255,.32));
flex:0 0 auto;
overflow:visible; /* let the 3D tilt/float show fully */
}
.brandLogo3d{
width:100%;
height:100%;
display:block;
pointer-events:none;
}
.brand img{
height:44px;
width:auto;
border-radius:12px;
filter:drop-shadow(0 12px 28px rgba(59,160,255,.55));
transform:translateZ(0);
animation:float3D 6s ease-in-out infinite;
}
@keyframes float3D{
0%{transform:translateY(0) rotateX(0) rotateY(0)}
50%{transform:translateY(-5px) rotateX(5deg) rotateY(-5deg)}
100%{transform:translateY(0) rotateX(0) rotateY(0)}
}
.brand .name{
font-weight:900;
letter-spacing:-.03em;
font-size:2.1rem;
line-height:1.02;
}
.brand .sub{
display:block;
font-weight:700;
font-size:1.02rem;
color:var(--blue-glow);
letter-spacing:.16em;
text-transform:uppercase;
margin-top:3px;
}
.links{
display:flex;
gap:.8rem;
align-items:center;
list-style:none;
}
.links a{
text-decoration:none;
color:rgba(255,255,255,.95);
font-weight:700;
font-size:1.02rem;
white-space:nowrap;
opacity:1;
text-shadow:0 1px 10px rgba(0,0,0,.35);
transition:.25s;
padding:.5rem .35rem;
border-radius:10px;
}
.links a:hover{
opacity:1;
background:rgba(0,0,0,.18);
}
.menuBtn{
display:none;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
color:#fff;
padding:.55rem .8rem;
border-radius:12px;
font-weight:800;
cursor:pointer;
}
.actions{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
}
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding:1rem 2.1rem;
border-radius:14px;
font-weight:800;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,var(--blue),var(--blue-glow));
box-shadow:0 0 40px rgba(59,160,255,.45);
transition:.35s cubic-bezier(.4,0,.2,1);
overflow:hidden;
border:none;
cursor:pointer;
}
.btn.secondary{
background:transparent;
border:1px solid rgba(255,255,255,.45);
box-shadow:none;
color:#fff;
}
/* Secondary buttons: visible on light backgrounds */
.btn.secondary{
color: rgba(15,23,42,.92);
background: rgba(3, 72, 136, 0.452);
border: 1px solid rgba(15,23,42,.18);
box-shadow: 0 10px 28px rgba(2,6,23,.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn.secondary:hover{
background: rgba(255,255,255,.92);
border-color: rgba(26,100,255,.28);
box-shadow: 0 14px 34px rgba(2,6,23,.12);
transform: translateY(-1px);
}
.btn:hover{transform:translateY(-4px) scale(1.03)}
.btn::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%);
opacity:0;
transition:.25s;
}
.btn:hover::after{opacity:1}
/* =========================
CTA 3D GLASS BUTTONS + ORBITING ARROW BORDER
Apply ONLY to the 3 primary CTAs (add class: "cta3d")
Knobs:
--ctaAccent : border/arrow color
--ctaSpeed : animation duration
========================= */
.btn.cta3d{
/* DARITHMA logo blue (#1A64FF) */
--ctaAccent: rgba(26, 100, 255, .95); /* primary */
--ctaAccent2: rgba(26, 100, 255, .55); /* secondary/soft */
--ctaBorder: 2px;
--ctaR: 14px;
--ctaSpeed: 10s;
border-radius: var(--ctaR);
border: 1px solid rgba(255,255,255,.22);
/* glass base + moving highlight sheen */
background-image:
linear-gradient(135deg, rgba(26,100,255,.85), rgba(26,100,255,.22)),
linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 18%, transparent 38%);
background-size: 100% 100%, 220% 220%;
background-position: 0 0, -120% -120%;
box-shadow:
0 18px 60px rgba(0,0,0,.50),
0 0 50px rgba(26,100,255,.26),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -14px 26px rgba(0,0,0,.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
animation: ctaSheen 10.0s ease-in-out infinite;
isolation: isolate;
}
.btn.cta3d:hover{ transform: translateY(-6px) scale(1.035); }
.btn.cta3d:active{ transform: translateY(-2px) scale(1.01); }
/* Animated "comet" running around the border (ring only) */
.btn.cta3d::before{
content:"";
position:absolute;
inset:-2px;
padding: var(--ctaBorder);
border-radius: inherit;
background:
conic-gradient(from 0deg,
transparent 0deg,
transparent 235deg,
rgba(26,100,255,0) 235deg,
var(--ctaAccent) 265deg,
rgba(26,100,255,0) 305deg,
transparent 360deg);
/* ring mask: keep only the border area */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
filter: drop-shadow(0 0 10px rgba(26,100,255,.35));
opacity: .95;
animation: ctaSpin var(--ctaSpeed) linear infinite;
pointer-events:none;
z-index: 1;
}
@keyframes ctaSpin { to { transform: rotate(360deg); } }
@keyframes ctaSheen {
0% { background-position: 0 0, -120% -120%; }
55% { background-position: 0 0, 120% 120%; }
100% { background-position: 0 0, 140% 140%; }
}
@media (prefers-reduced-motion: reduce){
.btn.cta3d{ animation: none; }
.btn.cta3d::before{ animation: none; }
}
/* =========================
HERO
========================= */
.hero{
position:relative;
z-index:1;
padding:5.2rem 0 7.2rem;
}
.hero-panel{
max-width:min(1320px, var(--container));
margin:0 auto;
padding:3.1rem 3.1rem;
border-radius:28px;
border:1px solid rgba(255,255,255,.10);
background:linear-gradient(180deg,
rgba(10,16,28,.78),
rgba(10,16,28,.62)
);
box-shadow:0 30px 90px rgba(0,0,0,.45);
backdrop-filter:blur(14px);
}
.hero-pill{
display:inline-flex;
align-items:center;
gap:.55rem;
padding:.45rem .85rem;
border-radius:999px;
font-size:.82rem;
letter-spacing:.02em;
color:rgba(230,245,255,.90);
border:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.20);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:2.4rem;
align-items:center;
}
.hero-copy{ min-width:0; }
.hero-panel h1{
margin:0;
font-size:clamp(2.2rem, 3.6vw, 3.35rem);
line-height:1.06;
letter-spacing:-.03em;
text-shadow:0 0 26px rgba(102,217,255,.18);
max-width:18ch;
}
/* Inline message next to the hero headline (independent from the animated logo) */
.hero-headRow{
display:flex;
align-items:flex-start;
gap:1.6rem;
margin:.85rem 0 0;
}
.hero-headRow h1{ flex:1; min-width:0; margin:0; }
.hero-sideMsg{
flex:0 0 auto;
max-width:360px;
text-align:right;
padding-top:.25rem;
}
.hero-sideBrand{
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
font-size:.95rem;
color:rgba(0,123,255,.95);
}
.hero-sideText{
margin-top:.35rem;
font-weight:800;
color:rgba(92,24,92,.92); /* dark magenta */
line-height:1.25;
font-size:1.02rem;
}
.hero-subline{
margin:1.05rem 0 0;
font-size:1.08rem;
line-height:1.6;
color:rgba(235,245,255,.88);
max-width:42ch;
}
.hero-sub{
color: #111; /* black-ish */
opacity: 1; /* important if you currently fade it */
}
.hero-points{
margin:1.15rem 0 0;
padding:0;
list-style:none;
display:grid;
gap:.55rem;
color:rgba(235,245,255,.82);
font-size:.98rem;
}
.hero-points li{
display:flex;
gap:.55rem;
align-items:flex-start;
}
.hero-points li::before{
content:"✓";
display:inline-flex;
width:1.1rem;
height:1.1rem;
align-items:center;
justify-content:center;
margin-top:.12rem;
border-radius:999px;
background:rgba(34,197,94,.18);
border:1px solid rgba(34,197,94,.35);
color:rgba(183,255,210,.95);
font-size:.85rem;
flex:0 0 auto;
}
.hero-copy .actions{
justify-content:flex-start;
margin-top:1.35rem;
}
.hero-footnote{
margin-top:.85rem;
font-size:.85rem;
color:rgba(235,245,255,.70);
}
.hero-badges{
margin-top:1.25rem;
display:flex;
flex-wrap:wrap;
gap:.65rem;
justify-content:flex-start;
}
.pill{
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.4rem .75rem;
border-radius:999px;
font-size:.82rem;
color:rgb(1, 2, 17);
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.16);
}
.dot{
width:.45rem;
height:.45rem;
border-radius:999px;
background:rgba(34,197,94,.95);
box-shadow:0 0 12px rgba(34,197,94,.45);
}
/* --- Laptop mock --- */
.hero-visual{
min-width:0;
display:flex;
justify-content:center;
}
.laptop-wrap{
width:min(520px, 100%);
filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
transform:perspective(1200px) rotateY(-16deg) rotateX(7deg);
transform-origin:center;
}
.laptop{ position:relative; width:100%; transform-style:preserve-3d; }
.laptop-screen{
position:relative;
border-radius:18px;
padding:14px;
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 18px 50px rgba(0,0,0,.45);
overflow:hidden;
}
.laptop-screen::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
pointer-events:none;
background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
opacity:.55;
mix-blend-mode:screen;
}
/* Force the laptop screen to a cinematic aspect ratio */
.laptop-screen{
aspect-ratio: 21 / 9; /* cinema-scope */
height: auto; /* let aspect-ratio define height */
overflow: hidden; /* crop image */
}
/* Make the screenshot fill the screen (cropping if needed) */
.laptop-shot{
width: 100%;
height: 100%;
object-fit: cover; /* key: crop to fill */
object-position: center; /* keep centered */
display: block;
}
.laptop-camera{
position:absolute;
top:7px;
left:50%;
transform:translateX(-50%);
width:52px;
height:10px;
border-radius:999px;
background:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.09);
z-index:3;
}
.laptop-camera::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:6px;
height:6px;
border-radius:999px;
background:rgba(120,200,255,.55);
box-shadow:0 0 10px rgba(120,200,255,.45);
}
.laptop-base{
position:relative;
margin:-10px auto 0;
width:92%;
height:58px;
border-radius:0 0 26px 26px;
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
border-top:none;
box-shadow:0 14px 40px rgba(0,0,0,.35);
overflow:hidden;
}
.laptop-base::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06)),
radial-gradient(120% 120% at 50% -20%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
opacity:.85;
pointer-events:none;
}
.laptop-trackpad{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);
width:34%;
height:22px;
border-radius:12px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.10);
}
/* --- Cube --- */
/* =========================================================
HERO VISUAL: Laptop (top-right) + "Why DARITHMA" cube (below)
Tuning knobs live on .hero-visualStack
========================================================= */
.hero-visual{
min-width:0;
display:flex;
justify-content:center;
align-items:center;
}
.hero-visualStack{
/* Layout knobs (easy positioning tweaks) */
--laptopTop: -80px;
--laptopRight: -20px;
--laptopTop-3d: -95px;
--laptopRight-3d: -20px;
--logoSize: clamp(150px, 14vw, 280px);
/* Top-right message knobs */
--msgTop: -118px; /* message position (independent from logo) */
--msgRight: 220px; /* ✅ increase this to push the text LEFT */
--msgMaxW: 520px;
--cubeTop: 280px; /* move cube up/down */
--cubeLeft: 200px; /* move cube left/right */
/* Cube knobs */
--cubeSize: clamp(150px, 16vw, 260px); /* cube size */
--spinMs: 20000ms; /* spin animation duration */
/* Text knobs */
--cubeTextSize: clamp(1.05rem, 1.35vw, 1.45rem);
--cubeSubSize: clamp(.92rem, 1.10vw, 1.12rem);
/* Glass cube look knobs (tweak to taste) */
/* iOS-style blue glass */
--glassFillA: rgba(210, 235, 255, .06); /* face tint (main) */
--glassFillB: rgba(210, 235, 255, .06); /* face tint (secondary) */
--glassBorder: rgba(80, 160, 255, .26); /* soft blue edge */
--glassEdgeGlowA: rgba(110, 190, 255, .22); /* gentle “edge light” */
--glassEdgeGlowB: rgba(255, 255, 255, .14); /* soft white highlight (no purple) */
--glassDotOpacity: .06; /* iOS glass = almost no speckle */
--glassBlur: 20px; /* more blur = more iOS feel */
position:relative;
width:min(560px, 100%);
height:520px; /* enough room for laptop + cube */
}
/* Place the animated logo in the upper-right corner of the hero card */
.hero-visualStack .heroLogoFloat{
position:absolute;
top:var(--laptopTop-3d);
right:var(--laptopRight-3d);
width:var(--logoSize);
height:var(--logoSize);
z-index:3;
display:grid;
place-items:center;
filter:drop-shadow(0 20px 50px rgba(2,6,23,.12));
}
.hero-visualStack .heroLogoFloat canvas{
width:100%;
height:100%;
display:block;
}
/* Top-right message (DARITHMA + promise) */
.hero-visualStack .heroTopMsg{
position:absolute;
top:var(--msgTop);
right:var(--msgRight);
max-width:var(--msgMaxW);
text-align:right;
z-index:4;
padding:.90rem 1.08rem;
border-radius:20px;
/* light “raised” glass card (3D-ish but still subtle) */
background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.54));
border:1px solid rgba(80,160,255,.22);
backdrop-filter:blur(14px) saturate(175%);
box-shadow:
0 26px 70px rgba(2,6,23,.12),
0 10px 22px rgba(2,6,23,.06),
0 1px 0 rgba(255,255,255,.88) inset;
transform:translateZ(0);
}
.heroTopMsg::after{
/* tiny rim highlight to enhance “3D” */
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%);
mix-blend-mode:normal;
}
.hero-visualStack .heroTopMsgBrand{
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
font-size:.90rem;
color:rgba(2,132,199,.95);
}
.hero-visualStack .heroTopMsgText{
margin-top:.30rem;
font-weight:800;
font-size:.92rem;
line-height:1.16;
color:rgba(15,23,42,.88);
}
/* ===== Cube stage ===== */
.whyCubeStage{
position:absolute;
top:var(--cubeTop);
left:var(--cubeLeft);
width:var(--cubeSize);
height:var(--cubeSize);
perspective:1100px;
z-index:2;
/* For cube depth calc */
--half: calc(var(--cubeSize) / 2);
}
/* soft shadow under cube */
.whyCubeShadow{
position:absolute;
left:50%;
top:66%;
transform:translateX(-50%);
width:88%;
height:40%;
background:radial-gradient(closest-side, rgba(2,6,23,.14), rgba(2,6,23,0));
filter:blur(22px);
opacity:.08;
pointer-events:none;
}
.whyCube{
position:absolute;
inset:0;
transform-style:preserve-3d;
/* default “nice angle” (JS will update it) */
transform:rotateX(-18deg) rotateY(28deg) rotateZ(0deg);
}
.whyCube.is-anim{
transition:transform var(--spinMs) cubic-bezier(.2,.9,.15,1);
}
/* ===== Cube face base (single source of truth) ===== */
.whyFace{
position:absolute;
inset:0;
/* keep the "cube" silhouette */
border-radius:0px;
/* Glassy face (transparent + soft fill) */
background: linear-gradient(135deg, var(--glassFillA), var(--glassFillB));
border: 1px solid var(--glassBorder);
outline: 1px solid rgba(255,255,255,.28);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
display:flex;
align-items:center;
justify-content:center;
padding:22px;
text-align:center;
/* text is dark (see .whyText) */
color: rgba(15,23,42,.92);
overflow:hidden;
/* Light-mode depth + subtle edge glow */
box-shadow:
0 14px 44px rgba(2,6,23,.10), /* outer drop shadow (lighter) */
0 0 18px rgba(56,189,248,.08), /* subtle blue glow (optional) */
inset 0 1px 0 rgba(255,255,255,.60),
inset 0 -16px 22px rgba(2,6,23,.06);
backdrop-filter: blur(var(--glassBlur)) saturate(165%);
-webkit-backdrop-filter: blur(var(--glassBlur)) saturate(165%);
}
/* Fixed-corner illumination + inner glow (the "light comes from one corner") */
/* Subtle "digital speckle" like the reference cube (very light) */
/* Rim light (edge glow + subtle gradients) */
/* Inner bevel (machined block edge) */
/* Fixed-corner illumination + inner glow (the "light comes from one corner") */
.whyFace::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:
radial-gradient(120% 90% at 14% 14%, rgba(255,255,255,.78), rgba(255,255,255,0) 58%),
radial-gradient(120% 90% at 88% 84%, var(--edgeB, var(--glassEdgeGlowB)), rgba(255,255,255,0) 60%),
linear-gradient(135deg, var(--edgeA, var(--glassEdgeGlowA)), rgba(255,255,255,0) 46%),
linear-gradient(315deg, rgba(2,6,23,.10), rgba(2,6,23,0) 55%);
pointer-events:none;
opacity:.95;
mix-blend-mode:screen;
}
/* Subtle "digital speckle" like the reference cube (very light) */
.whyFace::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:
radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 1px, rgba(255,255,255,0) 2px),
radial-gradient(circle at 62% 38%, rgba(255,255,255,.45) 0 1px, rgba(255,255,255,0) 2px),
radial-gradient(circle at 78% 72%, rgba(255,255,255,.50) 0 1px, rgba(255,255,255,0) 2px),
radial-gradient(circle at 32% 76%, rgba(255,255,255,.42) 0 1px, rgba(255,255,255,0) 2px);
opacity: var(--glassDotOpacity);
pointer-events:none;
mix-blend-mode:screen;
}
/* Text */
.whyText{
font-family: Inter, system-ui, sans-serif;
font-weight: 900;
letter-spacing: -.02em;
line-height: 1.15;
font-size: var(--cubeTextSize);
color: rgba(15,23,42,.92);
text-shadow: 0 1px 0 rgba(255,255,255,.55);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform: translateZ(1px);
}
.whyText span{
display:block;
margin-top:.5rem;
font-weight: 800;
font-size: var(--cubeSubSize);
letter-spacing: -.01em;
color: rgba(15,23,42,.72);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* Face edge tints (VERY subtle; faces remain glassy) */
/* Build the cube in 3D space */
.face-front{ transform:translateZ(var(--half)); }
.face-back { transform:rotateY(180deg) translateZ(var(--half)); }
.face-right{ transform:rotateY(90deg) translateZ(var(--half)); }
.face-left { transform:rotateY(-90deg) translateZ(var(--half)); }
.face-top { transform:rotateX(90deg) translateZ(var(--half)); }
.face-bot { transform:rotateX(-90deg) translateZ(var(--half)); }
/* Mobile: stack nicely (laptop then cube) */
@media (max-width: 980px){
.hero-visualStack{
height:auto;
display:flex;
flex-direction:column;
align-items:center;
gap:1.1rem;
--laptopTop: 0px;
--laptopRight: 0px;
--cubeTop: 0px;
--cubeLeft: 0px;
}
.hero-visualStack .laptop-wrap{
position:relative;
top:auto;
right:auto;
}
.whyCubeStage{
position:relative;
top:auto;
left:auto;
}
.hero-visualStack .heroLogoFloat{
position:relative;
top:auto;
right:auto;
}
.hero-visualStack .heroTopMsg{
position:relative;
top:auto;
right:auto;
max-width:34rem;
text-align:center;
margin:0 auto .35rem;
}
}
/* --- Cube end --- */
/* ===== WHY LOCAL cube (same cube tech, but placed in #why-local and tinted light magenta) ===== */
#why-local .whyLocalCubeStage{
position:relative;
width:min(640px, 100%);
height:min(640px, 100%);
aspect-ratio:1/1;
display:grid;
place-items:center;
perspective:1100px;
/* size for this section */
--cubeSize: clamp(190px, 22vw, 360px);
--half: calc(var(--cubeSize) / 2);
/* Light DARITHMA blue glass */
--glassFillA: rgba(170, 220, 255, .68);
--glassFillB: rgba(205, 235, 255, .54);
--glassBorder: rgba( 90, 170, 255, .32);
--glassEdgeGlowA: rgba(120, 200, 255, .45);
--glassEdgeGlowB: rgba( 60, 140, 230, .28);
/* Match HERO cube transition duration */
--spinMs: 30000ms;
/* Text sizing (same variables used by .whyText) */
--cubeTextSize: clamp(1.05rem, 1.35vw, 1.45rem);
--cubeSubSize: clamp(.92rem, 1.10vw, 1.12rem);
}
/* ensure this cube fills its stage */
#why-local .whyLocalCubeStage .whyCubeShadow{
top:70%;
opacity:.10;
}
#why-local .whyLocalCubeStage .whyCube{
width:var(--cubeSize);
height:var(--cubeSize);
position:relative;
inset:auto;
transform-style:preserve-3d;
}
/* slightly softer shadows in the light section */
#why-local .whyLocalCubeStage .whyFace{
box-shadow:
0 18px 64px rgba(2,6,23,.12),
0 0 18px rgba(255, 160, 255, .10),
inset 0 1px 0 rgba(255,255,255,.70),
inset 0 -16px 22px rgba(2,6,23,.06);
}
@media (max-width: 980px){
.hero{ padding:4.4rem 0 6.2rem; }
.hero-panel{ padding:2.2rem 1.6rem; }
.hero-grid{ grid-template-columns:1fr; gap:1.65rem; text-align:center; }
.hero-headRow{ flex-direction:column; align-items:center; gap:.85rem; }
.hero-sideMsg{ text-align:center; max-width:46ch; padding-top:0; }
.hero-subline{ margin-left:auto; margin-right:auto; }
.hero-copy .actions{ justify-content:center; }
.hero-footnote{
margin-top:.85rem;
font-size:.85rem;
color:rgba(235,245,255,.70);
}
.hero-badges{ justify-content:center; }
.laptop-wrap{ transform:perspective(1200px) rotateY(-10deg) rotateX(6deg); }
}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.reveal.active{opacity:1;transform:translateY(0)}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
}
.card{
padding:2.5rem;
border-radius:var(--radius);
background: linear-gradient(180deg,
rgba(10,16,28,.82),
rgba(10,16,28,.62)
);
border: 1px solid rgba(255,255,255,.14);
box-shadow:var(--shadow2);
transform-style:preserve-3d;
transition:.45s cubic-bezier(.4,0,.2,1);
position:relative;
overflow:hidden;
}
.card::before{
content:"";
position:absolute;
inset:-2px;
background:radial-gradient(420px 240px at 20% 10%, rgba(92,200,255,.14), transparent 60%);
opacity:.7;
pointer-events:none;
}
.card:hover{transform:translateY(-10px) rotateX(6deg) rotateY(-6deg)}
.card p{color:#9ca3af}
.kicker{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.4rem .75rem;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.05);
color:rgba(229,231,235,.92);
font-weight:800;
font-size:.85rem;
margin-bottom:1.1rem;
}
.split{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:2.5rem;
align-items:start;
}
.panel{
border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.14);
box-shadow:var(--shadow2);
padding:2.25rem;
}
.panel p{color:#cbd5f5}
.panel h3{margin-top:.2rem}
.muted{color:var(--muted)}
.showcase{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:2.5rem;
align-items:start;
}
.mock{
transform:perspective(1200px) rotateX(8deg);
transition:.6s ease;
will-change:transform;
}
.mock:hover{transform:perspective(1200px) rotateX(0deg) scale(1.06)}
.mock img{
width:100%;
height:auto;
border-radius:20px;
display:block;
box-shadow:0 45px 120px rgba(0,0,0,.72);
border:1px solid rgba(255,255,255,.14);
}
.mock .cap{margin-top:.9rem;color:rgba(229,231,235,.92);font-weight:800;opacity:.9}
.timeline{display:grid;gap:1.25rem;margin-top:1rem}
.step{
display:flex;
gap:1rem;
align-items:flex-start;
padding:1.25rem 1.25rem;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
}
/* Make timeline steps clickable like buttons (only used where we add step-link) */
.step-link{
text-decoration:none;
cursor:pointer;
transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.step-link:hover{
transform:translateY(-2px);
background:rgba(255,255,255,0.06);
border-color:rgba(92,200,255,0.28);
box-shadow:0 22px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(92,200,255,0.06) inset;
}
.step-link:active{
transform:translateY(0px);
}
.step-link:focus-visible{
outline:2px solid rgba(92,200,255,0.65);
outline-offset:3px;
}
.num{
flex:0 0 auto;
width:36px;height:36px;
border-radius:12px;
background:linear-gradient(135deg, rgba(59,160,255,.95), rgba(92,200,255,.75));
display:grid;place-items:center;
font-weight:900;
box-shadow:0 0 26px rgba(59,160,255,.35);
}
.step p{color:#cbd5f5;margin-top:.35rem}
.pricing{
display:grid;
grid-template-columns:1fr;
gap:1.5rem;
max-width:1120px;
margin:0 auto;
}
.priceCard{
border-radius:24px;
padding:2.75rem;
background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.18);
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}
.priceCard::before{
content:"";
position:absolute;
inset:-2px;
background:radial-gradient(900px 280px at 50% 0%, rgba(92,200,255,.20), transparent 60%);
pointer-events:none;
}
.badge{
display:inline-block;
padding:.45rem .85rem;
border-radius:999px;
background:rgba(59,160,255,.18);
border:1px solid rgba(59,160,255,.38);
color:#eaf3ff;
font-weight:900;
font-size:.85rem;
margin-bottom:1rem;
}
.price{
font-size:clamp(2.2rem,4vw,3.0rem);
font-weight:900;
letter-spacing:-.03em;
margin:.85rem 0 1.1rem;
}
.bullets{display:grid;gap:.7rem;list-style:none;margin:1.2rem 0 0;padding:0}
.bullets li{display:flex;gap:.7rem;align-items:flex-start;color:#cbd5f5}
.tick{
width:20px;height:20px;border-radius:8px;
background:rgba(16,185,129,.18);
border:1px solid rgba(16,185,129,.42);
display:grid;place-items:center;
flex:0 0 auto;
margin-top:1px;
}
.videoGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.25rem;
}
.videoCard{
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
transition:.35s ease;
text-align:left;
font-family:inherit;
color:inherit;
cursor:pointer;
display:block;
width:100%;
padding:0;
}
.videoCard.videoOpen{
appearance:none;
-webkit-appearance:none;
}
.videoCard:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.thumb{
height:150px;
background:radial-gradient(420px 180px at 50% 20%, rgba(92,200,255,.25), rgba(255,255,255,.03));
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}
.thumbImg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
z-index:1;
}
.thumb::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,23,42,.18));
pointer-events:none;
z-index:2;
}
.play{
width:54px;
height:54px;
border-radius:50%;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.70);
display:grid;
place-items:center;
box-shadow:0 0 30px rgba(59,160,255,.25);
position:relative;
z-index:3;
color:rgba(15,23,42,.75);
}
.videoModal{
position:fixed;
inset:0;
z-index:2000;
display:none;
align-items:center;
justify-content:center;
padding:2rem;
background:rgba(2,6,23,.72);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.videoModal.active{
display:flex;
}
.videoModalBox{
position:relative;
width:min(1100px, 94vw);
aspect-ratio:16 / 9;
background:#000;
border-radius:22px;
overflow:hidden;
box-shadow:0 30px 100px rgba(0,0,0,.55);
}
.videoModalBox iframe{
width:100%;
height:100%;
border:0;
display:block;
}
.videoModalClose{
position:absolute;
top:-48px;
right:0;
width:40px;
height:40px;
border-radius:999px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.14);
color:#fff;
font-size:1.5rem;
cursor:pointer;
}
.meta{padding:1rem 1rem 1.1rem}
.meta .t{font-weight:900;margin-bottom:.25rem}
.meta .s{color:#9ca3af;font-size:.92rem}
.faq{max-width:950px;margin:0 auto;display:grid;gap:.9rem}
details{
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
padding:1rem 1.1rem;
}
summary{
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:900;
color:rgba(229,231,235,.95);
gap:1rem;
}
summary::-webkit-details-marker{display:none}
summary .plus{
width:34px;height:34px;border-radius:12px;
background: rgba(26,100,255,.14);
border: 1px solid rgba(26,100,255,.35);
display:grid;place-items:center;
flex:0 0 auto;
font-weight:900;
color: rgba(26,100,255,.95);
}
details[open] summary .plus{
background: rgba(16,185,129,.14);
border-color: rgba(16,185,129,.38);
color: rgba(16,185,129,.95);
}
.answer{margin-top:.8rem;color:#cbd5f5;line-height:1.7;padding-right:.4rem}
.supportWrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.form{
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.16);
box-shadow:var(--shadow2);
padding:2rem;
}
label{
display:block;
font-weight:800;
margin:.85rem 0 .45rem;
color:rgba(229,231,235,.92);
font-size:.92rem;
}
input,select,textarea{
width:100%;
border-radius:14px;
border:1px solid rgba(255,255,255,.18);
background:rgba(2,6,23,.45);
color:#fff;
padding:.85rem .95rem;
outline:none;
transition:.2s;
font-family:inherit;
}
input:focus,select:focus,textarea:focus{
border-color:rgba(92,200,255,.6);
box-shadow:0 0 0 3px rgba(92,200,255,.18);
}
textarea{min-height:120px;resize:vertical}
.cta{
padding:6rem 1rem;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
background:radial-gradient(900px 360px at 50% 0%, rgba(92,200,255,.14), transparent 60%),
rgba(255,255,255,.02);
}
.cta h2{margin-bottom:1rem}
.cta p{
max-width:900px;
margin:0 auto 2rem;
font-size:1.1rem;
color:#111;
opacity:1;
}
footer{padding:3.5rem 1rem;text-align:center;color:#64748b}
.footLinks{
display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
margin:1rem 0 0;opacity:.9;
}
.footLinks a{
text-decoration:none;
padding:.4rem .6rem;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.03);
}
.footLinks a:hover{background:rgba(255,255,255,.06)}
/* ===== Fixed 3D Logo Window ===== */
.logo-dock{
position:fixed;
left:var(--logoDockLeft);
top:var(--logoDockTop); /* below sticky header */
width:260px;
z-index:40; /* under header (50) but above content */
border-radius:22px;
background:linear-gradient(180deg,
rgba(10,16,28,.78),
rgba(10,16,28,.62)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 30px 90px rgba(0,0,0,.55);
backdrop-filter:blur(18px);
overflow:hidden;
padding:14px 14px 12px;
pointer-events:auto;
transform:translateZ(0);
}
.logo-dock::before{
content:"";
position:absolute;
inset:-2px;
background:radial-gradient(520px 220px at 20% 0%, rgba(92,200,255,.20), transparent 55%);
pointer-events:none;
opacity:.45;
}
.logo-dock__title{
position:relative;
font-weight:900;
letter-spacing:-.03em;
font-size:1.05rem;
line-height:1.05;
}
.logo-dock__sub{
position:relative;
display:block;
font-weight:800;
font-size:.72rem;
color:var(--blue-glow);
letter-spacing:.12em;
text-transform:uppercase;
margin-top:3px;
opacity:.95;
}
.logo-dock__stage{
position:relative;
margin-top:10px;
width:100%;
height:210px;
border-radius:18px;
background:rgba(2,6,23,.62);
border:1px solid rgba(255,255,255,.14);
overflow:hidden;
}
.videoCard{
text-decoration: none;
color: inherit;
display: block;
}
#logo3d{
width:100%;
height:100%;
display:block;
}
.logo-dock__glow{
position:absolute;
inset:-20%;
background:
radial-gradient(200px 140px at 35% 35%, rgba(92,200,255,.18), transparent 60%),
radial-gradient(220px 160px at 70% 65%, rgba(182,107,255,.16), transparent 62%);
filter:blur(14px);
opacity:.45;
pointer-events:none;
mix-blend-mode:screen;
}
.logo-dock__hint{
position:relative;
margin-top:10px;
font-size:.86rem;
color:rgba(203,213,245,.92);
opacity:.92;
}
.logo-dock__stage { position: relative; }
#logo3d { position:absolute; inset:0; z-index:1; }
.logo-dock__glow { z-index:2; }
/* Keep it elegant on smaller screens */
@media (max-width: 1140px){
.logo-dock{
width:230px;
}
.logo-dock__stage{
height:190px;
}
}
@media (max-width: 980px){
/* On phones/tablets: dock becomes a compact centered pill */
.logo-dock{
left:50%;
transform:translateX(-50%);
top:86px;
width:min(420px, calc(100% - 22px));
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.logo-dock__stage{height:160px;}
}
@media (max-width: 980px){
.split{grid-template-columns:1fr}
.supportWrap{grid-template-columns:1fr}
}
@media (max-width: 1400px){
.menuBtn{display:inline-flex}
.links{
position:fixed;
left:0; right:0;
top:150px;
margin:0 auto;
max-width:var(--container);
width:calc(100% - 2rem);
flex-direction:column;
align-items:stretch;
gap:.5rem;
padding:1rem;
border-radius:18px;
background:rgba(2,6,23,.72);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
transform:translateY(-14px);
opacity:0;
pointer-events:none;
transition:.25s ease;
}
.links.active{transform:translateY(0);opacity:1;pointer-events:auto}
.links a{padding:.75rem .85rem}
.hero-panel{padding:3rem 1.35rem}
}
@media (prefers-reduced-motion: reduce){
*{scroll-behavior:auto}
.brand img{animation:none}
.reveal{transition:none}
.card,.mock,.btn{transition:none}
}
/* =========================
Screenshots CTA section
========================= */
.screensCta{
display:flex;
justify-content:center;
margin-top:1.6rem;
}
.screensCard{
width:min(1120px, 100%);
border-radius:26px;
padding:2.2rem 2rem;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
box-shadow: var(--shadow2);
text-align:center;
}
.screensBadge{
display:inline-flex;
align-items:center;
gap:.55rem;
padding:.45rem .9rem;
border-radius:999px;
background: rgba(2,6,23,.55);
border: 1px solid rgba(255,255,255,.16);
color: rgba(226,232,240,.92);
font-weight:800;
margin-bottom:1rem;
}
.btn.jumbo{
padding:1.15rem 2.6rem;
font-size:1.05rem;
min-width: 320px;
}
.screensHint{
margin-top:.9rem;
color: rgba(148,163,184,.82);
font-size:.95rem;
}
/* =========================================================
Readability upgrade — "How it works" section
(keeps the Aura look, but increases contrast for text/cards)
========================================================= */
#how{ position:relative; }
#how::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(1200px 600px at 20% 20%, rgba(0,123,255,.18), rgba(0,0,0,0)),
radial-gradient(900px 520px at 75% 35%, rgba(0,216,255,.14), rgba(0,0,0,0)),
linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.58));
pointer-events:none;
}
#how > .container{ position:relative; z-index:1; }
/* Panels/cards: darker glass + clearer border */
#how .panel{
background: rgba(8, 12, 26, .58) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow:
0 18px 60px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08) !important;
backdrop-filter: blur(18px) saturate(125%) !important;
}
/* Timeline steps: stronger contrast */
#how .timeline .step{
background: rgba(2, 6, 23, .52) !important;
border: 1px solid rgba(255,255,255,.12) !important;
}
#how .timeline .step:hover{
background: rgba(26,100,255,0.06) !important; /* light blue wash */
border-color: rgba(26,100,255,0.24) !important;
}
/* Typography: brighten body text */
#how .kicker,
#how .subtle,
#how p{
color: rgba(235, 241, 255, .86) !important;
}
#how h1, #how h2, #how h3, #how .panel-title{
color: rgba(255,255,255,.96) !important;
}
#how .muted{ color: rgba(235, 241, 255, .78) !important; }
/* Small helper chips/badges (if present) */
#how .pill{
background: rgba(0,0,0,.35) !important;
border-color: rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.92) !important;
}
/* Make the heading area readable on bright sky */
.features .section-head {
position: relative;
max-width: 980px;
margin: 0 auto 2.2rem;
padding: 1.35rem 1.6rem;
border-radius: 0px;
background: linear-gradient(
180deg,
rgba(10,16,28,.72),
rgba(10,16,28,.45)
);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 24px 70px rgba(0,0,0,.45);
backdrop-filter: blur(10px);
}
.features .section-head h2 {
color: rgba(255,255,255,.96);
text-shadow: 0 14px 36px rgba(0,0,0,.55);
}
.features .section-head p {
color: rgba(235,245,255,.88);
text-shadow: 0 12px 28px rgba(0,0,0,.55);
}
/* Darken the top portion slightly for headings */
.section-head{
margin-bottom: 2.2rem; /* gap after the whole heading block */
}
/* Screenshots section — match the dark “card” styling used elsewhere */
#screens .section-head{
max-width: 1120px;
margin: 0 auto 2.2rem;
text-align: center;
padding: 0;
background: none;
border: none;
box-shadow: none;
}
#screens .section-head h2{
margin: 0 0 .35rem;
font-size: clamp(2.1rem, 4.2vw, 3.2rem);
line-height: 1.05;
letter-spacing: -.02em;
}
#screens .section-head p{
margin: 0 auto;
max-width: 70ch;
color: rgba(235,245,255,.78);
}
#screens .screensCta{
margin-top: 2.2rem;
}
#screens .screensCard{
max-width: 1120px;
margin: 0 auto;
padding: 2.6rem 2.6rem;
border-radius: 28px;
border: 1px solid rgba(255,255,255,.12);
background: linear-gradient(180deg, rgba(10,16,28,.78), rgba(10,16,28,.60));
box-shadow: 0 30px 90px rgba(0,0,0,.45);
backdrop-filter: blur(14px);
text-align: center;
position: relative;
overflow: hidden;
}
#screens .screensCard::before{
content:"";
position:absolute;
inset:-2px;
background: radial-gradient(520px 280px at 50% 10%, rgba(92,200,255,.12), transparent 62%);
opacity: .9;
pointer-events:none;
}
#screens .screensBadge{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55rem;
padding:.45rem .85rem;
border-radius:999px;
font-size:.82rem;
letter-spacing:.02em;
color: rgba(230,245,255,.92);
border: 1px solid rgba(255,255,255,.16);
background: rgba(0,0,0,.25);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
margin: 0 auto 1.05rem;
position: relative;
z-index: 1;
}
#screens .screensBadge .dot{
width:.55rem;
height:.55rem;
border-radius:999px;
background: rgba(34,197,94,.95);
box-shadow: 0 0 18px rgba(34,197,94,.55);
}
#screens .screensCard h3{
margin: .15rem 0 .65rem;
font-size: 1.35rem;
}
#screens .screensCard p.muted{
margin: 0 auto 1.35rem;
max-width: 78ch;
color: rgba(235,245,255,.78);
}
#screens .screensHint{
margin-top: 1.1rem;
font-size: .9rem;
color: rgba(235,245,255,.70);
position: relative;
z-index: 1;
}
/* Shared stage card (used in Pricing / Tutorials / FAQ / Support to match Screenshots card style) */
.sectionStage{
margin-top:2.2rem;
display:flex;
justify-content:center;
}
.stageCard{
width:min(var(--container), 100%);
padding:2.2rem 2.2rem;
border-radius:28px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg, rgba(10,16,28,.65), rgba(10,16,28,.40));
box-shadow:0 26px 80px rgba(0,0,0,.42);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
position:relative;
overflow:hidden;
}
.stageCard::before{
content:"";
position:absolute;
inset:-2px;
background:radial-gradient(520px 320px at 20% 10%, rgba(92,200,255,.10), transparent 60%);
opacity:.9;
pointer-events:none;
}
.stageCard > *{
position:relative;
z-index:1;
}
@media (max-width: 700px){
.stageCard{ padding:1.35rem; }
}
/* =========================================================
LIGHT BACKGROUND MODE OVERRIDES
(replaces dark "Aura" stage styling with clean light glass)
========================================================= */
header{
background: rgba(255,255,255,.72) !important;
border-bottom: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.brand .name{ color: rgba(15,23,42,.92) !important; }
.brand .sub{ color:#1A64FF !important; }
.links a{ color: rgba(15,23,42,.78) !important; }
.links a:hover{ color: rgba(0,123,255,.95) !important; }
.menuBtn{
color: rgba(15,23,42,.78) !important;
border: 1px solid rgba(15,23,42,.14) !important;
background: rgba(255,255,255,.60) !important;
}
.menuBtn:hover{ background: rgba(255,255,255,.82) !important; }
.hero-panel{
border: 1px solid rgba(15,23,42,.10) !important;
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.62)) !important;
box-shadow: 0 24px 80px rgba(2,6,23,.10) !important;
}
.hero-subline{ color: rgba(15,23,42,.78) !important; }
.hero-points{ color: rgba(15,23,42,.74) !important; }
.hero-footnote{ color: rgba(15,23,42,.62) !important; }
.hero-pill{
color: rgba(15,23,42,.74) !important;
border: 1px solid rgba(15,23,42,.12) !important;
background: rgba(255,255,255,.70) !important;
}
.badge{
color: rgba(15,23,42,.70) !important;
border: 1px solid rgba(15,23,42,.12) !important;
background: rgba(255,255,255,.66) !important;
}
.logo-dock{
border: 1px solid rgba(15,23,42,.12) !important;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64)) !important;
box-shadow: 0 24px 80px rgba(2,6,23,.12) !important;
}
.logo-dock__title{ color: rgba(15,23,42,.92) !important; }
.logo-dock__sub{ color: rgba(0,123,255,.92) !important; }
.logo-dock__hint{ color: rgba(15,23,42,.62) !important; }
/* Keep a subtle dark-ish stage so the white icon still pops */
.logo-dock__stage{
background: linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.18)) !important;
border: 1px solid rgba(15,23,42,.12) !important;
}
.section-head{
border-radius: 24px !important;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60)) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 18px 55px rgba(2,6,23,.08) !important;
}
.section-head{
padding: 1.35rem 1.6rem !important; /* ensures content sits inside the card */
}
.section-head p{
margin: .35rem 0 0 !important; /* prevents the paragraph margin escaping the card */
max-width: 100% !important; /* ensure it wraps inside */
}
.section-head p,
.features .section-head p,
#screens .section-head p{
color: rgba(15,23,42,.72) !important;
text-shadow: none !important;
}
/* Remove the heavy dark wash behind "How it works" */
#how::before{
background:
radial-gradient(1200px 600px at 20% 20%, rgba(0,123,255,.12), rgba(0,0,0,0) 60%),
radial-gradient(900px 520px at 75% 35%, rgba(0,216,255,.10), rgba(0,0,0,0) 62%) !important;
opacity: .95 !important;
}
/* Stage-style cards (Pricing / Tutorials / FAQ / Support) */
.stageCard,
#screens .screensCard,
.priceCard{
border: 1px solid rgba(15,23,42,.10) !important;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60)) !important;
box-shadow: 0 18px 60px rgba(2,6,23,.10) !important;
}
#screens .screensCard p.muted,
#screens .screensHint{
color: rgba(15,23,42,.70) !important;
}
/* ---------------------------------------------------------
Light-mode readability fixes for index sections
(Features / Pricing / Tutorials / FAQ / Support)
Pure CSS overrides — does not change functionality.
--------------------------------------------------------- */
/* Light cards everywhere (Feature cards + misc cards) */
section:not(.hero) .card{
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 18px 55px rgba(2,6,23,.08) !important;
}
section:not(.hero) .card::before{
background:
radial-gradient(600px 220px at 20% 0%, rgba(0,123,255,.12), rgba(0,0,0,0) 60%),
radial-gradient(520px 240px at 80% 20%, rgba(0,216,255,.10), rgba(0,0,0,0) 62%) !important;
opacity: .90 !important;
}
section:not(.hero) .card h3,
section:not(.hero) .card h4{
color: rgba(15,23,42,.92) !important;
text-shadow: none !important;
}
section:not(.hero) .card p{
color: rgba(15,23,42,.70) !important;
}
/* General "muted" text in non-hero sections */
section:not(.hero) .muted{
color: rgba(15,23,42,.62) !important;
text-shadow: none !important;
}
/* Pricing bullets */
section:not(.hero) .bullets li{
color: rgba(15,23,42,.78) !important;
}
/* Tutorials video cards */
.videoCard{
background: rgba(255,255,255,.70) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 14px 44px rgba(2,6,23,.08) !important;
}
.videoCard:hover{
box-shadow: 0 22px 70px rgba(2,6,23,.14) !important;
}
.videoCard .thumb{
background: radial-gradient(520px 200px at 50% 20%, rgba(0,123,255,.18), rgba(255,255,255,.02)) !important;
}
.videoCard .play{
border: 1px solid rgba(15,23,42,.14) !important;
background: rgba(255,255,255,.62) !important;
box-shadow: 0 0 30px rgba(0,123,255,.18) !important;
color: rgba(15,23,42,.72) !important;
}
.videoCard .meta .s{
color: rgba(15,23,42,.64) !important;
}
/* FAQ items */
.faq details{
background: rgba(255,255,255,.70) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 14px 44px rgba(2,6,23,.06) !important;
}
.faq summary{
color: rgba(15,23,42,.90) !important;
text-shadow: none !important;
}
.faq .answer{
color: rgba(15,23,42,.72) !important;
}
/* FAQ + / - button */
.faq summary .plus{
border: 1px solid rgba(26,100,255,.22) !important;
background: rgba(26,100,255,.12) !important;
color: rgba(26,100,255,.92) !important;
}
.faq details[open] summary .plus{
border-color: rgba(16,185,129,.38) !important;
background: rgba(16,185,129,.14) !important;
color: rgba(16,185,129,.92) !important;
}
/* Support form readability */
#support .form{
background: rgba(255,255,255,.78) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 18px 55px rgba(2,6,23,.08) !important;
}
#support label{
color: rgba(15,23,42,.80) !important;
text-shadow: none !important;
}
#support input,
#support textarea,
#support select{
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(15,23,42,.16) !important;
color: rgba(15,23,42,.92) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.60) !important;
}
#support input::placeholder,
#support textarea::placeholder{
color: rgba(15,23,42,.45) !important;
}
#support input:focus,
#support textarea:focus,
#support select:focus{
outline: none !important;
border-color: rgba(0,123,255,.45) !important;
box-shadow: 0 0 0 4px rgba(0,123,255,.14) !important;
}
/* SUPPORT layout fixes */
#support .supportWrap{
align-items: stretch; /* make both columns same height */
}
#support .supportLeft{
display: flex;
flex-direction: column;
align-items: flex-start; /* left align */
text-align: left;
gap: .65rem;
min-height: 100%;
padding-right: 1.2rem;
}
#support .supportLeft h3{
margin: 0.9rem 0 0.25rem;
}
#support .supportLeft h3:first-child{
margin-top: 0;
}
#support .supportActions{
margin-top: auto; /* pushes buttons to bottom */
display: flex;
gap: 14px;
padding-top: 1.2rem;
}
#support .supportEmail{
font-weight: 900;
color: rgba(0,123,255,.92);
text-decoration: none;
}
#support .supportEmail:hover{
text-decoration: underline;
}
/* ===== Glass cube: see-through + back edges (wireframe overlay) ===== */
/* 1) Ensure faces don't hide their reverse side */
.whyFace{
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
/* 2) If your frosted overlays are strong, reduce them */
.whyFace::before{ opacity: .36; } /* was likely ~.95 in older style */
.whyFace::after { opacity: .24; } /* was likely ~.85 in older style */
/* 3) Draw front + back edge frames (this is what makes back edges visible) */
.whyCube::before,
.whyCube::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
/* Use your existing “glass border / glow” vibe */
border:1px solid var(--glassBorder, rgba(2,132,199,.22));
box-shadow:
0 0 18px var(--glassEdgeGlowA, rgba(56,189,248,.18)),
inset 0 0 14px rgba(255,255,255,.10);
opacity:.65; /* overall wire visibility */
border-radius:0px;
}
/* front frame */
.whyCube::before{
transform: translateZ(var(--half));
}
/* back frame */
.whyCube::after{
transform: translateZ(calc(var(--half) * -1));
opacity:.38; /* back edges should be fainter */
}
/* ------------------------------------------------------------
Inline hero message (floats — does NOT affect layout)
Tweak these 3 knobs to position the message:
--heroMsgTop : vertical offset inside the hero card
--heroMsgLeft : where the message starts (push right/left)
--heroMsgRight: right padding inside the hero card
------------------------------------------------------------ */
.hero-panel{
position: relative;
--heroMsgTop: 5.90rem;
--heroMsgLeft: 14%;
--heroMsgRight: 32rem;
}
.hero-inlineMsg{
position: absolute;
top: var(--heroMsgTop);
left: var(--heroMsgLeft);
right: var(--heroMsgRight);
text-align: right;
z-index: 4;
pointer-events: none;
}
.hero-inlineBrand{
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: #1A64FF;
font-size: 1.50rem;
line-height: 1.05;
}
.hero-inlineText{
margin-top: .25rem;
font-weight: 900;
color: #000000; /* dark magenta */
font-size: 1.15rem;
line-height: 1.15;
}
@media (max-width: 980px){
.hero-inlineMsg{
position: static;
left: auto; right: auto; top: auto;
text-align: center;
margin: 0 0 1.25rem 0;
pointer-events: auto;
}
}
/* =========================================================
HERO MID VIDEO (between left title and right inline message)
========================================================= */
.hero-panel{
/* easy tuning knobs */
--midVidTop: 6.2rem; /* move up/down */
--midVidLeft: 45%; /* move left/right (start point) */
--midVidW: 280px; /* size */
--midVidH: 170px; /* size */
}
.hero-midVideo{
position:absolute;
top: var(--midVidTop);
left: var(--midVidLeft);
width: var(--midVidW);
height: var(--midVidH);
transform: translateX(-50%);
z-index: 3;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
border: 1px solid rgba(80,160,255,.22);
backdrop-filter: blur(14px) saturate(170%);
box-shadow: 0 26px 70px rgba(2,6,23,.12), 0 10px 22px rgba(2,6,23,.06);
overflow:hidden;
display:grid;
place-items:center;
}
.hero-midVideoEl{
width:100%;
height:100%;
object-fit: cover;
display:block;
opacity: 1; /* hidden until play */
pointer-events:none;
}
.hero-midVideo.is-playing .hero-midVideoEl{
opacity: 1;
pointer-events:auto;
}
.hero-midVideoPlay{
position:absolute;
inset:auto;
width:56px;
height:56px;
border-radius:999px;
border:1px solid rgba(80,160,255,.35);
background: rgba(255,255,255,.72);
box-shadow: 0 14px 30px rgba(2,6,23,.16);
cursor:pointer;
font-weight:900;
font-size:18px;
line-height:56px;
}
.hero-midVideo.is-playing .hero-midVideoPlay{
opacity: 0;
pointer-events:none;
}
/* Mobile: don’t float in the middle */
@media (max-width: 980px){
.hero-midVideo{
position: static;
transform:none;
margin: 0 auto 1.1rem auto;
width: min(520px, 92%);
height: 200px;
}
.hero-midVideoEl{ opacity:1; pointer-events:auto; }
.hero-midVideoPlay{ opacity:0; pointer-events:none; }
}
/* =========================================================
WHY LOCAL (hero-style light card + angled blue frame)
========================================================= */
#why-local{ padding-top:6.4rem; padding-bottom:6.4rem; }
#why-local .whyLocalSplit{
display:grid;
grid-template-columns: 1.12fr .88fr;
gap:2.2rem;
align-items:center;
}
#why-local .whyLocalPanel{
background: rgba(255,255,255,0.86);
border: 1px solid rgba(15,23,42,0.10);
border-radius: 28px;
padding: 3rem 2.8rem;
box-shadow: var(--shadow2);
}
#why-local .whyLocalPanel h2{
font-size: clamp(2.2rem, 3.4vw, 3.1rem);
line-height: 1.05;
letter-spacing: -.03em;
margin-bottom: 1.6rem;
}
#why-local .whyLocalPanel p{ color: rgba(15,23,42,0.82); }
#why-local .whyLocalPanel .muted{ color: rgba(15,23,42,0.66) !important; }
/* Intro points: small icon + emphasised paragraph, stacked */
#why-local .wlIntroRow{
display: flex;
align-items: flex-start;
gap: 1.15rem;
padding: 1.15rem 0;
border-top: 1px solid rgba(15,23,42,0.07);
}
#why-local .wlIntroRow:first-of-type{ border-top: 0; padding-top: .3rem; }
#why-local .wlIntroIcon{
flex: 0 0 auto;
width: 58px; height: 58px;
border-radius: 16px;
display: grid; place-items: center;
background: rgba(26,100,255,0.08);
border: 1px solid rgba(26,100,255,0.16);
box-shadow: 0 12px 28px rgba(26,100,255,0.14);
}
#why-local .wlIntroIcon svg{ width: 34px; height: 34px; display: block; }
#why-local .wlIntroRow p{
margin: 0;
font-size: clamp(1.14rem, 1.35vw, 1.32rem);
line-height: 1.6;
font-weight: 500;
}
#why-local .wlIntroRow p strong{ color: #0d1326; font-weight: 800; }
#why-local .whyLocalBenefits{
margin-top:1.35rem;
display:grid;
grid-template-columns: 1fr 1fr;
gap:.95rem 1rem;
}
#why-local .benefit{
display:flex;
gap:.75rem;
align-items:flex-start;
padding:.92rem .95rem;
background: rgba(15,23,42,0.04);
border: 1px solid rgba(15,23,42,0.08);
border-radius: 18px;
}
#why-local .benefit .icon{
width:30px;
height:30px;
border-radius: 10px;
display:grid;
place-items:center;
font-weight:900;
color:#1A64FF;
background: rgba(26,100,255,0.12);
border:1px solid rgba(26,100,255,0.18);
flex: 0 0 auto;
box-shadow: 0 10px 26px rgba(26,100,255,0.14);
}
#why-local .benefit b{
display:block;
color: rgba(15,23,42,0.92);
font-size: .98rem;
margin-bottom:.1rem;
}
#why-local .benefit span{
display:block;
color: rgba(15,23,42,0.72);
font-size: .92rem;
line-height: 1.45;
}
#why-local .whyLocalArtWrap{
display:flex;
justify-content:center;
align-items:center;
}
#why-local .whyLocalFrame{
width:min(520px, 100%);
padding: 14px;
border-radius: 30px;
background: linear-gradient(180deg, rgba(26,100,255,0.22), rgba(26,100,255,0.10));
border: 3px solid rgba(26,100,255,0.72);
box-shadow:
0 28px 90px rgba(2,6,23,0.18),
0 14px 40px rgba(26,100,255,0.22);
transform: rotate(20deg);
position:relative;
}
#why-local .whyLocalFrame::after{
content:"";
position:absolute;
inset:7px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.55);
pointer-events:none;
}
#why-local .whyLocalFrame img{
width:100%;
height:auto;
display:block;
border-radius: 22px;
background:#fff;
border: 1px solid rgba(15,23,42,0.10);
}
/* THICK GLASS SLAB (upgrade) */
#why-local .whyLocalGlass{
width:min(560px, 100%);
border-radius: 30px;
padding: 18px;
/* glass body */
background:
linear-gradient(180deg,
rgba(255,255,255,0.72) 0%,
rgba(255,255,255,0.40) 55%,
rgba(255,255,255,0.28) 100%);
border: 1px solid rgba(26,100,255,0.20);
/* depth + bevel */
box-shadow:
0 36px 110px rgba(2,6,23,0.20),
0 18px 52px rgba(26,100,255,0.12),
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -10px 18px rgba(2,6,23,0.06);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
position:relative;
overflow:hidden;
}
/* specular highlights + soft caustics */
#why-local .whyLocalGlass::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 26% 18%, rgba(255,255,255,0.55), transparent 55%),
radial-gradient(circle at 82% 72%, rgba(26,100,255,0.18), transparent 58%),
linear-gradient(115deg,
rgba(255,255,255,0.18) 0%,
transparent 35%,
rgba(255,255,255,0.10) 60%,
transparent 100%);
pointer-events:none;
transform: rotate(-8deg);
}
/* inner rim = thickness illusion */
#why-local .whyLocalGlass::after{
content:"";
position:absolute;
inset: 5px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.55);
box-shadow:
inset 0 0 0 1px rgba(26,100,255,0.10),
inset 0 18px 40px rgba(255,255,255,0.18),
inset 0 -18px 40px rgba(2,6,23,0.05);
pointer-events:none;
}
/* keep your content above the glass effects */
#why-local .whyLocalGlass > *{
position: relative;
z-index: 1;
}
#why-local .whyLocalGlass .glassThickness{
position:absolute;
left: 26px;
right: 26px;
bottom: 8px;
height: 18px;
border-radius: 999px;
background: linear-gradient(180deg,
rgba(255,255,255,0.22),
rgba(2,6,23,0.06));
opacity: 0.35;
pointer-events:none;
z-index: 0;
}
#why-local .glassTop{
position:relative;
display:flex;
justify-content:flex-start;
padding: 2px 2px 14px 2px;
}
#why-local .glassTitle{
font-weight: 900;
color: rgba(15,23,42,0.92);
letter-spacing: .2px;
background: rgba(255,255,255,0.62);
border: 1px solid rgba(15,23,42,0.08);
padding: 10px 14px;
border-radius: 999px;
}
#why-local .glassGrid{
position:relative;
display:grid;
grid-template-columns: .85fr 1.15fr;
gap: 14px;
align-items:center;
}
#why-local .glassVisual svg{
transform: scale(1.12);
transform-origin: center;
}
#why-local .glassVisual img{
width:100%;
height:auto;
display:block;
}
#why-local .glassVisual img{
transform: scale(1.50);
transform-origin: center;
}
#why-local .glassBullets{
min-height: 168px;
padding: 10px 8px;
}
#why-local .glassBullet{
display:flex;
gap:10px;
align-items:flex-start;
margin: 8px 0;
color: rgba(15,23,42,0.86);
font-size: .98rem;
line-height: 1.35;
}
#why-local .glassBullet .check{
width: 22px; height: 22px;
border-radius: 9px;
display:grid; place-items:center;
background: rgba(26,100,255,0.12);
border: 1px solid rgba(26,100,255,0.22);
color:#1A64FF;
font-weight: 900;
flex: 0 0 auto;
}
#why-local .glassBullet .txt.typing::after{
content:"";
display:inline-block;
width: 8px;
height: 1.05em;
margin-left: 3px;
border-right: 2px solid rgba(26,100,255,0.85);
animation: caretBlink .85s steps(1) infinite;
transform: translateY(2px);
}
@keyframes caretBlink{ 50%{ opacity:0; } }
#why-local .glassVisual svg{
width:100%;
height:auto;
display:block;
filter: saturate(1.05);
animation: floaty 6.5s ease-in-out infinite;
}
@keyframes floaty{
0%,100%{ transform: translateY(0px); }
50%{ transform: translateY(-6px); }
}
/* Reduced motion: no floating, no typing caret */
@media (prefers-reduced-motion: reduce){
#why-local .glassVisual svg{ animation:none; }
#why-local .glassBullet .txt.typing::after{ display:none; }
}
/* Screen-reader-only helper */
.sr-only{
position:absolute;
width:1px; height:1px;
padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* =========================================================
HOW IT WORKS — match "Why Local" light cards
========================================================= */
#how{ padding-top:5.8rem; padding-bottom:5.8rem; }
#how::before{ background:none !important; }
#how > .container > h2.center{
font-family: "Orbitron","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: .02em;
color: rgba(15,23,42,0.92) !important;
font-size: clamp(2.1rem,3.2vw,3.0rem);
margin-bottom:.55rem;
}
#how > .container > p.lead{
color: rgba(15,23,42,0.68) !important;
margin: 0 auto 1.8rem;
max-width: 74ch;
}
#how .panel{
background: rgba(255,255,255,0.86) !important;
border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: var(--shadow2) !important;
backdrop-filter: blur(10px) saturate(115%) !important;
}
#how .panel h3{ color: rgba(15,23,42,0.92) !important; }
#how .panel p{ color: rgba(15,23,42,0.74) !important; }
#how .panel .muted{ color: rgba(15,23,42,0.62) !important; }
#how .timeline{ gap:1rem; }
#how .timeline .step{
background: rgba(15,23,42,0.04) !important;
border: 1px solid rgba(15,23,42,0.10) !important;
}
#how .timeline .step h3{ color: rgba(15,23,42,0.92) !important; }
#how .timeline .step p{ color: rgba(15,23,42,0.72) !important; }
/* Click hint for the left-side steps (the ones that open detailed guides) */
#how .step-link{
position:relative;
padding-right: 3.25rem;
}
#how .step-link:hover{
background: rgba(26,100,255,0.06) !important;
border-color: rgba(26,100,255,0.28) !important;
box-shadow: 0 18px 55px rgba(2,6,23,0.12), 0 0 0 1px rgba(26,100,255,0.10) inset;
}
#how .step-link::after{
content:"➜";
position:absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 14px;
display:grid;
place-items:center;
font-weight: 900;
color:#1A64FF;
background: rgba(26,100,255,0.12);
border: 1px solid rgba(26,100,255,0.22);
box-shadow: 0 10px 26px rgba(26,100,255,0.18);
animation: howHintPulse 1.8s ease-in-out infinite;
}
.hero .hero-sub{
color:#111 !important;
opacity:1 !important;
}
@keyframes howHintPulse{
0%,100%{ transform: translateY(-50%) translateX(0); box-shadow: 0 10px 26px rgba(26,100,255,0.16); }
50%{ transform: translateY(-50%) translateX(4px); box-shadow: 0 16px 38px rgba(26,100,255,0.30); }
}
@media (prefers-reduced-motion: reduce){
#how .step-link::after{ animation:none; }
}
/* Mobile: avoid overlap */
@media (max-width: 640px){
#how .step-link{ padding-right: 1.25rem; }
#how .step-link::after{ display:none; }
}
#how .card{
background: rgba(15,23,42,0.04) !important;
border: 1px solid rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(2,6,23,0.10) !important;
}
#how .card h3{ color: rgba(15,23,42,0.92) !important; }
#how .card p{ color: rgba(15,23,42,0.72) !important; }
/* Responsive */
@media (max-width: 980px){
#why-local .whyLocalSplit{ grid-template-columns: 1fr; }
#why-local .whyLocalBenefits{ grid-template-columns: 1fr; }
#why-local .whyLocalFrame{ transform: rotate(0deg); }
}
/* =========================================================
HERO — CLEAN 3-COLUMN LAYOUT (authoritative)
Recreates the preferred look (headline left, video + message
center, logo + cube right) but as a real grid so nothing can
overlap, and capped so it never spills on ultrawide.
The cube's own 3D math is untouched.
========================================================= */
/* Panel: centered, width-capped, content clipped to rounded corners. */
.hero-panel{
width: 100%;
max-width: min(1560px, var(--container));
margin: 0 auto;
position: relative;
overflow: hidden;
padding: clamp(1.6rem, 2.4vw, 2.8rem);
}
/* Three real columns: copy | center(video+message) | visual.
Grid columns cannot overlap, so the headline/video collision
from before is structurally impossible now. */
.hero-grid{
display: grid;
grid-template-columns: 1.25fr 0.85fr 0.95fr;
gap: clamp(1.25rem, 2.2vw, 2.2rem);
align-items: center;
}
/* ---- LEFT: copy ---- */
.hero-copy{ min-width: 0; }
.hero-panel h1{
max-width: none;
font-size: clamp(1.9rem, 2.7vw, 2.85rem); /* fits the column without mid-word breaks */
text-wrap: balance;
}
/* Shorten the hero a touch so the page + CTA fit above the fold on a
standard ~900px-tall monitor. Hero cube is slightly smaller than the
large Why-Local cube; geometry stays correct because --half tracks it. */
.hero .hero-visualStack{
--cubeSize: clamp(140px, 13vw, 220px);
}
/* ---- CENTER: message on top, video below — both in flow ---- */
.hero-center{
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.2rem;
}
/* Message card: was an absolute overlay; now a clean glass feature card
that matches the site's aesthetic instead of pasted bold text. */
.hero-inlineMsg{
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
pointer-events: auto;
z-index: auto;
width: 100%;
max-width: 360px;
text-align: left;
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
border: 1px solid rgba(80,160,255,.22);
border-radius: 18px;
padding: 1.1rem 1.25rem 1.2rem;
box-shadow:
0 18px 50px rgba(2,6,23,.10),
0 2px 6px rgba(2,6,23,.05),
inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
}
.hero-msgHead{
display: flex;
flex-direction: column;
gap: .15rem;
padding-bottom: .85rem;
margin-bottom: .85rem;
border-bottom: 1px solid rgba(15,23,42,.10);
}
.hero-msgKicker{
font-weight: 800;
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #1A64FF;
}
.hero-msgTitle{
font-weight: 800;
font-size: clamp(1.05rem, 1.25vw, 1.25rem);
line-height: 1.2;
letter-spacing: -.01em;
color: rgba(15,23,42,.95);
}
.hero-msgList{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .55rem;
}
.hero-msgList li{
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: .95rem;
line-height: 1.35;
font-weight: 600;
color: rgba(15,23,42,.82);
}
.hero-msgList li .i{
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin-top: .08rem;
display: grid;
place-items: center;
border-radius: 7px;
font-size: .72rem;
font-weight: 900;
color: #1A64FF;
background: rgba(26,100,255,.12);
border: 1px solid rgba(26,100,255,.22);
}
.hero-msgFoot{
margin-top: .95rem;
padding-top: .8rem;
border-top: 1px solid rgba(15,23,42,.10);
font-weight: 800;
font-size: .92rem;
letter-spacing: .01em;
color: #1A64FF;
text-align: center;
}
/* Video: was an absolute overlay; now a normal block under message. */
.hero-midVideo{
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
transform: none !important;
width: 100%;
max-width: 320px;
height: auto;
aspect-ratio: 16 / 10;
}
/* ---- RIGHT: logo + cube, contained ---- */
.hero-visual{
position: relative;
right: auto !important;
min-width: 0;
display: block; /* container for absolute logo + flowing cube */
align-self: stretch; /* take full row height so logo can pin to top */
}
/* The stack fills the visual cell; logo pins top-right, cube sits lower. */
.hero-visualStack{
position: relative;
width: 100%;
height: 100% !important;
min-height: 360px;
margin: 0 auto;
display: block;
}
/* Logo pinned to the top-right corner of the visual area, high up near
the panel's top edge and clearly above the cube. The three.js canvas
simply fills this box, so size/position are controlled here. */
.hero-visualStack .heroLogoFloat{
position: absolute !important;
top: 0 !important;
right: 0.5rem !important;
left: auto !important; bottom: auto !important;
width: clamp(110px, 11vw, 165px);
height: clamp(110px, 11vw, 165px);
z-index: 3;
}
/* Cube sits in the lower-middle of the visual area, centered. It is
lifted well clear of the panel's bottom edge so that when it spins,
its projected corners never dip below the panel and get clipped.
Geometry is preserved: width/height = --cubeSize drives --half. */
.hero-visualStack .whyCubeStage{
position: absolute !important;
top: auto !important;
bottom: clamp(4.5rem, 8vh, 7rem) !important;
left: 50% !important;
transform: translateX(-50%);
width: var(--cubeSize);
height: var(--cubeSize);
margin: 0;
z-index: 2;
}
/* ---- RESPONSIVE ---- */
/* Large but not ultrawide: keep 3 columns, just tighten. */
@media (max-width: 1200px){
.hero-grid{ grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 1.4rem; }
}
/* Tablet: drop the center column below, two columns on top. */
@media (max-width: 980px){
.hero-grid{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"copy visual"
"center center";
gap: 1.6rem;
}
.hero-copy{ grid-area: copy; }
.hero-visual{ grid-area: visual; }
.hero-center{ grid-area: center; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.hero-inlineMsg{ flex: 1 1 240px; }
.hero-midVideo{ flex: 1 1 240px; max-width: 360px; }
/* Revert visual to normal flow: logo above cube, both centered. */
.hero-visual{ display: flex; justify-content: center; align-items: center; }
.hero-visualStack{
height: auto !important;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.hero-visualStack .heroLogoFloat{
position: relative !important;
top: auto !important; right: auto !important;
align-self: center;
}
.hero-visualStack .whyCubeStage{
position: relative !important;
top: auto !important; bottom: auto !important; left: auto !important;
transform: none;
margin: 0 auto;
}
}
/* Phone: everything in one centered column. */
@media (max-width: 700px){
.hero-grid{
grid-template-columns: 1fr;
grid-template-areas: "copy" "center" "visual";
text-align: center;
}
.hero-copy .actions{ justify-content: center; }
.hero-subline, .hero-points{ margin-left: auto; margin-right: auto; }
.hero-points{ display: inline-grid; text-align: left; }
.hero-center{ flex-direction: column; }
.hero-midVideo{ max-width: 420px; }
}
/* =========================================================
BOTTOM CTA + FOOTER — compact + clearly-clickable buttons
(authoritative; appended last so it wins)
Goal: stop the bottom third from eating vertical space, and
make the two CTA buttons read as real, hoverable buttons.
========================================================= */
/* Tighten the CTA band so it doesn't dominate the page. */
#download.cta{
padding-top: 1.75rem !important;
padding-bottom: 1.5rem !important;
}
#download.cta h2{
margin-bottom: 1.25rem;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.15;
}
#download .actions{ margin: 0 auto; }
/* Compact footer: less padding, tighter internal gaps. */
footer{
padding: 1.6rem 1rem 1.8rem !important;
}
footer .footLinks{ margin-top: .8rem !important; }
/* ---- CTA buttons: look and behave like real buttons ---- */
/* Primary (Download): solid, raised, obvious. */
#download .actions .btn,
.cta .actions .btn{
padding: .9rem 1.9rem;
border-radius: 14px;
font-weight: 800;
letter-spacing: .01em;
box-shadow: 0 10px 26px rgba(26,100,255,.32), 0 2px 6px rgba(2,6,23,.12);
transition: transform .2s cubic-bezier(.4,0,.2,1),
box-shadow .2s cubic-bezier(.4,0,.2,1),
filter .2s ease;
will-change: transform;
}
/* Primary hover/focus: lift + stronger glow so it clearly reacts. */
#download .actions .btn:not(.secondary):hover,
.cta .actions .btn:not(.secondary):hover{
transform: translateY(-3px) scale(1.04);
box-shadow: 0 18px 42px rgba(26,100,255,.48), 0 4px 10px rgba(2,6,23,.16);
filter: brightness(1.05);
}
#download .actions .btn:not(.secondary):active,
.cta .actions .btn:not(.secondary):active{
transform: translateY(-1px) scale(1.01);
}
/* Secondary (Ask us a question): give it a clear button skin that
visibly changes on hover instead of looking like flat text. */
#download .actions .btn.secondary,
.cta .actions .btn.secondary{
color: #0b3a73;
background: rgba(255,255,255,.78);
border: 1.5px solid rgba(26,100,255,.45);
box-shadow: 0 8px 22px rgba(2,6,23,.10);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#download .actions .btn.secondary:hover,
.cta .actions .btn.secondary:hover{
color: #fff;
background: linear-gradient(135deg, var(--blue), var(--blue-glow));
border-color: transparent;
transform: translateY(-3px) scale(1.04);
box-shadow: 0 18px 42px rgba(26,100,255,.40), 0 4px 10px rgba(2,6,23,.16);
}
#download .actions .btn.secondary:active,
.cta .actions .btn.secondary:active{
transform: translateY(-1px) scale(1.01);
}
/* Keyboard focus: visible ring for accessibility. */
#download .actions .btn:focus-visible,
.cta .actions .btn:focus-visible{
outline: 3px solid rgba(26,100,255,.55);
outline-offset: 3px;
}
/* ---- Footer links: clearly interactive on hover ---- */
footer .footLinks a{
color: #475569;
transition: color .18s ease, background .18s ease, border-color .18s ease;
}
footer .footLinks a:hover{
color: #1A64FF;
background: rgba(26,100,255,.10);
border-color: rgba(26,100,255,.30);
}
/* ---- Give the reclaimed vertical space back to the hero ---- */
.hero{
padding-bottom: 1rem !important;
}
/* =========================================================
HERO HEADLINE — 2026 refinement (authoritative)
Live pill dot, gradient accent on the key phrase, and a
subtle staggered entrance. Restrained: one accent only.
========================================================= */
/* Live status dot inside the eyebrow pill */
.hero-pill{ position: relative; }
.hero-pill__dot{
width: .5rem;
height: .5rem;
border-radius: 999px;
background: #16a34a; /* live green */
box-shadow: 0 0 0 0 rgba(22,163,74,.55);
flex: 0 0 auto;
margin-right: .15rem;
animation: heroDotPulse 2.4s ease-out infinite;
}
@keyframes heroDotPulse{
0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
70% { box-shadow: 0 0 0 .5rem rgba(22,163,74,0); }
100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
/* Headline: each line on its own row so the gradient phrase and the
stagger work cleanly. Optical tightening for a modern feel. */
.hero-h1{
display: flex;
flex-direction: column;
gap: .1em;
letter-spacing: -.035em;
text-wrap: balance;
}
.hero-h1 .line{ display: block; }
/* Gradient accent on the key phrase — the one splash of color. */
.hero-h1 .accentGrad{
background: linear-gradient(105deg, var(--blue) 0%, var(--blue-glow) 55%, #9b6bff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* subtle depth so the gradient text doesn't look flat */
filter: drop-shadow(0 6px 18px rgba(59,160,255,.22));
}
/* Staggered fade-up entrance for pill + each headline line + subline. */
@media (prefers-reduced-motion: no-preference){
.hero-copy .hero-pill,
.hero-h1 .line,
.hero-copy .hero-subline{
opacity: 0;
transform: translateY(14px);
animation: heroRise .7s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-copy .hero-pill{ animation-delay: .05s; }
.hero-h1 .line:nth-child(1){ animation-delay: .14s; }
.hero-h1 .line:nth-child(2){ animation-delay: .22s; }
.hero-h1 .line:nth-child(3){ animation-delay: .30s; }
.hero-h1 .line:nth-child(4){ animation-delay: .38s; }
.hero-copy .hero-subline{ animation-delay: .48s; }
}
@keyframes heroRise{
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
HERO TAGS — iconed feature chips (replaces the old pill)
A row of distinct glass chips, each with a brand-blue icon.
========================================================= */
.hero-tags{
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 .2rem;
}
.hero-tag{
display: inline-flex;
align-items: center;
gap: .42rem;
padding: .42rem .8rem .42rem .62rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
letter-spacing: -.005em;
color: rgba(15,23,42,.82);
background: rgba(255,255,255,.72);
border: 1px solid rgba(26,100,255,.18);
box-shadow: 0 6px 18px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.85);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
transition: transform .2s cubic-bezier(.22,1,.36,1),
box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.hero-tag svg{
width: 1rem;
height: 1rem;
flex: 0 0 auto;
fill: none;
stroke: var(--blue);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* the star + shield read better filled */
.hero-tag:nth-child(1) svg,
.hero-tag:nth-child(4) svg{
fill: rgba(26,100,255,.14);
}
.hero-tag:hover{
transform: translateY(-2px);
background: rgba(255,255,255,.92);
border-color: rgba(26,100,255,.38);
box-shadow: 0 12px 26px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Carry the staggered entrance over to the new chips. */
@media (prefers-reduced-motion: no-preference){
.hero-tags .hero-tag{
opacity: 0;
transform: translateY(12px);
animation: heroRise .6s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-tags .hero-tag:nth-child(1){ animation-delay: .04s; }
.hero-tags .hero-tag:nth-child(2){ animation-delay: .10s; }
.hero-tags .hero-tag:nth-child(3){ animation-delay: .16s; }
.hero-tags .hero-tag:nth-child(4){ animation-delay: .22s; }
}
/* =========================================================
PAYROLL FEATURE — hero tag pip + showcase strip (2026)
Modern US-SaaS style: a labeled "new capability" panel with
a compact grid of capability chips. Plus space reclaimed
from the bullets and the bottom CTA so it fits cleanly.
========================================================= */
/* "NEW" pip on the Payroll hero tag */
.hero-tag--new{
border-color: rgba(26,100,255,.40);
background: rgba(235,243,255,.9);
}
.hero-tag__pip{
font-size: .6rem;
font-weight: 900;
letter-spacing: .08em;
color: #fff;
background: linear-gradient(135deg, var(--blue), #9b6bff);
padding: .12rem .38rem;
border-radius: 999px;
margin-left: .1rem;
}
/* Tighten the hero bullets so the taller hero reclaims space. */
.hero-points{ margin-top: .8rem; }
.hero-points li{
margin: .28rem 0 !important;
line-height: 1.35 !important;
}
/* ---- Payroll showcase strip ---- */
.payrollStrip{
margin: 1.1rem 0 0;
padding: .95rem 1rem 1.05rem;
border-radius: 16px;
border: 1px solid rgba(26,100,255,.22);
background:
radial-gradient(120% 140% at 0% 0%, rgba(26,100,255,.07), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
box-shadow: 0 14px 38px rgba(2,6,23,.07), inset 0 1px 0 rgba(255,255,255,.85);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
}
.payrollStrip__head{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem;
margin-bottom: .8rem;
}
.payrollStrip__badge{
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .72rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
color: #0b3a73;
background: rgba(26,100,255,.12);
border: 1px solid rgba(26,100,255,.25);
padding: .3rem .6rem;
border-radius: 999px;
}
.payrollStrip__badge svg{ width: .95rem; height: .95rem; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.payrollStrip__tagline{
font-size: .92rem;
font-weight: 700;
color: rgba(15,23,42,.7);
}
.payrollStrip__grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .55rem;
}
.payrollChip{
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .65rem;
border-radius: 12px;
background: rgba(255,255,255,.7);
border: 1px solid rgba(15,23,42,.08);
transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.payrollChip:hover{
transform: translateY(-2px);
border-color: rgba(26,100,255,.32);
box-shadow: 0 10px 22px rgba(2,6,23,.09);
}
.payrollChip svg{
width: 1.45rem; height: 1.45rem; flex: 0 0 auto;
fill: none; stroke: var(--blue); stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
}
.payrollChip b{
display: block;
font-size: .9rem;
font-weight: 800;
color: rgba(15,23,42,.9);
line-height: 1.15;
}
.payrollChip span{
display: block;
font-size: .78rem;
color: rgba(15,23,42,.6);
line-height: 1.2;
margin-top: .05rem;
}
/* Stagger the payroll chips into the entrance animation. */
@media (prefers-reduced-motion: no-preference){
.payrollStrip{
opacity: 0; transform: translateY(14px);
animation: heroRise .65s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: .56s;
}
}
/* On the stacked (tablet/mobile) hero, keep chips 2-up then 1-up. */
@media (max-width: 980px){
.payrollStrip{ max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 460px){
.payrollStrip__grid{ grid-template-columns: 1fr; }
}
/* ---- Reclaim more space from the bottom so the taller hero fits ---- */
#download.cta{
padding-top: 1.25rem !important;
padding-bottom: 1.1rem !important;
}
#download.cta h2{ margin-bottom: 1rem; }
footer{ padding: 1.2rem 1rem 1.4rem !important; }
/* =========================================================
HERO BALANCE — distribute right-side content over the now
taller copy column (payroll strip made the left column tall)
========================================================= */
.hero-grid{ align-items: stretch !important; }
/* Center column: spread message card + video top-to-bottom. */
.hero-center{
justify-content: space-between !important;
padding: .25rem 0;
}
/* Visual column: logo pinned top, cube sits lower but centered in the
lower half — fills the height instead of leaving a big middle gap. */
.hero .hero-visualStack{ min-height: 100% !important; }
.hero-visualStack .whyCubeStage{
bottom: clamp(5rem, 9vh, 8rem) !important;
}
/* =========================================================
CENTER COLUMN CARDS — VAT + Technology (replaces video)
Two purpose-built cards, each visually distinct from the
checklist card, so the column reads as a rich feature stack.
========================================================= */
/* Make the three center cards stack with even rhythm. */
.hero-center{ gap: 1rem !important; justify-content: flex-start !important; }
.hero-center > div{ width: 100%; max-width: 380px; }
/* ---------- VAT CARD: a mini "VAT return" ---------- */
.vatCard{
border-radius: 18px;
padding: 1rem 1.1rem 1.05rem;
background:
linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.82));
border: 1px solid rgba(26,100,255,.20);
box-shadow: 0 16px 44px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
position: relative;
overflow: hidden;
}
/* a thin accent bar on the left edge, like an official form */
.vatCard::before{
content:"";
position:absolute; left:0; top:0; bottom:0; width:4px;
background: linear-gradient(180deg, var(--blue), #9b6bff);
}
.vatCard__head{
display:flex; align-items:center; gap:.6rem;
padding-bottom:.7rem; margin-bottom:.7rem;
border-bottom:1px solid rgba(15,23,42,.10);
}
.vatCard__icon{
width:2.1rem; height:2.1rem; flex:0 0 auto;
display:grid; place-items:center; border-radius:10px;
background: rgba(26,100,255,.12); border:1px solid rgba(26,100,255,.24);
}
.vatCard__icon svg{ width:1.15rem; height:1.15rem; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vatCard__kicker{ display:block; font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#1A64FF; }
.vatCard__title{ display:block; font-size:1.02rem; font-weight:800; color:rgba(15,23,42,.92); line-height:1.2; }
.vatCard__rows{ display:grid; gap:.4rem; }
.vatRow{
display:flex; align-items:flex-start; gap:.6rem;
padding:.3rem .15rem; border-radius:8px;
transition: background .18s ease;
}
.vatRow:hover{ background: rgba(26,100,255,.06); }
.vatRow__dot{
flex:0 0 auto; width:.5rem; height:.5rem; border-radius:999px; margin-top:.42rem;
background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.14);
}
.vatRow__label{ font-size:.88rem; font-weight:600; color:rgba(15,23,42,.82); line-height:1.35; }
.vatRow__label em{ font-style:normal; font-weight:800; color:#1A64FF; }
.vatCard__foot{
margin-top:.7rem; padding-top:.65rem;
border-top:1px solid rgba(15,23,42,.10);
font-size:.8rem; color:rgba(15,23,42,.62); line-height:1.35;
}
/* ---------- TECH CARD: a stack diagram (light) ---------- */
.techCard{
border-radius: 18px;
padding: 1rem 1.1rem 1rem;
color: rgba(15,23,42,.9);
background:
radial-gradient(120% 130% at 100% 0%, rgba(155,107,255,.10), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.82));
border: 1px solid rgba(26,100,255,.20);
box-shadow: 0 16px 44px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
position: relative;
overflow: hidden;
}
.techCard__head{ margin-bottom:.75rem; }
.techCard__kicker{ display:block; font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#1A64FF; }
.techCard__title{ display:block; font-size:1.02rem; font-weight:800; color:rgba(15,23,42,.92); line-height:1.2; }
.techCard__stack{ display:grid; gap:.5rem; }
.techLayer{
display:flex; align-items:center; gap:.7rem;
padding:.6rem .7rem; border-radius:12px;
background: rgba(255,255,255,.7);
border:1px solid rgba(15,23,42,.08);
transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.techLayer:hover{ transform: translateX(3px); border-color: rgba(26,100,255,.32); box-shadow: 0 10px 22px rgba(2,6,23,.09); }
.techLayer__glyph{
width:2.1rem; height:2.1rem; flex:0 0 auto;
display:grid; place-items:center; border-radius:10px;
}
.techLayer--py .techLayer__glyph{ background: linear-gradient(135deg, rgba(55,118,171,.20), rgba(255,212,59,.22)); border:1px solid rgba(55,118,171,.20); }
.techLayer--pg .techLayer__glyph{ background: linear-gradient(135deg, rgba(51,103,145,.18), rgba(26,100,255,.18)); border:1px solid rgba(26,100,255,.20); }
.techLayer__glyph svg{ width:1.25rem; height:1.25rem; }
.techLayer--py .techLayer__glyph svg{ fill:#2b6cb0; }
.techLayer--pg .techLayer__glyph svg{ fill:none; stroke:#1A64FF; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.techLayer__txt b{ display:block; font-size:.9rem; font-weight:800; color:rgba(15,23,42,.9); line-height:1.15; }
.techLayer__txt span{ display:block; font-size:.76rem; color:rgba(15,23,42,.6); line-height:1.25; margin-top:.05rem; }
.techLayer__tag{
margin-left:auto; flex:0 0 auto;
font-size:.6rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
color:#0b3a73; background:rgba(26,100,255,.12);
border:1px solid rgba(26,100,255,.24); border-radius:999px;
padding:.16rem .42rem;
}
.techCard__foot{
display:flex; align-items:center; gap:.5rem;
margin-top:.75rem; padding-top:.65rem;
border-top:1px solid rgba(15,23,42,.10);
font-size:.82rem; font-weight:700; color:rgba(15,23,42,.7);
}
.techCard__pulse{
width:.55rem; height:.55rem; border-radius:999px; flex:0 0 auto;
background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.5);
animation: heroDotPulse 2.4s ease-out infinite;
}
/* Staggered entrance for the two new cards. */
@media (prefers-reduced-motion: no-preference){
.vatCard, .techCard{
opacity:0; transform: translateY(14px);
animation: heroRise .65s cubic-bezier(.22,1,.36,1) forwards;
}
.vatCard{ animation-delay:.30s; }
.techCard{ animation-delay:.42s; }
}
/* ---------- Bigger cube now that there's room ---------- */
.hero .hero-visualStack{
--cubeSize: clamp(185px, 17vw, 280px);
}
.hero-visualStack .whyCubeStage{
bottom: clamp(6rem, 10vh, 9rem) !important;
}
/* =========================================================
HERO MONITOR — tilted animated PC showing the dashboard
Sits in the visual column, above the cube. Pure CSS 3D.
========================================================= */
.heroMonitor{
position: absolute !important;
top: clamp(7rem, 13vh, 10.5rem);
left: 40%;
transform: translateX(-50%);
width: clamp(200px, 19vw, 300px);
z-index: 4; /* above cube */
perspective: 1200px;
pointer-events: none;
}
.heroMonitor__tilt{
position: relative;
transform-style: preserve-3d;
/* ~30° tilt: rotate around X and a touch of Y for a dynamic angle */
transform: rotateX(18deg) rotateY(-26deg) rotateZ(2deg);
animation: monitorFloat 7s ease-in-out infinite;
filter: drop-shadow(0 30px 40px rgba(2,6,23,.22));
}
@keyframes monitorFloat{
0%,100% { transform: rotateX(18deg) rotateY(-26deg) rotateZ(2deg) translateY(0); }
50% { transform: rotateX(16deg) rotateY(-22deg) rotateZ(1.5deg) translateY(-8px); }
}
/* Screen / bezel */
.heroMonitor__screen{
position: relative;
border-radius: 12px;
padding: 8px 8px 10px;
background: linear-gradient(160deg, #2a2f3a, #11151d);
border: 1px solid rgba(255,255,255,.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.3);
overflow: hidden;
}
.heroMonitor__bar{
display: flex; gap: 5px; padding: 1px 2px 6px;
}
.heroMonitor__bar i{
width: 7px; height: 7px; border-radius: 999px; display:block;
background: #ff5f57;
}
.heroMonitor__bar i:nth-child(2){ background:#febc2e; }
.heroMonitor__bar i:nth-child(3){ background:#28c840; }
.heroMonitor__screen img{
display: block;
width: 100%;
height: auto;
border-radius: 5px;
background: #fff;
}
.heroMonitor__glare{
position: absolute; inset: 8px 8px 10px;
border-radius: 5px;
background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Stand + base */
.heroMonitor__stand{
display:block; width: 14%; height: 16px; margin: 0 auto;
background: linear-gradient(180deg, #cdd6e4, #aab6c8);
transform: translateZ(-2px);
}
.heroMonitor__base{
display:block; width: 34%; height: 8px; margin: 0 auto;
border-radius: 0 0 8px 8px;
background: linear-gradient(180deg, #b7c2d3, #93a1b6);
box-shadow: 0 8px 14px rgba(2,6,23,.18);
}
/* The visual stack now holds: logo (top), monitor (upper-mid),
cube (lower). Anchor the cube below the monitor so they read as a
connected composition rather than leaving a big empty gap. */
.hero-visualStack .whyCubeStage{
top: 52% !important;
bottom: auto !important;
}
/* Entrance for the monitor */
@media (prefers-reduced-motion: no-preference){
.heroMonitor{
opacity: 0;
animation: heroRise .7s cubic-bezier(.22,1,.36,1) .5s forwards;
}
/* keep the float on the inner element so entrance + float don't clash */
}
@media (prefers-reduced-motion: reduce){
.heroMonitor__tilt{ animation: none; }
}
/* On stacked layouts, monitor returns to normal flow above the cube. */
@media (max-width: 980px){
.heroMonitor{
position: relative !important;
top: auto; left: auto; transform: none;
margin: 0 auto 1rem;
}
}
/* =========================================================
VISUAL STACK rebalance for: logo + monitor + cube
Logo: small, top-right corner. Monitor: upper-mid, centered.
Cube: lower. Keeps all three clear of each other.
========================================================= */
.hero-visualStack .heroLogoFloat{
width: clamp(90px, 9vw, 130px) !important;
height: clamp(90px, 9vw, 130px) !important;
top: 0 !important;
right: 0 !important;
z-index: 5 !important; /* above monitor corner if they ever meet */
}
/* =========================================================
REDESIGN v2 — Balabook/Xero-style spacious hero + scroll
feature sections. Authoritative; appended last.
========================================================= */
/* ---------- NEW HERO ---------- */
.hero2{
padding: clamp(9rem, 14vh, 13rem) 0 clamp(3rem, 6vh, 6rem);
background:
radial-gradient(1000px 500px at 80% -5%, rgba(92,200,255,.16), transparent 60%),
radial-gradient(800px 500px at 0% 10%, rgba(155,107,255,.08), transparent 55%);
}
.hero2-grid{
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
.hero2-copy{ min-width: 0; }
.hero2-eyebrow{
display: inline-flex; align-items: center; gap: .5rem;
font-size: .82rem; font-weight: 700; letter-spacing: .01em;
color: #0b3a73;
background: rgba(255,255,255,.7);
border: 1px solid rgba(26,100,255,.22);
padding: .45rem .85rem; border-radius: 999px;
margin-bottom: 1.4rem;
backdrop-filter: blur(8px);
}
.hero2-eyebrow__dot{
width: .5rem; height: .5rem; border-radius: 999px; background: #16a34a;
box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: heroDotPulse 2.4s ease-out infinite;
}
.hero2-h1{
margin: 0 0 1.3rem;
display: flex; flex-direction: column;
font-size: clamp(2.6rem, 5.2vw, 4.6rem);
line-height: 1.02;
letter-spacing: -.04em;
font-weight: 900;
color: #0d1326;
}
.hero2-h1 .accentGrad{
background: linear-gradient(105deg, var(--blue) 0%, var(--blue-glow) 50%, #9b6bff 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 18px rgba(59,160,255,.22));
}
.hero2-sub{
margin: 0 0 2rem;
max-width: 30rem;
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
line-height: 1.55;
color: rgba(15,23,42,.7);
}
.hero2-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
.hero2-actions .btn{ padding: .95rem 1.9rem; font-size: 1.02rem; border-radius: 14px; }
.hero2-foot{ font-size: .9rem; color: rgba(15,23,42,.5); font-weight: 600; }
/* Hero visual: cube + logo, sized like the earlier working version. */
.hero2-visual{
position: relative;
min-height: clamp(420px, 46vw, 620px);
display: block;
/* Matched EXACTLY to the why_local.html cube: --spinMs 30000ms with the JS
removing .is-anim at ~830ms and re-spinning every ~4300ms. This reproduces
the identical spin feel of the Why-Local page cube. */
--spinMs: 30000ms;
}
/* Logo: 20% bigger than before, shifted slightly left, clear of the cube. */
.hero2-visual .heroLogoFloat{
position: absolute !important;
top: 0 !important; right: 9% !important; left: auto !important; bottom: auto !important;
width: clamp(144px, 14.4vw, 228px); height: clamp(144px, 14.4vw, 228px);
z-index: 5;
}
/* Cube: sized for proper depth. IMPORTANT: no transform on this element —
it holds `perspective`, and a transform here flattens the 3D projection
and causes the intermittent "cut-off pyramid / inverted face" glitch.
Center/position with left offset instead. */
.hero2-visual .whyCubeStage{
position: absolute !important;
top: auto !important;
right: auto !important;
bottom: clamp(10rem, 3vh, 3rem) !important;
left: 0% !important; /* shifted left into the empty space */
transform: none !important; /* was translateX(-50%) — the bug */
margin: 0 !important;
/* Deeper perspective than the base 1100px: the cube here is ~25% larger,
so a shallow perspective exaggerated foreshortening and made interrupted
tilts look like a splayed trapezoid. A larger value keeps it cube-like. */
perspective: 1500px !important;
--cubeSize: clamp(225px, 22.5vw, 300px); /* +25% larger */
width: var(--cubeSize) !important; height: var(--cubeSize) !important;
/* Match the why_local.html cube EXACTLY: light DARITHMA-blue frosted glass.
These opaque fills make each face a real surface (not see-through), so
there's no mirrored back-face text bleeding through — the same clean look
as the Why-Local page cube. */
--glassFillA: rgba(170, 220, 255, .68);
--glassFillB: rgba(205, 235, 255, .54);
--glassBorder: rgba( 90, 170, 255, .32);
--glassEdgeGlowA: rgba(120, 200, 255, .45);
--glassEdgeGlowB: rgba( 60, 140, 230, .28);
}
/* ---------------------------------------------------------------
HERO CUBE — match the Why-Local page cube exactly (look + shadow).
Replaces the earlier crisp-wireframe treatment with the same frosted
solid-glass faces and soft shadows used on why_local.html.
--------------------------------------------------------------- */
.hero2-visual .whyFace{
box-shadow:
0 18px 64px rgba(2,6,23,.12),
0 0 18px rgba(255, 160, 255, .10),
inset 0 1px 0 rgba(255,255,255,.70),
inset 0 -16px 22px rgba(2,6,23,.06);
}
/* Entrance for hero copy */
@media (prefers-reduced-motion: no-preference){
.hero2-eyebrow, .hero2-h1 > span, .hero2-sub, .hero2-actions{
opacity: 0; transform: translateY(16px);
animation: heroRise .7s cubic-bezier(.22,1,.36,1) forwards;
}
.hero2-eyebrow{ animation-delay:.05s; }
.hero2-h1 > span:nth-child(1){ animation-delay:.14s; }
.hero2-h1 > span:nth-child(2){ animation-delay:.22s; }
.hero2-h1 > span:nth-child(3){ animation-delay:.30s; }
.hero2-h1 > span:nth-child(4){ animation-delay:.38s; }
.hero2-sub{ animation-delay:.48s; }
.hero2-actions{ animation-delay:.56s; }
}
/* ---------- SCROLL FEATURE SECTIONS ---------- */
.featureFlow{ position: relative; }
.featSec{
padding: clamp(3.5rem, 8vh, 7rem) 0;
}
.featSec--alt{
background: linear-gradient(180deg, rgba(234,243,255,.5), rgba(247,250,255,.5));
}
.featSec__grid{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
/* alternate: on --alt sections, art goes left, text right (zig-zag layout) */
.featSec--alt .featSec__text{ order: 2; }
.featSec--alt .featSec__art{ order: 1; }
.featSec__kicker{
display: inline-block;
font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
color: #1A64FF; margin-bottom: 1rem;
}
.featSec__kicker--new{
color: #fff; background: linear-gradient(135deg, var(--blue), #9b6bff);
padding: .3rem .7rem; border-radius: 999px; letter-spacing: .08em;
}
.featSec__h{
margin: 0 0 1.1rem;
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
line-height: 1.08; letter-spacing: -.03em; font-weight: 900;
color: #0d1326;
}
.featSec__p{
margin: 0 0 1.6rem;
font-size: clamp(1.12rem, 1.45vw, 1.32rem);
line-height: 1.75; color: rgba(15,23,42,.7);
max-width: 38rem;
}
.featSec__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.featSec__list li{
display: flex; align-items: flex-start; gap: .7rem;
font-size: clamp(1.06rem, 1.25vw, 1.18rem); line-height: 1.55;
color: rgba(15,23,42,.8); font-weight: 600;
}
.featSec__list li::before{
content: "✓";
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 1.3rem; height: 1.3rem; margin-top: .08rem;
border-radius: 999px;
background: rgba(34,197,94,.16);
border: 1px solid rgba(34,197,94,.4);
color: #16a34a;
font-size: .82rem; font-weight: 900;
}
.featSec__list li em{ font-style: normal; font-weight: 800; color: #1A64FF; }
.featSec__list li strong{ color: #0d1326; font-weight: 800; }
.featSec__art{ display: flex; justify-content: center; }
.featSec__art svg{
width: 100%; max-width: 620px; height: auto;
filter: drop-shadow(0 30px 60px rgba(13,40,90,.10));
}
/* Scroll reveal: sections rise as they enter view */
@media (prefers-reduced-motion: no-preference){
.featSec{ opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.featSec.active{ opacity: 1; transform: translateY(0); }
.featSec__art svg{ transition: transform .8s cubic-bezier(.22,1,.36,1) .1s; }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px){
.hero2-grid{ grid-template-columns: 1fr; text-align: center; }
.hero2-eyebrow{ margin-left: auto; margin-right: auto; }
.hero2-h1{ align-items: center; }
.hero2-sub{ margin-left: auto; margin-right: auto; }
.hero2-actions{ justify-content: center; }
.hero2-visual{ margin-top: 1rem; }
.featSec__grid{ grid-template-columns: 1fr; gap: 2rem; }
.featSec__text{ text-align: center; order: 1 !important; }
.featSec__art{ order: 2 !important; }
.featSec__kicker{ }
.featSec__p{ margin-left: auto; margin-right: auto; }
.featSec__list{ display: inline-grid; text-align: left; }
}
/* =========================================================
HERO CALLOUT — fills the empty hero space, links to the
industries page. Sits between logo (top) and cube (bottom),
toward the left of the visual column.
========================================================= */
.heroCallout{
position: relative;
z-index: 3;
margin-top: 1.6rem;
/* Wider than the copy column: spill to the right into the visual area so it
reads as a broad, thin banner under the "Windows 10/11…" line. */
width: calc(100% + clamp(60px, 22vw, 360px));
max-width: none;
display: flex;
align-items: center;
gap: 1.4rem;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
border: 1px solid rgba(26,100,255,.2);
border-radius: 16px;
padding: 1rem 1.3rem;
box-shadow: 0 18px 50px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
}
/* Left side: kicker + text stacked; right side: the button. */
.heroCallout__copy{ flex: 1 1 auto; min-width: 0; }
.heroCallout__kicker{
display: block;
font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
color: #1A64FF; margin-bottom: .3rem;
}
.heroCallout__text{
margin: 0;
font-size: .92rem; line-height: 1.4; font-weight: 500;
color: rgba(15,23,42,.72);
}
.heroCallout__btn{
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: .5rem;
padding: .7rem 1.15rem;
border-radius: 12px;
font-weight: 800; font-size: .92rem;
color: #fff; text-decoration: none;
white-space: nowrap;
background: linear-gradient(135deg, var(--blue), #1A64FF);
box-shadow: 0 10px 24px rgba(26,100,255,.34);
transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, filter .2s ease;
}
.heroCallout__btn svg{ width: 1.05rem; height: 1.05rem; transition: transform .2s ease; }
.heroCallout__btn:hover{
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(26,100,255,.46);
filter: brightness(1.05);
}
.heroCallout__btn:hover svg{ transform: translateX(3px); }
/* Entrance */
@media (prefers-reduced-motion: no-preference){
.heroCallout{
opacity: 0; transform: translateY(16px);
animation: heroRise .7s cubic-bezier(.22,1,.36,1) .6s forwards;
}
}
/* On stacked/narrow layouts, keep the callout within the column and stack
the button under the text. */
@media (max-width: 920px){
.heroCallout{
width: 100%;
margin: 1.4rem auto 0;
}
}
@media (max-width: 560px){
.heroCallout{
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.heroCallout__btn{ width: 100%; justify-content: center; }
}
/* =========================================================
INDUSTRIES PAGE (industries.html)
========================================================= */
.indHero{
padding: clamp(7rem, 12vh, 10rem) 0 clamp(2rem, 4vh, 3.5rem);
background:
radial-gradient(900px 460px at 85% -10%, rgba(92,200,255,.16), transparent 60%),
radial-gradient(700px 420px at 0% 0%, rgba(155,107,255,.08), transparent 55%);
}
.indBack{
display: inline-flex; align-items: center; gap: .45rem;
font-size: .9rem; font-weight: 800; text-decoration: none;
color: #1A64FF; margin-bottom: 1.4rem;
transition: gap .18s ease, color .18s ease;
}
.indBack svg{ width: 1.05rem; height: 1.05rem; }
.indBack:hover{ gap: .75rem; color: #0b3a73; }
.indHero__kicker{
display: block; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
color: #1A64FF; margin-bottom: .8rem;
}
.indHero__h1{
margin: 0 0 1rem;
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
line-height: 1.05; letter-spacing: -.035em; font-weight: 900;
color: #0d1326;
}
.indHero__sub{
margin: 0; max-width: 46rem;
font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6;
color: rgba(15,23,42,.7);
}
/* Two-column hero: text left, image right (matches the other pages' polish) */
.indHero__split{
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
}
.indHero__media{
position: relative;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(240,247,255,.5));
border: 1px solid rgba(26,100,255,.12);
box-shadow: 0 24px 60px rgba(2,6,23,.12);
}
.indHero__media img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
@media (max-width: 900px){
.indHero__split{ grid-template-columns: 1fr; }
.indHero__media{ max-width: 560px; }
.indHero__sub{ max-width: none; }
}
.indGridWrap{ padding: 0 0 clamp(3rem, 6vh, 5rem); }
.indGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.indCard{
display: flex; flex-direction: column;
padding: 1.3rem 1.35rem 1.4rem;
border-radius: 16px;
text-decoration: none;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,251,255,.7));
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 10px 30px rgba(2,6,23,.05);
position: relative;
transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}
.indCard__icon{
width: 2.5rem; height: 2.5rem;
display: grid; place-items: center;
border-radius: 12px;
margin-bottom: .9rem;
color: #1A64FF;
background: linear-gradient(135deg, rgba(26,100,255,.14), rgba(92,200,255,.12));
border: 1px solid rgba(26,100,255,.16);
box-shadow: 0 8px 18px rgba(26,100,255,.10);
transition: transform .2s ease, background .2s ease;
}
.indCard__icon svg{ width: 1.3rem; height: 1.3rem; display: block; }
.indCard:hover .indCard__icon{
transform: translateY(-1px) scale(1.04);
background: linear-gradient(135deg, rgba(26,100,255,.2), rgba(92,200,255,.18));
}
.indCard:hover{
transform: translateY(-4px);
border-color: rgba(26,100,255,.34);
box-shadow: 0 20px 44px rgba(2,6,23,.11);
}
.indCard__name{
font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em;
color: #0d1326; margin-bottom: .5rem; padding-right: 1.6rem;
}
.indCard__desc{
font-size: .94rem; line-height: 1.5; font-weight: 500;
color: rgba(15,23,42,.68);
}
.indCard__arrow{
position: absolute; top: 1.3rem; right: 1.25rem;
width: 1.5rem; height: 1.5rem;
display: grid; place-items: center;
border-radius: 999px;
color: #1A64FF;
background: rgba(26,100,255,.1);
transition: background .2s ease, transform .2s ease;
}
.indCard__arrow svg{ width: .95rem; height: .95rem; }
.indCard:hover .indCard__arrow{ background: rgba(26,100,255,.2); transform: translateX(2px); }
/* CTA band at the bottom */
.indCta{
padding: clamp(3rem, 6vh, 5rem) 0 clamp(4rem, 7vh, 6rem);
text-align: center;
background: linear-gradient(180deg, rgba(234,243,255,.6), rgba(247,250,255,.6));
border-top: 1px solid rgba(26,100,255,.12);
}
.indCta h2{
margin: 0 0 .8rem;
font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.03em;
color: #0d1326;
}
.indCta p{
margin: 0 auto 1.6rem; max-width: 40rem;
font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: rgba(15,23,42,.7);
}
.indCta__actions{
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
margin-bottom: 1.8rem;
}
.indCta__actions .btn{ padding: .9rem 1.8rem; border-radius: 14px; }
.indBack--foot{ margin-bottom: 0; }
/* Responsive */
@media (max-width: 900px){
.indGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.indGrid{ grid-template-columns: 1fr; }
}
/* =========================================================
HEADER — mobile scaling. The doubled header + enlarged logo
and brand text are sized for desktop; scale them down on
phones so the brand doesn't crowd the menu button.
========================================================= */
@media (max-width: 700px){
.nav{ padding: 1.15rem 0; }
.brandMark{ width: 52px; height: 52px; border-radius: 12px; }
.brand{ gap: 12px; }
.brand .name{ font-size: 1.5rem; }
.brand .sub{ font-size: .8rem; letter-spacing: .14em; }
}
@media (max-width: 420px){
.brand .name{ font-size: 1.28rem; }
.brand .sub{ font-size: .72rem; }
.brandMark{ width: 46px; height: 46px; }
}
/* =========================================================
PRICING PAGE — plan cards matching the live program
========================================================= */
#pricing .planGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: stretch;
margin-top: 2.5rem;
}
#pricing .planCard{
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid rgba(15,23,42,.10);
border-top: 6px solid var(--accent, #1A64FF);
border-radius: 20px;
padding: 1.8rem 1.6rem;
box-shadow: 0 18px 50px rgba(2,6,23,.07);
}
#pricing .planCard{ --accent: #1A64FF; }
#pricing .planCard[data-accent]{ border-top-color: attr(data-accent); }
/* attr() color isn't broadly supported; set via inline fallback below */
#pricing .planCard--popular{
box-shadow: 0 26px 66px rgba(26,100,255,.20);
transform: translateY(-6px);
}
#pricing .planCard__badge{
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--blue), #1A64FF);
color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
padding: .4rem .9rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(26,100,255,.34); white-space: nowrap;
}
#pricing .planCard__name{ font-size: 1.4rem; font-weight: 800; color: #1e293b; margin: 0 0 .2rem; }
#pricing .planCard__tag{ color: rgba(15,23,42,.6); font-weight: 700; font-size: .86rem; margin: 0; }
#pricing .planCard__price{ font-size: 2.7rem; font-weight: 900; color: #0f172a; line-height: 1; margin: 1rem 0 .2rem; }
#pricing .planCard__price .cur{ font-size: 1.6rem; font-weight: 800; margin-right: 3px; vertical-align: super; }
#pricing .planCard__pay{ color: rgba(15,23,42,.55); font-size: .82rem; margin: 0 0 1.1rem; }
#pricing .planHi{ list-style: none; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid rgba(15,23,42,.08); display: grid; gap: .55rem; }
#pricing .planHi li{ display: flex; align-items: center; gap: .55rem; font-size: .96rem; color: rgba(15,23,42,.82); font-weight: 600; }
#pricing .planHi li::before{ font-weight: 900; font-size: 1rem; line-height: 1; }
#pricing .planHi li.yes::before{ content: "✓"; color: var(--accent, #1A64FF); }
#pricing .planHi li.no{ color: rgba(15,23,42,.4); }
#pricing .planHi li.no::before{ content: "✕"; color: #e5484d; }
#pricing .planMicro{ list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .4rem; flex-grow: 1; }
#pricing .planMicro li{ display: flex; align-items: flex-start; gap: .5rem; font-size: .84rem; line-height: 1.35; color: rgba(15,23,42,.72); }
#pricing .planMicro li::before{ font-weight: 900; font-size: .82rem; flex: 0 0 auto; }
#pricing .planMicro li.y::before{ content: "✓"; color: var(--accent, #1A64FF); }
#pricing .planMicro li.n{ color: rgba(15,23,42,.4); }
#pricing .planMicro li.n::before{ content: "✕"; color: rgba(229,72,77,.75); }
#pricing .planBtn{
display: block; text-align: center; text-decoration: none;
padding: .85rem 1rem; border-radius: 14px; font-weight: 800; font-size: .98rem;
margin-top: auto; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#pricing .planBtn--solid{ color: #fff; background: linear-gradient(135deg, var(--blue), #1A64FF); box-shadow: 0 14px 30px rgba(26,100,255,.32); }
#pricing .planBtn--ghost{ color: var(--accent, #1A64FF); background: rgba(26,100,255,.06); border: 1px solid rgba(26,100,255,.22); }
#pricing .planBtn:hover{ transform: translateY(-2px); }
/* Add-ons */
#pricing .addonsWrap{ margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(15,23,42,.1); }
#pricing .addonsHead{ font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0 0 .3rem; }
#pricing .addonsSub{ color: rgba(15,23,42,.6); margin: 0 0 1.6rem; }
#pricing .addonGrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
#pricing .addonCard{
position: relative; text-align: center; background: #fff;
border: 1px solid rgba(15,23,42,.1); border-radius: 18px; padding: 1.6rem 1.2rem;
display: flex; flex-direction: column; box-shadow: 0 12px 34px rgba(2,6,23,.06);
}
#pricing .addonCard--premium{ background: rgba(26,100,255,.06); border-color: rgba(26,100,255,.24); }
#pricing .addonIcon{ font-size: 1.8rem; margin-bottom: .4rem; }
#pricing .addonCard h4{ font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 .2rem; }
#pricing .addonPrice{ font-size: 1.5rem; font-weight: 900; color: #0f172a; margin: 0 0 .5rem; }
#pricing .addonCard p{ font-size: .84rem; color: rgba(15,23,42,.62); margin: 0; line-height: 1.4; }
#pricing .addonSave{
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--blue), #1A64FF); color: #fff; font-weight: 800;
font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px;
box-shadow: 0 8px 20px rgba(26,100,255,.3); white-space: nowrap;
}
/* Notes */
#pricing .pricingNotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
#pricing .pricingNote{ background: rgba(255,255,255,.7); border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 1.4rem 1.4rem; }
#pricing .pricingNote h3{ font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 .5rem; }
#pricing .pricingNote p{ font-size: .92rem; line-height: 1.55; color: rgba(15,23,42,.7); margin: 0; }
#pricing .pricingNote code{ background: rgba(26,100,255,.1); color: #1A64FF; padding: .05rem .35rem; border-radius: 6px; font-size: .85em; }
@media (max-width: 1080px){
#pricing .planGrid{ grid-template-columns: repeat(2, 1fr); }
#pricing .addonGrid{ grid-template-columns: repeat(2, 1fr); }
#pricing .pricingNotes{ grid-template-columns: 1fr; }
#pricing .planCard--popular{ transform: none; }
}
@media (max-width: 620px){
#pricing .planGrid{ grid-template-columns: 1fr; }
#pricing .addonGrid{ grid-template-columns: 1fr; }
}
/* =========================================================
Tutorials redesign — featured "Start here" + coming-soon
Light-theme, matches existing .videoCard language.
========================================================= */
/* Featured lesson card (horizontal, larger) */
.tutFeatured{
display:flex;
gap:1.5rem;
align-items:stretch;
background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
border:1px solid rgba(15,23,42,.10);
border-radius:22px;
box-shadow:0 18px 60px rgba(2,6,23,.10);
padding:1.15rem;
margin-bottom:1.6rem;
overflow:hidden;
}
.tutFeatured__media{
position:relative;
flex:0 0 40%;
min-width:260px;
border-radius:16px;
overflow:hidden;
background:radial-gradient(520px 200px at 50% 20%, rgba(0,123,255,.18), rgba(255,255,255,.02));
cursor:pointer;
border:0;
padding:0;
min-height:220px;
}
.tutFeatured__media img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center; display:block; z-index:1;
}
.tutFeatured__media .play{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:64px; height:64px; z-index:3;
}
.tutFeatured__body{
flex:1; min-width:0;
display:flex; flex-direction:column; justify-content:center;
padding:.6rem .8rem .6rem 0;
}
.tutFeatured__badge{
display:inline-flex; align-items:center; gap:.4rem;
align-self:flex-start;
font-size:.78rem; font-weight:800; letter-spacing:.03em;
text-transform:uppercase;
color:#1A64FF;
background:rgba(26,100,255,.12);
padding:.35rem .7rem; border-radius:999px;
margin-bottom:.7rem;
}
.tutFeatured__body h3{
font-size:1.5rem; font-weight:900; color:#0f172a;
margin:0 0 .5rem; line-height:1.15;
}
.tutFeatured__body p{
color:rgba(15,23,42,.68); font-size:1rem; line-height:1.6;
margin:0 0 1rem; max-width:52ch;
}
.tutFeatured__cta{
display:inline-flex; align-items:center; gap:.5rem;
align-self:flex-start;
font-weight:800; color:#1A64FF; font-size:1rem;
}
.tutFeatured__cta svg{ width:18px; height:18px; }
.tutFeatured:hover .tutFeatured__cta{ text-decoration:underline; }
/* Coming-soon cards: same footprint, visually inert */
.videoCard.comingSoon{
cursor:default;
opacity:.72;
}
.videoCard.comingSoon:hover{
transform:none !important;
box-shadow:0 14px 44px rgba(2,6,23,.08) !important;
}
.videoCard.comingSoon .thumb{
background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03)) !important;
}
.videoCard.comingSoon .thumbIcon{
width:44px; height:44px; z-index:3;
color:rgba(15,23,42,.42);
}
.videoCard.comingSoon .thumbIcon svg{ width:100%; height:100%; }
.csBadge{
position:absolute; top:.6rem; left:.6rem; z-index:4;
font-size:.72rem; font-weight:800; letter-spacing:.02em;
text-transform:uppercase;
color:rgba(15,23,42,.62);
background:rgba(255,255,255,.82);
border:1px solid rgba(15,23,42,.10);
padding:.25rem .55rem; border-radius:999px;
}
@media (max-width: 720px){
.tutFeatured{ flex-direction:column; }
.tutFeatured__media{ flex:0 0 auto; min-width:0; width:100%; min-height:180px; }
.tutFeatured__body{ padding:.4rem .4rem .8rem; }
.tutFeatured__body h3{ font-size:1.3rem; }
}
/* =========================================================
FAQ + Support refactor (support.html)
Light-theme, extends existing .faq / #support language.
========================================================= */
/* ---- FAQ search bar ---- */
.faqTools{
max-width:950px; margin:0 auto 1.4rem;
display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
}
.faqSearch{
position:relative; flex:1; min-width:240px;
}
.faqSearch svg{
position:absolute; left:1rem; top:50%; transform:translateY(-50%);
width:18px; height:18px; color:rgba(15,23,42,.42); pointer-events:none;
}
.faqSearch input{
width:100%; border-radius:14px;
border:1px solid rgba(15,23,42,.14);
background:rgba(255,255,255,.86);
color:rgba(15,23,42,.92);
padding:.85rem 1rem .85rem 2.7rem;
font-family:inherit; font-size:1rem; outline:none;
transition:border-color .2s, box-shadow .2s;
box-shadow:0 8px 26px rgba(2,6,23,.05);
}
.faqSearch input:focus{
border-color:rgba(0,123,255,.45);
box-shadow:0 0 0 4px rgba(0,123,255,.14);
}
.faqCount{
font-size:.9rem; color:rgba(15,23,42,.55); white-space:nowrap;
}
/* ---- Animated FAQ items ---- */
.faq details{
padding:0 !important; /* move padding onto summary/answer */
overflow:hidden;
transition:box-shadow .2s, border-color .2s;
}
.faq details[open]{
border-color:rgba(26,100,255,.28) !important;
box-shadow:0 18px 55px rgba(2,6,23,.10) !important;
}
.faq summary{
padding:1.1rem 1.2rem !important;
border-radius:18px;
transition:background .18s;
}
.faq summary:hover{ background:rgba(26,100,255,.04); }
/* Chevron icon replaces the +/- glyph */
.faq summary .plus{
font-size:0 !important; /* hide the + / - text */
position:relative;
transition:transform .28s ease, background .2s, border-color .2s, color .2s;
}
.faq summary .plus::after{
content:"";
position:absolute; inset:0;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:16px 16px;
}
.faq details[open] summary .plus{
transform:rotate(180deg);
background:rgba(16,185,129,.14) !important;
border-color:rgba(16,185,129,.38) !important;
}
.faq details[open] summary .plus::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* Smooth height animation wrapper (JS-driven) */
.faq .answer{
margin-top:0 !important;
padding:0 1.2rem;
max-height:0; overflow:hidden;
opacity:0;
transition:max-height .32s ease, opacity .28s ease, padding .32s ease;
}
.faq details[open] .answer{
padding:0 1.2rem 1.2rem;
opacity:1;
/* max-height set inline by JS to scrollHeight */
}
.faqNoResults{
max-width:950px; margin:0 auto; text-align:center;
color:rgba(15,23,42,.55); padding:2rem 0; display:none;
}
.faqNoResults.show{ display:block; }
/* ---- Support form polish ---- */
#support .form{
padding:2.2rem !important;
}
.formHead{ margin-bottom:1.2rem; }
.formHead h3{ margin:0 0 .25rem; font-size:1.25rem; }
.formHead .muted{ margin:0; font-size:.92rem; }
.formRow{
display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.field{ position:relative; margin-bottom:.2rem; }
.field.full{ grid-column:1 / -1; }
#support .field label{ margin:.85rem 0 .4rem; }
#support .field:first-child label{ margin-top:0; }
/* icon inside inputs */
.field .fieldIcon{
position:absolute; left:.9rem; bottom:.95rem;
width:18px; height:18px; color:rgba(15,23,42,.38);
pointer-events:none; transition:color .2s;
}
.field.hasIcon input,
.field.hasIcon select{ padding-left:2.6rem !important; }
.field:focus-within .fieldIcon{ color:rgba(0,123,255,.7); }
/* custom select chevron */
#support .field.selectField select{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 1rem center;
background-size:16px 16px;
padding-right:2.6rem !important;
}
/* char counter */
.charCount{
position:absolute; right:.2rem; bottom:-1.25rem;
font-size:.78rem; color:rgba(15,23,42,.45);
}
/* required asterisk emphasis */
#support .field label .req{ color:#e11d48; font-weight:900; }
/* inert submit button state */
#support .submitRow{ margin-top:1.6rem; }
#support button.isInert{
cursor:not-allowed;
opacity:.85;
}
#support .submitNote{
display:flex; align-items:flex-start; gap:.5rem;
margin-top:.9rem; font-size:.9rem; color:rgba(15,23,42,.6);
}
#support .submitNote svg{ width:16px; height:16px; flex:0 0 auto; margin-top:.15rem; color:rgba(0,123,255,.7); }
@media (max-width: 560px){
.formRow{ grid-template-columns:1fr; }
}
/* Outlined "ghost" nav CTA — pairs with Download without competing */
.btn.cta3d.ghost{
background: rgba(255,255,255,.7);
color: #1A64FF;
border: 1.5px solid rgba(26,100,255,.45);
box-shadow: 0 6px 18px rgba(26,100,255,.10);
}
.btn.cta3d.ghost::before{ display:none; } /* no animated sheen on the ghost */
.btn.cta3d.ghost:hover{
background: linear-gradient(135deg, var(--blue), var(--blue-glow));
color:#fff;
border-color: transparent;
}