/* AI Audit — aiaudit.space · vibrant, glossy, 3D, crisp (no blur), alternating scroll */ :root { --ink: #0a0f20; --ink-2: #45506e; --muted: #79849f; --bg: #ffffff; --bg-2: #f2f4f9; --surface: #ffffff; --border: rgba(18,28,58,.10); --border-2: rgba(18,28,58,.17); --grad: linear-gradient(135deg, #8b45f0 0%, #6a21d6 60%, #4c12a1 100%); --maxw: 1140px; --ease: cubic-bezier(.2,.75,.25,1); } /* dark theme: theme.js sets data-theme="dark" on ; these override the * light defaults above. Only the color tokens change so the whole site follows. */ :root[data-theme="dark"] { --ink: #f3f6ff; --ink-2: #b8c2e0; --muted: #8a95b6; --bg: #0b0f1d; --bg-2: #161c30; --surface: #151b2e; --border: rgba(150,168,220,.16); --border-2: rgba(150,168,220,.24); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: #6a21d6; text-decoration: none; } a:hover { color: #8b45f0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; position: relative; z-index: 2; } h1,h2,h3 { margin: 0; color: var(--ink); font-weight: 900; letter-spacing: -.025em; line-height: 1.08; } p { margin: 0; color: var(--ink-2); } .grad-text { background: linear-gradient(120deg,#9d5cff,#6a21d6); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 800; color: #8b45f0; margin-bottom: 12px; } /* background: sharp network (canvas) + sharp light wash, NO blur */ #bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; } .bg-tint { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1000px 560px at 12% -6%, rgba(124,58,237,.06), transparent 58%), radial-gradient(900px 560px at 92% 4%, rgba(139,69,240,.05), transparent 58%); } main, header, footer { position: relative; z-index: 2; } /* decorative 3D orbs (sharp, glossy, scattered) */ .deco { position: fixed; z-index: 1; pointer-events: none; border-radius: 50%; will-change: transform; box-shadow: inset 0 6px 12px rgba(255,255,255,.55), inset 0 -14px 26px rgba(0,0,0,.22), 0 30px 50px -18px rgba(40,30,120,.4); } .deco.d1 { width: 120px; height: 120px; left: 5%; top: 22%; background: radial-gradient(circle at 32% 28%, #7ea2ff, #2f47e6 70%); opacity: .85; } .deco.d2 { width: 86px; height: 86px; right: 7%; top: 16%; background: radial-gradient(circle at 32% 28%, #ff9ad6, #d62fb0 72%); opacity: .85; } .deco.d3 { width: 150px; height: 150px; right: 4%; top: 64%; background: radial-gradient(circle at 32% 28%, #6ff0c8, #11a877 72%); opacity: .8; } .deco.d4 { width: 70px; height: 70px; left: 9%; top: 74%; background: radial-gradient(circle at 32% 28%, #ffd083, #ff8a00 72%); opacity: .85; } @media (max-width: 900px) { .deco { display: none; } } /* glossy buttons (3D) */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 14px; font-weight: 800; font-size: 15px; border: 0; cursor: pointer; text-decoration: none; transition: transform .14s var(--ease), box-shadow .2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 16px 30px -10px rgba(86,40,220,.6), inset 0 1px 1px rgba(255,255,255,.45), inset 0 -4px 9px rgba(0,0,0,.22); } .btn-primary:hover { color: #fff; box-shadow: 0 22px 42px -10px rgba(86,40,220,.72), inset 0 1px 1px rgba(255,255,255,.45), inset 0 -4px 9px rgba(0,0,0,.22); } .btn-ghost { background: var(--surface); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(20,30,60,.3), inset 0 0 0 1px var(--border-2); } .btn-ghost:hover { color: var(--ink); } .btn-lg { padding: 15px 30px; font-size: 16px; } /* nav (solid, crisp) */ /* z-index 60 (above the .nav-scrim at 55). The sticky header forms a stacking context, so its child .nav-drawer (z-index 60) is confined to the header's level; keeping the header itself above the scrim is what lets drawer links receive clicks instead of the scrim swallowing them and just closing. */ header.nav { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--border); } .nav-row { display: flex; align-items: center; gap: 16px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .brand:hover { color: var(--ink); } .brand svg { width: 28px; height: 28px; } .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 20px; } .nav-links a { color: var(--ink-2); font-weight: 700; font-size: 14.5px; } .nav-links a:hover { color: var(--ink); } .nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; padding: 10px 20px; } @media (max-width: 1000px) { .nav-links a.hide-sm { display: none; } } /* --- Mobile nav drawer (hamburger). Only the index header opts in via .nav-drawer; desktop unchanged. --- */ .nav-toggle, .nav-close, .nav-scrim, .lang-bar, .hero-signin { display: none; } @media (max-width: 1000px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: 0; border: 0; border-radius: 11px; cursor: pointer; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-2); } .lang-bar { display: inline-flex; margin-left: auto; } .nav-drawer .lang-select { display: none; } .hero-signin { display: inline-flex; } .nav-toggle svg { width: 23px; height: 23px; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(84vw, 320px); margin-left: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); padding: 72px 20px 26px; box-shadow: -26px 0 70px -34px rgba(8,12,40,.55); transform: translateX(110%); transition: transform .26s var(--ease); overflow-y: auto; } .nav-drawer.open { transform: translateX(0); } .nav-drawer a.hide-sm { display: block; } .nav-drawer a { padding: 13px 12px; font-size: 16px; border-radius: 11px; } .nav-drawer a:hover { background: var(--bg-2); } .nav-drawer .nav-signin { box-shadow: inset 0 0 0 1.5px var(--border-2); text-align: center; margin-top: 4px; } .nav-drawer a.btn-primary, .nav-drawer a.btn-primary:hover { justify-content: center; margin-top: 6px; padding: 14px 20px; } .nav-drawer .lang-select { width: 100%; padding: 13px 12px; } .nav-drawer .theme-toggle { width: 100%; height: 46px; } .nav-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 10px; cursor: pointer; font-size: 17px; color: var(--ink-2); background: var(--bg-2); } /* Transparent scrim: the background stays fully bright (no dim). It still spans the screen and catches an outside tap to close the drawer. */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: transparent; opacity: 0; pointer-events: none; transition: opacity .26s; } .nav-scrim.open { opacity: 1; pointer-events: auto; } } /* header controls: language dropdown + theme toggle (shared by all pages) */ .lang-select { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--surface); border-radius: 11px; padding: 8px 30px 8px 12px; box-shadow: inset 0 0 0 1px var(--border-2); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .lang-select:hover { color: var(--ink); } .lang-select:focus { outline: none; box-shadow: inset 0 0 0 2px #6a5bff; } .theme-toggle { border: 0; cursor: pointer; background: var(--surface); border-radius: 11px; width: 38px; height: 38px; display: inline-grid; place-items: center; font-size: 17px; line-height: 1; box-shadow: inset 0 0 0 1px var(--border-2); transition: box-shadow .15s var(--ease); } .theme-toggle:hover { box-shadow: inset 0 0 0 1.5px var(--border-2), 0 6px 14px -8px rgba(20,30,60,.4); } .theme-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #6a5bff; } /* hero */ .hero { padding: 46px 0 30px; } .hero-grid { display: grid; grid-template-columns: 1fr minmax(0, 360px); gap: 46px; align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; } .hero-shot { order: 2; justify-self: center; } .hero-cta { justify-content: center; } } .hero h1 { font-size: clamp(32px, 4.8vw, 54px); margin-bottom: 16px; } .hero .lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-2); max-width: 520px; margin-bottom: 22px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .hero-note { font-size: 13px; color: var(--muted); font-weight: 600; } .hero-shot { display: flex; justify-content: flex-end; perspective: 1500px; } @media (max-width: 900px) { .hero-shot { justify-content: center; } } .hero-img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 20px; border: 1px solid rgba(17,24,52,.16); transform: rotateY(-7deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .5s var(--ease); box-shadow: -26px 42px 78px -36px rgba(40,30,120,.5), 0 14px 30px -16px rgba(20,30,60,.3); } .hero-img:hover { transform: rotateY(-2deg) rotateX(1deg); } @media (max-width: 900px) { .hero-img { transform: none; } } /* sections */ .section { padding: 64px 0; } .section-head { text-align: center; max-width: 660px; margin: 0 auto 44px; } .section-head h2 { font-size: clamp(27px, 3.7vw, 42px); margin-bottom: 12px; } .section-head p { font-size: 16.5px; color: var(--muted); font-weight: 500; } /* ---- ALTERNATING zigzag points with glossy 3D orbs ---- */ .zig { display: flex; flex-direction: column; gap: 18px; max-width: 1040px; margin: 0 auto; } .zrow { display: flex; } .zrow.right { justify-content: flex-end; } .zcard { width: 60%; display: flex; gap: 18px; align-items: center; background: var(--surface); border-radius: 20px; padding: 22px 26px; box-shadow: 0 26px 50px -28px rgba(30,30,90,.42), inset 0 0 0 1px var(--border); transition: transform .3s var(--ease), box-shadow .3s; } .zcard:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 40px 70px -30px rgba(40,30,120,.5), inset 0 0 0 1px var(--border-2); } @media (max-width: 760px) { .zcard { width: 100%; gap: 15px; padding: 20px; } } .zcard h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; } .zcard p { font-size: 14.5px; font-weight: 500; color: var(--ink-2); margin: 0; line-height: 1.5; } .orb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 17px; display: grid; place-items: center; font-size: 26px; position: relative; box-shadow: inset 0 2px 3px rgba(255,255,255,.65), inset 0 -10px 18px rgba(0,0,0,.20), 0 16px 26px -10px var(--oc, rgba(47,71,230,.5)); } .orb::after { content: ""; position: absolute; inset: 0; border-radius: 17px; background: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%); pointer-events: none; } .orb.c1 { background: linear-gradient(150deg,#6e8bff,#2f47e6); --oc: rgba(47,71,230,.5); } .orb.c2 { background: linear-gradient(150deg,#43e3a6,#0fa873); --oc: rgba(15,168,115,.5); } .orb.c3 { background: linear-gradient(150deg,#ffc04d,#ff8a00); --oc: rgba(255,138,0,.5); } .orb.c4 { background: linear-gradient(150deg,#ff79a8,#e3306a); --oc: rgba(227,48,106,.5); } .orb.c5 { background: linear-gradient(150deg,#4fd6ff,#1597e8); --oc: rgba(21,151,232,.5); } .orb.c6 { background: linear-gradient(150deg,#a86bff,#6a2fe0); --oc: rgba(106,47,224,.5); } .orb.c7 { background: linear-gradient(150deg,#5ab6ff,#1f6dff); --oc: rgba(31,109,255,.5); } .orb.c8 { background: linear-gradient(150deg,#ff7ad6,#d62fb0); --oc: rgba(214,47,176,.5); } .orb.c9 { background: linear-gradient(150deg,#2dd4bf,#0d9488); --oc: rgba(13,148,136,.5); } /* All feature icons share ONE soft light-gray so they read as a consistent set. */ .orb.c1,.orb.c2,.orb.c3,.orb.c4,.orb.c5,.orb.c6,.orb.c7,.orb.c8,.orb.c9{background:linear-gradient(150deg,#eef1f7,#d9dfea);--oc:rgba(140,152,184,.40)} /* steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--surface); border-radius: 18px; padding: 24px; box-shadow: 0 20px 40px -28px rgba(30,30,90,.4), inset 0 0 0 1px var(--border); } .step .n { width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff; font-weight: 900; font-size: 17px; display: grid; place-items: center; margin-bottom: 14px; box-shadow: inset 0 2px 2px rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.22), 0 12px 22px -8px rgba(86,40,220,.5); } .step h3 { font-size: 16px; margin-bottom: 5px; } .step p { font-size: 14px; color: var(--ink-2); margin: 0; } /* pricing */ .price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; } @media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } } .price { background: var(--surface); border-radius: 20px; padding: 30px; box-shadow: 0 26px 54px -32px rgba(30,30,90,.42), inset 0 0 0 1px var(--border); position: relative; } .price.featured { box-shadow: 0 30px 60px -28px rgba(86,40,220,.5), inset 0 0 0 2px #8b5cf6; } .price .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 800; padding: 5px 14px; border-radius: 999px; box-shadow: 0 10px 20px -8px rgba(86,40,220,.7); } .price h3 { font-size: 20px; } .price .amt { font-size: 36px; font-weight: 900; margin: 8px 0 2px; } .price .amt small { font-size: 15px; font-weight: 700; color: var(--muted); } .price ul { list-style: none; padding: 0; margin: 16px 0 22px; } .price li { padding: 7px 0 7px 28px; position: relative; font-size: 14.5px; color: var(--ink-2); } .price li::before { content: "✓"; position: absolute; left: 0; color: #11a877; font-weight: 900; } .price .btn { width: 100%; justify-content: center; } /* paid pricing card (single plan, region priced) */ .pricing-card { position: relative; max-width: 820px; margin: 0 auto; background: var(--surface); border-radius: 28px; padding: 40px 44px; box-shadow: 0 34px 66px -30px rgba(86,40,220,.5), inset 0 0 0 2px #8b5cf6; } .pricing-card .badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 18px; border-radius: 999px; box-shadow: 0 12px 22px -8px rgba(86,40,220,.7); } .pricing-top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; align-items: center; } @media (max-width: 700px) { .pricing-top { grid-template-columns: 1fr; gap: 22px; text-align: center; } } .pricing-amount .plan-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #8b45f0; margin-bottom: 10px; } .pricing-amount .amt-year { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .pricing-amount .amt-month { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } @media (max-width: 700px) { .pricing-amount .amt-month { justify-content: center; } } .pricing-amount .amt-month-val { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pricing-amount .amt-month-unit { font-size: 14.5px; font-weight: 700; color: var(--muted); } .pricing-amount .coffee-line { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--ink-2); } .pricing-feats { list-style: none; padding: 0; margin: 0; } .pricing-feats li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; color: var(--ink-2); } .pricing-feats li::before { content: "✓"; position: absolute; left: 0; color: #11a877; font-weight: 900; } .pricing-cta { width: 100%; justify-content: center; margin-top: 30px; } .region-note { text-align: center; font-size: 13.5px; color: var(--muted); margin: 14px 0 0; } @media (max-width: 700px) { .pricing-card { padding: 34px 22px; } .pricing-amount .amt-month-val { font-size: 46px; } } /* paid plan + usage on the account page */ .usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .usage-count { font-weight: 800; color: var(--ink); font-size: 15px; } .usage-bar { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); } .usage-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width .5s var(--ease); } .usage-unlimited { display: inline-flex; align-items: center; gap: 8px; background: #e3f7ee; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; color: #0c7a4d; box-shadow: inset 0 0 0 1px rgba(15,168,115,.25); } .usage-unlimited .dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; } .plan-amt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; } .plan-amt .plan-permo { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-amt .plan-permo-unit { font-size: 14px; font-weight: 700; color: var(--muted); } .plan-year { font-size: 14.5px; color: var(--ink-2); font-weight: 600; } .plan-coffee { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: 8px; } .plan-region { font-size: 13px; color: var(--muted); margin-top: 10px; } .btn[disabled], .btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: 0 8px 18px -10px rgba(20,30,60,.3), inset 0 0 0 1px var(--border-2); } @media (prefers-reduced-motion: reduce) { .usage-bar > i { transition: none; } } /* faq */ .faq { max-width: 760px; margin: 0 auto; } details { border-radius: 14px; background: var(--surface); margin-bottom: 10px; box-shadow: 0 14px 30px -26px rgba(30,30,90,.4), inset 0 0 0 1px var(--border); padding: 2px 20px; } details summary { cursor: pointer; font-weight: 800; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 16px; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; font-size: 23px; color: var(--muted); font-weight: 300; } details[open] summary::after { content: "–"; } details p { padding: 0 0 17px; margin: 0; font-size: 15px; color: var(--ink-2); } /* glossy CTA band (3D) */ .cta-band { text-align: center; background: var(--grad); border-radius: 26px; padding: 52px 28px; position: relative; overflow: hidden; box-shadow: 0 40px 80px -32px rgba(86,40,220,.6), inset 0 2px 2px rgba(255,255,255,.3), inset 0 -16px 40px rgba(0,0,0,.22); } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 50% -30%, rgba(255,255,255,.4), transparent 70%); pointer-events: none; } .cta-band h2 { color: #fff; font-size: clamp(27px, 3.7vw, 42px); margin-bottom: 10px; position: relative; } .cta-band p { color: rgba(255,255,255,.92); margin-bottom: 22px; position: relative; } .cta-band .hero-cta { position: relative; } .cta-band .btn-light { background: #fff; color: #5a32d6; box-shadow: 0 16px 30px -12px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.8); } .cta-band .btn-ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } /* footer */ footer { border-top: 1px solid var(--border); padding: 40px 0; } .foot-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .foot-links { display: flex; flex-wrap: wrap; gap: 20px; } .foot-links a { color: var(--ink-2); font-weight: 700; font-size: 14px; } .foot-links a:hover { color: var(--ink); } .foot-copy { color: var(--muted); font-size: 13px; } /* ---- scroll reveal: up + alternating slide ---- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.from-l { transform: translateX(-72px); } .reveal.from-r { transform: translateX(72px); } .reveal.in { opacity: 1; transform: none; } /* On mobile, reveal vertically only: a sideways slide would push content off-screen and cause horizontal scroll. */ @media (max-width: 760px) { .reveal.from-l, .reveal.from-r { transform: translateY(26px); } } .reveal[data-d="1"] { transition-delay: .07s; } .reveal[data-d="2"] { transition-delay: .14s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .deco { display: none; } html { scroll-behavior: auto; } } /* ---- widget recreation (3D tilted, glossy) ---- */ .wm { position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: 20px; overflow: hidden; transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .5s var(--ease); border: 1.5px solid rgba(17,24,52,.34); box-shadow: -28px 44px 80px -36px rgba(40,30,120,.5), 0 14px 30px -16px rgba(20,30,60,.3); } .wm:hover { transform: rotateY(-3deg) rotateX(1deg); } .wm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(128deg, rgba(255,255,255,.22), rgba(255,255,255,0) 36%); pointer-events: none; z-index: 5; } .wm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1.5px solid rgba(17,24,52,.18); } .wm-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); font-size: 14px; } .wm-dots { display: flex; gap: 6px; } .wm-dots i { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-2); display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--muted); } .wm-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 6px; background: var(--bg-2); border-bottom: 1.5px solid rgba(17,24,52,.18); } .wm-tab { text-align: center; padding: 8px 4px; border-radius: 9px; font-weight: 800; font-size: 12.5px; color: #36415e; } .wm-tab.on { background: linear-gradient(135deg,#8b45f0,#6a21d6); color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 6px 14px -6px rgba(108,92,255,.6); } .wm-card { margin: 9px; padding: 11px; border-radius: 13px; background: #fff; border: 1.5px solid rgba(17,24,52,.16); } .wm-q { color: var(--muted); font-size: 12.5px; padding: 12px; border-radius: 10px; background: var(--bg-2); margin-bottom: 9px; border: 1.5px solid rgba(17,24,52,.16); } .wm-row { display: flex; gap: 6px; } .wm-row.sm { margin: 6px 0 2px; } .wm-b { flex: 1; text-align: center; padding: 7px 4px; border-radius: 9px; font-weight: 800; font-size: 11.5px; background: #fff; color: #2b3550; border: 1.5px solid rgba(17,24,52,.22); } .wm-b.red { background: #ffe0e6; color: #cf3460; border: 1.5px solid rgba(207,52,96,.34); } .wm-b.send { background: linear-gradient(135deg,#8b45f0,#6a21d6); color: #fff; border: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 6px 14px -7px rgba(86,40,220,.6); } .wm-meta { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 9px; } .wm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; vertical-align: middle; margin-right: 3px; } .wm-edit { font-size: 11.5px; font-weight: 800; background: #fff; border: 1.5px solid rgba(17,24,52,.2); border-radius: 8px; padding: 5px 10px; color: #2b3550; } .wm-rounds { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .wm-rounds span { font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(17,24,52,.18); color: #36415e; } .wm-rounds span.on { background: #ece6ff; color: #5b4bff; border-color: rgba(91,75,255,.42); } .wm-rounds span.pl { border: 0; background: none; } .wm-rounds span.pl { background: none; color: var(--muted); padding: 5px 3px; } .wm-ai { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--ink); margin-top: 9px; } .wm-ai img { width: 18px; height: 18px; object-fit: contain; } .wm-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; z-index: 4; } /* legal */ .legal { padding: 52px 0 70px; } .legal .wrap { max-width: 800px; } .legal h1 { font-size: clamp(30px, 5vw, 44px); } .legal .updated { color: var(--muted); font-size: 14px; margin: 12px 0 28px; } .legal h2 { font-size: 22px; margin-top: 36px; } .legal p, .legal li { color: var(--ink-2); font-size: 15.5px; } .legal ul { padding-left: 22px; } .legal li { margin-bottom: 8px; } .back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 24px; } .callout { background: var(--surface); border-radius: 12px; padding: 15px 18px; margin: 18px 0; box-shadow: inset 0 0 0 1px var(--border-2); } .callout p { margin: 0; font-size: 14.5px; color: var(--ink); } /* ---- v2 refresh: AI logo strip, differentiator grid, modes showcase ---- */ .ai-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 34px auto 0; } .ai-row .ai-lbl { width: 100%; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .ai-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-2), 0 10px 22px -14px rgba(40,30,120,.35); font-weight: 800; font-size: 13.5px; color: var(--ink); } .ai-chip img { width: 18px; height: 18px; object-fit: contain; } .diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .diff-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .diff-grid { grid-template-columns: 1fr; } } .diff-card { position: relative; background: var(--surface); border-radius: 20px; padding: 28px 22px 24px; text-align: center; box-shadow: 0 24px 48px -30px rgba(76,18,161,.45), inset 0 0 0 1px var(--border); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; } .diff-card:hover { transform: translateY(-5px); box-shadow: 0 36px 66px -30px rgba(106,33,214,.55), inset 0 0 0 1px var(--border-2); } .diff-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); } .diff-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; font-size: 25px; background: linear-gradient(150deg, rgba(139,69,240,.16), rgba(106,33,214,.08)); box-shadow: inset 0 0 0 1px rgba(139,69,240,.25); } .diff-card h3 { font-size: 17px; margin-bottom: 6px; } .diff-card p { font-size: 14px; color: var(--ink-2); } .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 900px) { .mode-grid { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; } } .mode-card { display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; padding: 22px 22px 26px; box-shadow: 0 26px 52px -30px rgba(30,30,90,.45), inset 0 0 0 1px var(--border); transition: transform .3s var(--ease), box-shadow .3s; } .mode-card:hover { transform: translateY(-6px); box-shadow: 0 42px 74px -32px rgba(106,33,214,.5), inset 0 0 0 1px var(--border-2); } .mode-tag { align-self: flex-start; font-size: 11.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--grad); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; box-shadow: 0 8px 18px -8px rgba(106,33,214,.6); } .mode-tag.teal { background: linear-gradient(135deg, #14b08d, #0d8a6f); box-shadow: 0 8px 18px -8px rgba(13,138,111,.6); } .mode-card h3 { font-size: 20px; margin-bottom: 6px; } .mode-card > p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 14px; } .mode-shot { border-radius: 16px; overflow: hidden; margin-bottom: 16px; background: #fff; box-shadow: 0 18px 40px -22px rgba(20,20,60,.5), inset 0 0 0 1px var(--border-2); } .mode-shot img { display: block; width: 100%; height: auto; } .mode-list { list-style: none; padding: 0; margin: auto 0 0; } .mode-list li { padding: 5px 0 5px 26px; position: relative; font-size: 14px; color: var(--ink-2); font-weight: 500; } .mode-list li::before { content: "✓"; position: absolute; left: 0; color: #8b45f0; font-weight: 900; } .mode-list.teal li::before { color: #0d8a6f; } /* ---- modes as alternating feature rows (image right / left / right) ---- */ h1, h2, h3 { font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.02em; } .mode-rows { display: flex; flex-direction: column; gap: 88px; } .mode-row { display: grid; grid-template-columns: 1fr 1.12fr; gap: 58px; align-items: center; } .mode-row.flip .mode-media { order: -1; } @media (max-width: 900px) { .mode-row, .mode-row.flip { grid-template-columns: 1fr; gap: 26px; } .mode-row .mode-media, .mode-row.flip .mode-media { order: 2; } } .mode-txt .mode-tag { margin-bottom: 0; } .mode-txt h3 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.16; margin: 16px 0 14px; } .mode-txt > p { font-size: 17px; color: var(--ink-2); margin-bottom: 18px; max-width: 480px; } .mode-txt .mode-list li { font-size: 16px; padding: 8px 0 8px 34px; font-weight: 500; } .mode-txt .mode-list li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: #c6cbdb; color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; top: 9px; } :root[data-theme="dark"] .mode-txt .mode-list li::before { background: #3a4260; } .mode-cta { margin-top: 24px; } .mode-media { border-radius: 24px; padding: clamp(9px, 1.3vw, 15px); width: fit-content; justify-self: center; display: flex; justify-content: center; } .mode-media img { width: 100%; max-width: 350px; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 22px 50px -24px rgba(10, 10, 40, .5); } .mode-media.purple { background: radial-gradient(120% 130% at 18% 8%, #a06bff 0%, #6a21d6 58%, #45109a 100%); } .mode-media.teal { background: radial-gradient(120% 130% at 18% 8%, #2ec6a0 0%, #0d8a6f 58%, #085c46 100%); } /* ---- v2.2: calmer tone — monochrome icons, minimal purple, lighter text. * Purple stays only on primary buttons, the hero highlight and the mode * frames; decorative accents go neutral. ---- */ .diff-ico svg { width: 26px; height: 26px; color: var(--ink); display: block; } .orb svg { width: 24px; height: 24px; color: var(--ink); display: block; } .ai-chip { font-weight: 500; } .eyebrow { color: var(--muted); } .diff-card::before { display: none; } .diff-ico { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border); } .mode-tag, .mode-tag.teal { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border-2); } .step .n { background: var(--bg-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); } .mode-list li::before { color: var(--muted); } .mode-list.teal li::before { color: var(--muted); } .pricing-feats-row li::before { color: var(--ink-2); } .nav-links a { font-weight: 500; } .nav-links a.btn-primary, .nav-links a.btn-primary:hover { font-weight: 700; } .foot-links a { font-weight: 500; } .btn { font-weight: 700; } .hero-note { font-weight: 400; } .zcard p, .section-head p, .mode-txt > p, .step p { font-weight: 400; } .zcard h3 { font-weight: 650; } details summary { font-weight: 650; } /* Fanned 3-mode hero composite: transparent PNG floating free — no frame, * border, shadow or tilt of its own. Kept LAST so no earlier .hero-img rule * (base tilt, emboss border) can override it. */ /* Desktop-only: the wide trio column must NOT override the <=900px stacking * media query above (it did, which squeezed the mobile hero into a narrow * two-column layout). */ @media (min-width: 901px) { .hero-grid { grid-template-columns: 1fr minmax(0, 560px); } } .hero-shot { perspective: none; } .hero-img-trio, .hero-img-trio:hover { width: 100%; max-width: 560px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transform: none !important; outline: 0 !important; } /* ---- v2.3: dark mode icon tiles + invert-on-hover feature cards ---- */ :root[data-theme="dark"] .orb, :root[data-theme="dark"] .diff-ico { background: #1d2338; box-shadow: inset 0 0 0 1px rgba(150, 168, 220, .22); } .zcard, .diff-card { transition: transform .3s var(--ease), box-shadow .3s, background-color .25s var(--ease); } .zcard h3, .zcard p, .diff-card h3, .diff-card p { transition: color .25s var(--ease); } .zcard .orb, .diff-card .diff-ico { transition: background-color .25s var(--ease), box-shadow .25s var(--ease); } .zcard .orb svg, .diff-card .diff-ico svg { transition: color .25s var(--ease); } /* light mode: hover turns the card dark */ .zcard:hover, .diff-card:hover { background: #12151f; } .zcard:hover h3, .diff-card:hover h3 { color: #fff; } .zcard:hover p, .diff-card:hover p { color: rgba(255, 255, 255, .78); } .zcard:hover .orb, .diff-card:hover .diff-ico { background: #262d42; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .zcard:hover .orb svg, .diff-card:hover .diff-ico svg { color: #fff; } /* dark mode: hover turns the card white */ :root[data-theme="dark"] .zcard:hover, :root[data-theme="dark"] .diff-card:hover { background: #ffffff; } :root[data-theme="dark"] .zcard:hover h3, :root[data-theme="dark"] .diff-card:hover h3 { color: #0a0f20; } :root[data-theme="dark"] .zcard:hover p, :root[data-theme="dark"] .diff-card:hover p { color: #45506e; } :root[data-theme="dark"] .zcard:hover .orb, :root[data-theme="dark"] .diff-card:hover .diff-ico { background: #eef1f7; box-shadow: inset 0 0 0 1px rgba(18, 28, 58, .14); } :root[data-theme="dark"] .zcard:hover .orb svg, :root[data-theme="dark"] .diff-card:hover .diff-ico svg { color: #0a0f20; } /* ---- v2.1: embossed pass — every visible object gets a dark line core and a * sharp, short, solid black offset shadow (no blur). Appended last so these * override the soft shadows above at equal specificity. ---- */ :root { --line: rgba(13, 15, 28, .42); --hard: rgba(13, 15, 28, .32); } :root[data-theme="dark"] { --line: rgba(0, 0, 0, .55); --hard: rgba(0, 0, 0, .45); } .btn { box-shadow: inset 0 0 0 1.5px var(--line), 3px 4px 0 var(--hard); } .btn:hover, .btn-primary:hover, .btn-ghost:hover { transform: translate(-1px, -2px); box-shadow: inset 0 0 0 1.5px var(--line), 5px 6px 0 var(--hard); } .btn[disabled], .btn:disabled { box-shadow: inset 0 0 0 1.5px var(--line), 2px 3px 0 var(--hard); } .cta-band .btn-light, .cta-band .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line), 3px 4px 0 var(--hard); } .ai-chip, .lang-select, .theme-toggle, .nav-toggle, .wm-edit, .price-badge, .mode-tag, .usage-unlimited { box-shadow: inset 0 0 0 1.5px var(--line), 2px 3px 0 var(--hard); } .zcard, .step, .diff-card, .mode-card, details, .trial-banner, .price-card, .pricing-card, .callout, .auth-card, .price-tagline, .wm { box-shadow: inset 0 0 0 1.5px var(--line), 5px 6px 0 var(--hard); } .zcard:hover, .diff-card:hover, .mode-card:hover { transform: translate(-2px, -3px); box-shadow: inset 0 0 0 1.5px var(--line), 8px 9px 0 var(--hard); } .price-card-best { box-shadow: inset 0 0 0 2px #7c5cff, 5px 6px 0 var(--hard); } .orb, .diff-ico, .step .n { box-shadow: inset 0 0 0 1.5px var(--line), 2px 3px 0 var(--hard); } .mode-shot { box-shadow: inset 0 0 0 1.5px var(--line), 4px 5px 0 var(--hard); } .hero-img { border: 1.5px solid var(--line); box-shadow: 5px 6px 0 var(--hard); } .cta-band { box-shadow: inset 0 0 0 1.5px var(--line), 6px 7px 0 var(--hard); } .faq details { margin-bottom: 14px; } .auth-input, .auth-or, input[type="email"], input[type="text"] { box-shadow: inset 0 0 0 1.5px var(--line); } /* ---- v2.4: calmer, more open hero — smaller lead, more air before the * "Why AI Audit is different" section so the top does not feel busy. ---- */ .hero .lead { font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.62; max-width: 500px; margin-bottom: 26px; } .hero { padding: 46px 0 44px; } .ai-row { margin-top: 58px; } @media (max-width: 900px) { .hero .lead { margin-left: auto; margin-right: auto; } } /* ---- v2.5: more air under section eyebrows, two-button mode CTA, how-to link ---- */ .section-head .eyebrow { margin-bottom: 16px; } /* Sections whose head is only the small label (no heading): tighten the gap. */ #different .section-head, #modes .section-head { margin-bottom: 30px; } #different .section-head .eyebrow, #modes .section-head .eyebrow { margin-bottom: 0; } .mode-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn.mode-howto { background: transparent; color: var(--ink-2); box-shadow: none; padding: 12px 14px; font-weight: 650; } .btn.mode-howto:hover { color: var(--ink); background: var(--bg-2); box-shadow: none; transform: none; } .howto-play { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ff3b30; color: #fff; font-size: 9px; padding-left: 1px; }