@font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/static/fonts/inter.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/static/fonts/space-grotesk.woff2") format("woff2"); } :root { --radius: 0.75rem; --background: oklch(0.16 0.02 265); --foreground: oklch(0.97 0.005 250); --surface: oklch(0.19 0.025 265); --surface-elevated: oklch(0.22 0.03 265); --card: oklch(0.20 0.025 265); --primary: oklch(0.70 0.18 250); --primary-foreground: oklch(0.13 0.02 265); --primary-glow: oklch(0.78 0.20 290); --muted-foreground: oklch(0.68 0.02 260); --accent: oklch(0.78 0.18 195); --destructive: oklch(0.65 0.22 25); --success: oklch(0.72 0.16 160); --border: oklch(1 0 0 / 8%); --border-strong: oklch(1 0 0 / 14%); --input: oklch(1 0 0 / 10%); --ring: oklch(0.70 0.18 250); --gradient-primary: linear-gradient(135deg, oklch(0.70 0.18 250), oklch(0.78 0.20 290)); --gradient-aurora: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.70 0.18 250 / 0.25), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 20%, oklch(0.78 0.18 195 / 0.18), transparent 70%), radial-gradient(ellipse 60% 50% at 20% 30%, oklch(0.78 0.20 290 / 0.18), transparent 70%); --gradient-card: linear-gradient(180deg, oklch(0.22 0.03 265 / 0.8), oklch(0.18 0.025 265 / 0.6)); --shadow-glow: 0 0 60px -10px oklch(0.70 0.18 250 / 0.45); --shadow-elegant: 0 20px 60px -20px oklch(0.05 0 0 / 0.6), 0 1px 0 0 oklch(1 0 0 / 0.05) inset; } * { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; scroll-padding-top:5rem; color-scheme:dark; } body { background:var(--background); color:var(--foreground); font-family:"Inter",system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4 { font-family:"Space Grotesk",system-ui,sans-serif; letter-spacing:-0.02em; line-height:1.1; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; } svg.ico { width:1.25rem; height:1.25rem; flex-shrink:0; } ul { list-style:none; } .container { width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.5rem; } .container.narrow { max-width:52rem; } @media (min-width:768px){ .container { padding-inline:2.5rem; } } .text-gradient { background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; } .accent { color:var(--primary); } .muted { color:var(--muted-foreground); } .sm { font-size:0.875rem; } .xs { font-size:0.75rem; } .center { text-align:center; } .btn { display:inline-flex; align-items:center; gap:0.5rem; font-weight:500; padding:0.75rem 1.5rem; border-radius:0.625rem; border:0; cursor:pointer; font-size:0.9rem; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; font-family:inherit; } .btn .ico { width:1rem; height:1rem; } .btn-sm { padding:0.5rem 1rem; font-size:0.85rem; } .btn-block { width:100%; justify-content:center; } .btn-primary { background:var(--gradient-primary); color:var(--primary-foreground); box-shadow:var(--shadow-glow); } .btn-primary:hover { transform:scale(1.02); } .btn-ghost { background:var(--surface); color:var(--foreground); border:1px solid var(--border-strong); } .btn-ghost:hover { background:var(--surface-elevated); } .nav { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:oklch(0.16 0.02 265 / 0.7); backdrop-filter:blur(16px); } .nav-inner { display:flex; align-items:center; justify-content:space-between; padding-block:1rem; } .brand { display:flex; align-items:center; gap:0.6rem; } .brand img { width:2.25rem; height:2.25rem; object-fit:contain; } .brand-name { font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.05rem; } .nav-links { display:none; gap:2rem; font-size:0.875rem; color:var(--muted-foreground); } .nav-links a:hover { color:var(--foreground); } .nav-cta { display:flex; align-items:center; gap:0.75rem; } .nav-sales { display:none; font-size:0.875rem; color:var(--muted-foreground); } .nav-sales:hover { color:var(--foreground); } @media (min-width:768px){ .nav-links { display:flex; } .nav-sales { display:inline; } } .aurora { position:absolute; inset:0; z-index:-1; background:var(--gradient-aurora); pointer-events:none; } .grid-pattern { position:absolute; inset:0; z-index:-1; opacity:0.4; pointer-events:none; background-image:linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px), linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%); mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%); } .hero { position:relative; isolation:isolate; overflow:hidden; padding:6rem 0 5rem; } @media (min-width:768px){ .hero { padding:8rem 0 7rem; } } .hero-copy { max-width:48rem; margin-inline:auto; text-align:center; } .hero h1 { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:600; margin-bottom:1.5rem; } .lead { font-size:1.0625rem; color:var(--muted-foreground); max-width:42rem; margin-inline:auto; } .hero .lead { margin-top:1.5rem; } .badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.3rem 0.75rem; border-radius:999px; font-size:0.75rem; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted-foreground); margin-bottom:1.5rem; } .badge .dot { width:0.4rem; height:0.4rem; border-radius:999px; background:var(--success); animation:pulse 2s infinite; } @keyframes pulse { 50% { opacity:0.4; } } .hero-cta { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center; margin-top:2.25rem; } .hero-cta.center { justify-content:center; } .hero-trust { display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; justify-content:center; margin-top:2.5rem; font-size:0.75rem; color:var(--muted-foreground); } .hero-trust span { display:inline-flex; align-items:center; gap:0.4rem; } .hero-trust .ico { width:0.85rem; height:0.85rem; } .dashmock { position:relative; max-width:72rem; margin:4rem auto 0; } .dashmock-glow { position:absolute; inset:-1rem; z-index:-1; background:var(--gradient-primary); opacity:0.3; filter:blur(48px); border-radius:1.5rem; } .dashmock-frame { border:1px solid var(--border-strong); background:var(--gradient-card); border-radius:1rem; padding:0.5rem; box-shadow:var(--shadow-elegant); } .dashmock-frame > div, .dashmock-bar { border:1px solid var(--border); background:oklch(0.16 0.02 265 / 0.6); border-radius:0.75rem; } .dashmock-bar { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; border-radius:0.75rem; } .dashmock-bar .muted:last-child { margin-left:auto; } .dots { display:inline-flex; gap:0.35rem; } .dots i { width:0.6rem; height:0.6rem; border-radius:999px; background:var(--muted-foreground); opacity:0.5; } .dashmock-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; padding:1.25rem; } @media (min-width:768px){ .dashmock-metrics { grid-template-columns:repeat(4,1fr); } } .metric { border:1px solid var(--border); background:var(--surface); border-radius:0.6rem; padding:1rem; } .metric-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:0.35rem; } .metric strong { font-family:"Space Grotesk",sans-serif; font-size:1.4rem; } .up { color:var(--success); font-size:0.75rem; } .dashmock-lower { display:grid; gap:0.75rem; padding:0 1.25rem 1.25rem; } @media (min-width:768px){ .dashmock-lower { grid-template-columns:2fr 1fr; } } .funnel,.states { border:1px solid var(--border); background:var(--surface); border-radius:0.6rem; padding:1rem; } .funnel-head,.states-title { display:flex; justify-content:space-between; margin-bottom:0.75rem; } .bars { display:flex; align-items:flex-end; gap:0.5rem; height:8rem; } .bar { flex:1; border-radius:0.25rem 0.25rem 0 0; background:var(--gradient-primary); opacity:0.8; height:0; transition:height 0.9s cubic-bezier(0.22,1,0.36,1); } .states ul li { display:flex; justify-content:space-between; font-size:0.75rem; padding:0.25rem 0; } .logos { border-block:1px solid var(--border); background:var(--surface); } .logos .container { padding-block:2rem; } .logos-eyebrow { text-align:center; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--muted-foreground); margin-bottom:1.25rem; } .logos-row { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem 2.5rem; color:var(--muted-foreground); } .logos-row span { font-family:"Space Grotesk",sans-serif; font-weight:500; } .section { position:relative; padding:5.5rem 0; } .section-alt { background:var(--surface); border-block:1px solid var(--border); } .section-head { max-width:42rem; margin:0 auto 3.5rem; text-align:center; } .section-head h2 { font-size:clamp(1.9rem,4vw,3rem); font-weight:600; } .section-head p { margin-top:1rem; color:var(--muted-foreground); } .eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.7rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted-foreground); border:1px solid var(--border-strong); background:var(--surface); border-radius:999px; padding:0.3rem 0.75rem; margin-bottom:1rem; } .eyebrow .ico { width:0.8rem; height:0.8rem; } .grid { display:grid; gap:1rem; } .grid-2 { grid-template-columns:1fr; } .grid-3 { grid-template-columns:1fr; } .grid-4 { grid-template-columns:1fr; } @media (min-width:640px){ .grid-3,.grid-4 { grid-template-columns:1fr 1fr; } } @media (min-width:768px){ .grid-2 { grid-template-columns:1fr 1fr; } } @media (min-width:1024px){ .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } } .card { border:1px solid var(--border); background:var(--card); border-radius:1rem; padding:1.5rem; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .card h3 { font-size:1.05rem; font-weight:600; } .card p { margin-top:0.5rem; font-size:0.875rem; color:var(--muted-foreground); } .card-pillar { background:var(--gradient-card); } .card-pillar:hover, .card:hover { border-color:var(--border-strong); } .card-lift:hover { transform:translateY(-3px); box-shadow:var(--shadow-elegant); } .ico-box { width:2.75rem; height:2.75rem; border-radius:0.7rem; border:1px solid var(--border-strong); background:var(--surface-elevated); display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.25rem; color:var(--primary); } .ico-box.accent { color:var(--accent); margin-bottom:0; } .ico-box .ico { width:1.25rem; height:1.25rem; } .ico-grad { width:2.5rem; height:2.5rem; border-radius:0.6rem; background:var(--gradient-primary); color:var(--primary-foreground); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-glow); margin-bottom:1.25rem; } .ico-grad .ico { width:1.2rem; height:1.2rem; } .ico-plain { color:var(--primary); margin-bottom:1rem; } .ico-plain .ico { width:1.5rem; height:1.5rem; } .card-row { display:flex; align-items:flex-start; gap:1rem; } .card-rt { font-family:"Space Grotesk",sans-serif; font-weight:600; } .card-agent { position:relative; overflow:hidden; background:var(--gradient-card); } .agent-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; } .agent-top .ico-grad { margin-bottom:0; } .tag { font-size:0.625rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted-foreground); border:1px solid var(--border-strong); background:var(--surface); border-radius:999px; padding:0.15rem 0.6rem; } .card-col { background:var(--gradient-card); padding:2rem; } .benefit-list { display:grid; gap:1.25rem; margin-top:1.5rem; } .benefit-list li { display:flex; gap:1rem; } .benefit-list .ico-box { margin-bottom:0; } .bt { font-weight:500; } .benefit-list p { margin-top:0.15rem; } .problem { display:flex; align-items:flex-start; gap:0.75rem; border:1px solid var(--border); background:var(--card); border-radius:0.75rem; padding:1.25rem; } .problem-mark { display:grid; place-items:center; width:1.5rem; height:1.5rem; flex-shrink:0; border-radius:0.4rem; background:oklch(0.65 0.22 25 / 0.15); color:var(--destructive); font-weight:600; font-size:0.8rem; } .problem p { font-size:0.9rem; } .journey { max-width:44rem; margin-inline:auto; border:1px solid var(--border); background:var(--gradient-card); border-radius:1rem; padding:2rem; box-shadow:var(--shadow-elegant); } .journey h4 { font-weight:600; margin-bottom:1.25rem; } .journey-list { display:grid; gap:0.625rem; } .journey-list li { display:flex; align-items:center; gap:0.6rem; border:1px solid var(--border); background:var(--surface); border-radius:0.6rem; padding:0.6rem 0.9rem; font-size:0.9rem; } .journey-n { display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:0.35rem; background:var(--gradient-primary); color:var(--primary-foreground); font-size:0.625rem; font-weight:600; } .journey-arrow { width:0.85rem; height:0.85rem; color:var(--muted-foreground); margin-left:auto; } .usecase { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; } .uc-arrow { color:var(--muted-foreground); } .proc-n { font-family:"Space Grotesk",sans-serif; font-size:1.75rem; font-weight:600; margin-bottom:0.75rem; } .faq { display:grid; gap:0; border:1px solid var(--border); background:var(--card); border-radius:1rem; overflow:hidden; } .faq-item + .faq-item { border-top:1px solid var(--border); } .faq-q { width:100%; background:none; border:0; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; padding:1.25rem 1.5rem; font-size:0.95rem; font-weight:500; font-family:inherit; } .faq-chevron { color:var(--muted-foreground); transition:transform .3s ease; width:1rem; height:1rem; } .faq-item.open .faq-chevron { transform:rotate(180deg); } .faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq-item.open .faq-a { max-height:18rem; } .faq-a p { padding:0 1.5rem 1.5rem; font-size:0.875rem; color:var(--muted-foreground); } .section-contato { position:relative; isolation:isolate; overflow:hidden; } .section-contato .aurora { opacity:0.6; } .contato-grid { display:grid; gap:3rem; align-items:start; } @media (min-width:1024px){ .contato-grid { grid-template-columns:1fr 1fr; } } .contato-grid h2 { font-size:clamp(1.8rem,4vw,3rem); font-weight:600; margin-top:0.75rem; } .check-list { display:grid; gap:0.75rem; margin-top:2rem; font-size:0.9rem; } .check-list li { display:flex; align-items:center; gap:0.6rem; } .check-list .ico { width:1rem; height:1rem; color:var(--success); } .lead-form { background:var(--gradient-card); border-color:var(--border-strong); box-shadow:var(--shadow-elegant); padding:1.75rem; } .lead-form h3 { font-weight:600; font-size:1.15rem; } .lead-form > .muted { margin-top:0.25rem; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; } .form-grid label { display:block; } .form-grid .col-2 { grid-column:span 2; } .form-grid label span { display:block; font-size:0.7rem; font-weight:500; color:var(--muted-foreground); margin-bottom:0.4rem; } .form-grid input, .form-grid select, .form-grid textarea { width:100%; padding:0.65rem 0.8rem; border-radius:0.55rem; background:oklch(0.16 0.02 265 / 0.6); border:1px solid var(--input); color:var(--foreground); font-size:0.875rem; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px oklch(0.70 0.18 250 / 0.3); } .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .form-msg { margin-top:0.9rem; font-size:0.875rem; min-height:1.1rem; } .form-msg.ok { color:var(--success); } .form-msg.err { color:var(--destructive); } .lead-form.sent .form-grid, .lead-form.sent > .muted { display:none; } .final-cta { position:relative; isolation:isolate; overflow:hidden; max-width:64rem; margin-inline:auto; text-align:center; border:1px solid var(--border-strong); background:var(--gradient-card); border-radius:1.5rem; padding:3rem 2rem; box-shadow:var(--shadow-elegant); } .final-cta .aurora { opacity:0.7; } .final-cta h2 { font-size:clamp(1.8rem,4vw,3rem); font-weight:600; } .final-cta p { margin:1rem auto 0; max-width:36rem; color:var(--muted-foreground); } @media (min-width:768px){ .final-cta { padding:4rem; } } .footer { border-top:1px solid var(--border); background:var(--surface); } .footer-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; padding-block:2rem; font-size:0.875rem; color:var(--muted-foreground); } .footer .brand img { width:1.75rem; height:1.75rem; } .footer .brand-name { font-size:0.95rem; color:var(--foreground); } .footer-links { display:flex; align-items:center; gap:1.5rem; } .footer-links a:hover { color:var(--foreground); } @media (min-width:768px){ .footer-inner { flex-direction:row; justify-content:space-between; } } .cfg-head { text-align:center; max-width:48rem; margin:0 auto 3rem; } .cfg-head h2 { font-size:clamp(1.9rem,4vw,3rem); font-weight:600; margin-top:0.75rem; } .cfg-head p { margin-top:1rem; color:var(--muted-foreground); } .cfg-app { max-width:72rem; margin-inline:auto; } .cfg-noscript { text-align:center; color:var(--muted-foreground); } .cfg-grid { display:grid; gap:2.5rem; align-items:start; } @media (min-width:1024px){ .cfg-grid { grid-template-columns:1fr 1fr; } } .cfg-step { border:1px solid var(--border); background:var(--gradient-card); border-radius:1rem; padding:1.5rem; box-shadow:var(--shadow-elegant); } .cfg-step-head { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.5rem; } .cfg-step-num { width:2rem; height:2rem; border-radius:999px; background:var(--gradient-primary); color:var(--primary-foreground); display:grid; place-items:center; font-weight:700; font-size:0.875rem; box-shadow:var(--shadow-glow); flex-shrink:0; } .cfg-step-head h3 { font-weight:600; } .cfg-step-head p { font-size:0.8rem; color:var(--muted-foreground); } .cfg-opts { display:grid; gap:0.75rem; } .cfg-opts.cols2 { grid-template-columns:1fr; } @media (min-width:640px){ .cfg-opts.cols2 { grid-template-columns:1fr 1fr; } } .cfg-opts.scroll { max-height:24rem; overflow-y:auto; padding-right:0.25rem; } .seg-btn { display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; padding:1rem; border-radius:0.7rem; border:1px solid var(--border); background:var(--background); cursor:pointer; transition:transform .2s ease, border-color .2s ease, background .2s ease; color:inherit; font-family:inherit; } .seg-btn:hover { transform:translateY(-2px); background:var(--surface-elevated); border-color:var(--border-strong); } .seg-btn.sel { background:oklch(0.70 0.18 250 / 0.1); border-color:var(--primary); } .seg-btn .ico { width:1.5rem; height:1.5rem; color:var(--muted-foreground); } .seg-btn.sel .ico { color:var(--primary); } .seg-btn b { font-size:0.875rem; font-weight:600; } .seg-btn small { font-size:0.7rem; color:var(--muted-foreground); } .toggle { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; border-radius:0.55rem; border:1px solid var(--border); background:var(--background); cursor:pointer; transition:transform .2s ease, border-color .2s ease; } .toggle:hover { transform:translateY(-2px); } .toggle.sel { background:oklch(0.70 0.18 250 / 0.1); border-color:var(--primary); } .toggle-ico { display:grid; place-items:center; width:2rem; height:2rem; border-radius:0.45rem; background:var(--surface-elevated); flex-shrink:0; } .toggle.sel .toggle-ico { background:var(--gradient-primary); color:var(--primary-foreground); } .toggle-ico .ico { width:1rem; height:1rem; } .toggle-txt { flex:1; min-width:0; } .toggle-txt b { font-size:0.85rem; display:block; } .toggle-txt small { font-size:0.7rem; color:var(--muted-foreground); } .toggle-check { color:var(--primary); width:1rem; height:1rem; flex-shrink:0; } .cfg-field label, .cfg-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:0.6rem; } .cfg-field input, .cfg-form input, .cfg-form textarea { width:100%; padding:0.65rem 0.8rem; border-radius:0.55rem; background:oklch(0.16 0.02 265 / 0.6); border:1px solid var(--border); color:var(--foreground); font-size:0.875rem; font-family:inherit; } .cfg-field input:focus, .cfg-form input:focus, .cfg-form textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px oklch(0.70 0.18 250 / 0.3); } .cfg-group { margin-top:1.5rem; } .cfg-group .toggle { margin-bottom:0.5rem; } .cfg-nav { display:flex; gap:0.75rem; margin-top:1.5rem; } .cfg-nav .btn-ghost { padding:0.7rem 1.1rem; } .cfg-nav .grow { flex:1; } .btn:disabled { opacity:0.5; cursor:not-allowed; } .cfg-preview { position:sticky; top:6rem; display:grid; gap:1.5rem; } .cfg-avatar { position:relative; border:1px solid var(--border); background:var(--gradient-card); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-elegant); aspect-ratio:1; display:grid; place-items:center; } .cfg-avatar .blob { background:oklch(0.70 0.18 250 / 0.2); backdrop-filter:blur(8px); border-radius:999px; padding:2rem; animation:pulse 2.5s infinite; } .cfg-avatar .blob .ico { width:3rem; height:3rem; color:var(--primary); } .cfg-name-chip { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); background:oklch(0.20 0.025 265 / 0.9); border:1px solid var(--border); border-radius:0.5rem; padding:0.35rem 1rem; font-size:0.85rem; font-weight:500; white-space:nowrap; } .cfg-dots { position:absolute; top:1.25rem; left:1.25rem; display:grid; gap:0.5rem; } .cfg-dots i { width:0.6rem; height:0.6rem; border-radius:999px; background:var(--muted); display:block; } .cfg-dots i.on { background:var(--primary); box-shadow:0 0 6px var(--primary); } .cfg-badges { position:absolute; top:1.25rem; right:1.25rem; display:grid; gap:0.5rem; justify-items:end; } .cfg-badge { display:inline-flex; align-items:center; gap:0.5rem; background:oklch(0.20 0.025 265 / 0.9); border:1px solid var(--border); border-radius:0.5rem; padding:0.3rem 0.7rem; font-size:0.7rem; font-weight:500; } .cfg-badge .b-dot { width:0.4rem; height:0.4rem; border-radius:999px; background:var(--success); } .cfg-progress { border:1px solid var(--border); background:var(--card); border-radius:1rem; padding:1.25rem; } .cfg-progress h4 { font-size:0.85rem; font-weight:600; margin-bottom:1rem; } .cfg-progress .row { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; padding:0.2rem 0; } .cfg-progress .row i { width:0.4rem; height:0.4rem; border-radius:999px; background:var(--muted); display:block; } .cfg-progress .row.on i { background:var(--success); } .cfg-progress .row .lbl { color:var(--muted-foreground); width:8rem; } .cfg-progress .row .val { font-weight:500; } .cfg-success { text-align:center; padding:3rem 1rem; } .cfg-success .chk { display:grid; place-items:center; width:3.5rem; height:3.5rem; margin:0 auto 1.25rem; border-radius:999px; background:oklch(0.72 0.16 160 / 0.2); color:var(--success); } .cfg-form { max-width:36rem; margin-inline:auto; display:grid; gap:1.25rem; } .cfg-form-wrap { max-width:40rem; margin-inline:auto; border:1px solid var(--border); background:var(--gradient-card); border-radius:1rem; padding:2rem; box-shadow:var(--shadow-elegant); } .error-page { min-height:80vh; display:grid; place-items:center; text-align:center; } .error-box { max-width:32rem; } .error-code { font-family:"Space Grotesk",sans-serif; font-size:6rem; font-weight:700; line-height:1; } .error-box h2 { margin:1rem 0 0.5rem; } .error-box p { color:var(--muted-foreground); margin-bottom:1.5rem; } .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } *{ animation:none !important; } }