@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#10110f; --paper:#f3f0e9; --lime:#ceff5f; --acid:#b9e653; --muted:#9b9d96; --line:rgba(243,240,233,.17); --warm:#e6c8aa; --max:1320px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } ::selection { background:var(--lime); color:var(--ink); }
.site-shell { overflow:hidden; }.grain { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.nav { position:fixed; inset:0 0 auto; z-index:15; padding:20px clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; transition:.4s ease; }.nav.scrolled { background:rgba(16,17,15,.86); backdrop-filter:blur(15px); padding-block:13px; border-bottom:1px solid var(--line); }.brand { display:inline-flex; align-items:center; transition:opacity .2s ease; }.brand:hover { opacity:.92; }.brand img { width:clamp(142px,13vw,176px); max-height:36px; height:auto; display:block; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition:transform .25s ease,filter .25s ease; }.brand:hover img { transform:scale(1.02); filter:drop-shadow(0 2px 10px rgba(206,255,95,.22)); }.footer-brand img { width:clamp(165px,18vw,215px); max-height:46px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }.nav-links { display:flex; gap:25px; align-items:center; font-size:12px; font-weight:700; }.nav-links a { opacity:.75; transition:.2s; }.nav-links a:hover,.nav-links a.active { opacity:1; color:var(--lime); }.pill { display:inline-flex; align-items:center; gap:9px; padding:13px 18px; background:var(--lime); color:var(--ink); border-radius:99px; font-size:12px; font-weight:800; border:0; cursor:pointer; transition:transform .2s,background .2s; }.pill:hover { transform:translateY(-3px); background:#e4ff9f; }.pill.dark { background:var(--ink); color:var(--paper); }.pill.outline { background:transparent; color:var(--paper); border:1px solid var(--line); }.menu-button { display:none; background:transparent; border:0; color:var(--paper); font-weight:800; }
.hero { position:relative; min-height:100svh; display:grid; align-items:end; padding:140px clamp(20px,7vw,112px) 68px; isolation:isolate; }.hero-copy { position:relative; z-index:3; max-width:900px; }.eyebrow { display:flex; align-items:center; gap:10px; color:var(--lime); font:500 11px/1.2 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }.eyebrow::before { content:''; width:7px; height:7px; background:currentColor; border-radius:50%; box-shadow:0 0 0 5px rgba(206,255,95,.12); }.display { margin:20px 0 26px; font-size:clamp(50px,8.2vw,128px); line-height:.89; letter-spacing:-.075em; font-weight:700; }.display em { font-family:'Playfair Display',serif; font-weight:500; letter-spacing:-.08em; }.hero p { max-width:550px; color:#c1c1bb; font-size:clamp(15px,1.35vw,19px); line-height:1.65; }.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:35px; }.hero-meta { position:absolute; right:clamp(20px,6vw,90px); bottom:61px; z-index:3; writing-mode:vertical-rl; font:11px 'DM Mono',monospace; color:var(--muted); letter-spacing:.04em; }
.hero-art { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; background:radial-gradient(circle at 68% 49%,rgba(137,173,76,.13),transparent 28%),radial-gradient(circle at 77% 20%,rgba(220,148,78,.11),transparent 19%); }.orb { position:absolute; width:clamp(300px,38vw,560px); aspect-ratio:1; left:58%; top:16%; border-radius:50%; background:radial-gradient(circle at 34% 30%,#fbfac4 0 2%,#aaca57 16%,#2e3c25 47%,#161914 68%); box-shadow:0 0 100px rgba(191,238,82,.11); animation:drift 12s ease-in-out infinite; }.orbit { position:absolute; border:1px solid rgba(206,255,95,.23); border-radius:50%; left:53%; top:9%; width:clamp(400px,52vw,780px); aspect-ratio:1; transform:rotate(-22deg); }.orbit::after { content:''; position:absolute; width:12px; height:12px; background:var(--lime); border-radius:50%; left:12%; top:22%; box-shadow:0 0 0 9px rgba(206,255,95,.1); }.panel { position:absolute; backdrop-filter:blur(12px); background:rgba(25,28,22,.58); border:1px solid rgba(243,240,233,.2); box-shadow:0 26px 70px rgba(0,0,0,.35); }.panel-a { width:280px; height:185px; right:5%; top:18%; transform:rotate(9deg); padding:18px; animation:float 8s ease-in-out infinite; }.panel-b { width:205px; height:285px; right:32%; top:53%; transform:rotate(-9deg); padding:15px; animation:float 9s -3s ease-in-out infinite; }.window-top { display:flex; gap:5px; }.window-top i { width:6px; height:6px; background:#85877f; border-radius:50%; }.window-top i:first-child { background:var(--lime); }.scribble { margin-top:32px; width:76%; height:46px; border-top:2px solid var(--lime); border-bottom:2px solid rgba(243,240,233,.65); transform:skewY(-14deg); }.mini-type { position:absolute; bottom:15px; left:16px; font:10px 'DM Mono',monospace; color:var(--lime); }.numbers { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:24px; }.numbers span { padding:11px 8px; background:rgba(243,240,233,.08); color:var(--paper); font:12px 'DM Mono',monospace; }.vertical-word { position:absolute; right:17px; top:59px; font-size:42px; line-height:.78; letter-spacing:-.08em; writing-mode:vertical-rl; color:rgba(243,240,233,.8); }
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:17px 0; }.marquee-inner { display:inline-flex; gap:32px; align-items:center; min-width:max-content; animation:marquee 23s linear infinite; font:600 13px 'DM Mono',monospace; color:#d7d5cc; }.marquee b { color:var(--lime); font-size:20px; }
.section { max-width:var(--max); margin:auto; padding:clamp(85px,12vw,175px) clamp(20px,5vw,64px); }.section.dark-fill { max-width:none; background:#171914; }.section-kicker { color:var(--lime); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }.section-title { margin:18px 0 0; max-width:900px; font-size:clamp(40px,6vw,85px); line-height:.94; letter-spacing:-.075em; }.section-title em { font-family:'Playfair Display',serif; font-weight:500; }.split-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; }.split-heading > p { max-width:360px; margin:0; color:var(--muted); line-height:1.7; font-size:14px; }
.services-list { margin-top:70px; border-top:1px solid var(--line); }.service-row { position:relative; display:grid; grid-template-columns:80px minmax(170px,1.25fr) 1fr 38px; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding:26px 0; transition:.35s ease; }.service-row:hover { padding-inline:18px; background:var(--lime); color:var(--ink); }.service-row span { color:var(--muted); font:11px 'DM Mono',monospace; }.service-row:hover span { color:#485131; }.service-row h3 { margin:0; font-size:clamp(21px,2.5vw,37px); letter-spacing:-.06em; }.service-row p { margin:0; max-width:340px; color:inherit; opacity:.74; line-height:1.55; font-size:13px; }.service-row strong { font-size:22px; font-weight:400; text-align:right; }
.project-stack { margin-top:68px; }.project { position:relative; min-height:550px; padding:28px; margin-bottom:24px; display:flex; align-items:end; overflow:hidden; background:#292c23; border:1px solid rgba(243,240,233,.12); }.project:nth-child(2) { background:#4d3a31; }.project:nth-child(3) { background:#1d3041; }.project::before { content:''; position:absolute; inset:11% 11% 12%; background:linear-gradient(135deg,rgba(243,240,233,.09),transparent); border:1px solid rgba(243,240,233,.27); transform:rotate(-3deg); transition:transform .6s cubic-bezier(.2,.8,.2,1); }.project:hover::before { transform:rotate(2deg) scale(1.04); }.project::after { content:''; position:absolute; width:48%; aspect-ratio:1; border-radius:50%; right:8%; top:10%; background:radial-gradient(circle at 35% 30%,var(--lime),rgba(206,255,95,.1) 40%,transparent 68%); filter:blur(2px); }.project:nth-child(2)::after { background:radial-gradient(circle at 35% 30%,#f1b36c,rgba(241,179,108,.1) 40%,transparent 68%); }.project:nth-child(3)::after { background:radial-gradient(circle at 35% 30%,#8ccef1,rgba(140,206,241,.1) 40%,transparent 68%); }.project-info { position:relative; z-index:1; max-width:520px; }.project-label { font:11px 'DM Mono',monospace; color:var(--lime); }.project h3 { margin:10px 0; font-size:clamp(34px,5vw,64px); line-height:.95; letter-spacing:-.08em; }.project p { max-width:385px; margin:0; line-height:1.6; color:#dddcd4; font-size:14px; }.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:19px; }.tags span { padding:7px 9px; border:1px solid rgba(243,240,233,.35); border-radius:30px; font:10px 'DM Mono',monospace; }.placeholder-note { margin-top:20px; color:var(--muted); font-size:12px; font-style:italic; }
.demo-offer { margin-top:65px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:1px; background:var(--line); border:1px solid var(--line); }.demo-lead { padding:clamp(32px,5vw,70px); background:#22251e; position:relative; overflow:hidden; }.demo-lead::after { content:'01'; position:absolute; right:-.08em; bottom:-.35em; color:transparent; -webkit-text-stroke:1px rgba(206,255,95,.25); font-size:clamp(160px,24vw,370px); font-weight:800; letter-spacing:-.15em; }.demo-lead > * { position:relative; z-index:1; }.demo-lead h3 { max-width:630px; margin:15px 0 22px; font-size:clamp(41px,5.2vw,74px); line-height:.92; letter-spacing:-.08em; }.demo-lead p { max-width:480px; color:#d8d7cf; line-height:1.7; font-size:15px; }.demo-promise { padding:clamp(32px,4vw,58px); background:var(--lime); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; }.demo-promise h3 { margin:15px 0; font-size:clamp(28px,3vw,42px); line-height:.98; letter-spacing:-.07em; }.demo-promise p { margin:0; max-width:340px; line-height:1.6; font-size:14px; }.demo-promise .pill { margin-top:32px; align-self:flex-start; }.offer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1px; background:var(--line); }.offer-item { min-height:180px; padding:25px; background:var(--ink); }.offer-item span { color:var(--lime); font:10px 'DM Mono',monospace; }.offer-item h3 { margin:34px 0 0; font-size:20px; letter-spacing:-.055em; }.offer-item p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.statements { margin-top:70px; display:grid; grid-template-columns:repeat(5,1fr); border-left:1px solid var(--line); }.statement { min-height:300px; padding:20px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; transition:.3s; }.statement:hover { background:var(--lime); color:var(--ink); transform:translateY(-12px); }.statement-number { color:var(--lime); font:11px 'DM Mono',monospace; }.statement:hover .statement-number { color:var(--ink); }.statement h3 { margin:0; font-size:clamp(19px,2vw,29px); letter-spacing:-.06em; }.statement p { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }.statement:hover p { color:#3d432e; }
.process { margin-top:70px; counter-reset:steps; }.step { display:grid; grid-template-columns:100px 1fr minmax(180px, .7fr); align-items:center; padding:25px 0; border-top:1px solid var(--line); }.step:last-child { border-bottom:1px solid var(--line); }.step::before { counter-increment:steps; content:'0' counter(steps); color:var(--lime); font:11px 'DM Mono',monospace; }.step h3 { margin:0; font-size:clamp(26px,3.5vw,49px); letter-spacing:-.07em; }.step p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }
.outcomes { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:65px; background:var(--line); }.outcome { background:var(--ink); min-height:250px; padding:27px; display:flex; flex-direction:column; justify-content:space-between; }.outcome span { font:11px 'DM Mono',monospace; color:var(--lime); }.outcome h3 { margin:0; font-size:clamp(25px,3vw,42px); letter-spacing:-.065em; max-width:300px; }.world { position:relative; min-height:410px; margin-top:65px; border:1px solid var(--line); overflow:hidden; background:radial-gradient(ellipse at 50% 53%,rgba(206,255,95,.16),transparent 40%); }.world::before { content:''; position:absolute; width:620px; height:620px; border:1px solid rgba(206,255,95,.25); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-45%); box-shadow:0 0 0 64px rgba(206,255,95,.025),0 0 0 130px rgba(206,255,95,.018); }.world-line { position:absolute; height:1px; background:rgba(206,255,95,.5); transform-origin:left center; }.world-line:nth-child(1){left:24%;top:35%;width:43%;transform:rotate(25deg)} .world-line:nth-child(2){left:48%;top:55%;width:30%;transform:rotate(-35deg)} .world-line:nth-child(3){left:34%;top:63%;width:29%;transform:rotate(-70deg)}.pin { position:absolute; width:9px; height:9px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 7px rgba(206,255,95,.11); }.pin.p1{left:24%;top:35%}.pin.p2{left:66%;top:53%}.pin.p3{left:58%;top:29%}.pin.p4{left:34%;top:63%}.world-copy { position:absolute; bottom:25px; left:25px; z-index:2; }.world-copy h3 { margin:8px 0; font-size:34px; letter-spacing:-.07em; }.world-copy p { max-width:400px; color:var(--muted); font-size:13px; line-height:1.6; }
.placeholder { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:66px 0; margin-top:65px; }.placeholder blockquote { margin:0; max-width:810px; font-family:'Playfair Display',serif; font-size:clamp(31px,5vw,65px); line-height:1.02; letter-spacing:-.06em; }.placeholder p { color:var(--muted); font-size:12px; margin-top:24px; }.faq { margin-top:65px; }.faq details { border-top:1px solid var(--line); padding:0; }.faq details:last-child { border-bottom:1px solid var(--line); }.faq summary { cursor:pointer; list-style:none; padding:20px 0; display:flex; justify-content:space-between; font-size:clamp(18px,2vw,24px); letter-spacing:-.04em; }.faq summary::-webkit-details-marker { display:none; }.faq summary::after { content:'+'; color:var(--lime); }.faq details[open] summary::after { content:'−'; }.faq p { max-width:650px; padding:0 0 20px; margin:0; color:var(--muted); line-height:1.6; font-size:14px; }
.cta { margin:0 clamp(20px,4vw,60px) 40px; padding:clamp(40px,8vw,100px); min-height:500px; position:relative; overflow:hidden; background:var(--lime); color:var(--ink); display:flex; flex-direction:column; justify-content:end; }.cta::before { content:'CREATEVA'; position:absolute; top:-.21em; left:-.05em; color:transparent; -webkit-text-stroke:1px rgba(16,17,15,.2); font-size:clamp(100px,20vw,310px); font-weight:800; letter-spacing:-.12em; }.cta::after { content:''; position:absolute; right:-5%; top:8%; width:42%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 20deg,#f3f0e9,#9cce2a,#10110f,#f3f0e9); filter:blur(.2px); animation:spin 18s linear infinite; }.cta > * { position:relative; z-index:1; }.cta h2 { max-width:900px; margin:16px 0; font-size:clamp(45px,7vw,100px); line-height:.9; letter-spacing:-.085em; }.cta p { max-width:500px; line-height:1.6; font-size:15px; }.cta .actions { margin-top:22px; }.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:70px; }.field { border-bottom:1px solid var(--line); padding-bottom:11px; }.field.full { grid-column:1/-1; }.field label { display:block; margin-bottom:10px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }.field input,.field textarea,.field select { width:100%; color:var(--paper); background:transparent; border:0; outline:0; resize:vertical; font-size:17px; }.field select { color:#d5d4cd; }.field option { background:var(--ink); }.form-status { grid-column:1/-1; color:var(--lime); font-size:13px; min-height:20px; }
.page-hero { padding:190px clamp(20px,7vw,112px) 90px; min-height:62vh; position:relative; background:radial-gradient(circle at 78% 28%,rgba(206,255,95,.15),transparent 24%); }.page-hero .display { max-width:960px; }.page-hero p { max-width:600px; color:var(--muted); line-height:1.7; }.compact-copy { max-width:780px; margin-top:45px; color:var(--muted); line-height:1.8; font-size:16px; }.legal { max-width:760px; }.legal h2 { margin-top:56px; font-size:30px; letter-spacing:-.06em; }.legal p { color:var(--muted); line-height:1.8; }.legal-box { border:1px dashed rgba(206,255,95,.5); padding:32px; color:#d4d2c9; background:rgba(206,255,95,.04); }
.footer { padding:70px clamp(20px,5vw,64px) 26px; border-top:1px solid var(--line); }.footer-top { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:35px; }.footer-intro { max-width:260px; color:var(--muted); font-size:13px; line-height:1.6; }.footer h4 { margin:0 0 16px; color:var(--lime); font:10px 'DM Mono',monospace; text-transform:uppercase; }.footer-links { display:grid; gap:8px; color:#cccac1; font-size:13px; }.footer-links a:hover { color:var(--lime); }.footer-bottom { max-width:var(--max); margin:70px auto 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; font:10px 'DM Mono',monospace; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.3,1); }.reveal.visible { opacity:1; transform:none; }
.contact-direct-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; margin-bottom:10px; }
.contact-direct-bar .direct-label { color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; margin-right:4px; }
.direct-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; background:rgba(243,240,233,.06); border:1px solid var(--line); border-radius:99px; color:var(--paper); font-size:13px; font-weight:600; text-decoration:none; transition:.25s ease; }
.direct-badge strong { color:var(--lime); }
.direct-badge:hover { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.direct-badge:hover strong { color:var(--ink); }
.direct-badge.whatsapp-badge { border-color:rgba(37,211,102,.35); background:rgba(37,211,102,.08); }
.direct-badge.whatsapp-badge strong { color:#25d366; }
.direct-badge.whatsapp-badge:hover { background:#25d366; color:#ffffff; border-color:#25d366; }
.direct-badge.whatsapp-badge:hover strong { color:#ffffff; }
.badge-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(206,255,95,.2); }
.whatsapp-float { position:fixed; bottom:24px; right:24px; z-index:99; display:inline-flex; align-items:center; gap:8px; padding:11px 18px 11px 14px; background:#25d366; color:#ffffff; border-radius:999px; box-shadow:0 8px 24px rgba(37,211,102,.38),0 2px 6px rgba(0,0,0,.45); text-decoration:none; font:600 13px/1 'DM Mono',monospace; letter-spacing:.02em; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .2s ease; cursor:pointer; }
.whatsapp-float:hover { transform:translateY(-3px) scale(1.03); background:#20ba59; color:#ffffff; box-shadow:0 12px 30px rgba(37,211,102,.5),0 4px 10px rgba(0,0,0,.5); }
.whatsapp-icon { display:block; flex-shrink:0; fill:currentColor; }
@media (max-width:640px) {
  .whatsapp-float { bottom:18px; right:18px; padding:12px; border-radius:50%; width:48px; height:48px; justify-content:center; }
  .whatsapp-float .whatsapp-label { display:none; }
}
@keyframes drift { 50% { transform:translate(-18px,19px) rotate(8deg); } } @keyframes float { 50% { transform:translateY(-20px) rotate(4deg); } } @keyframes marquee { to { transform:translateX(-50%); } } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:800px) { .nav { padding:17px 20px; }.brand img { width:120px; }.nav-links { position:fixed; inset:0; flex-direction:column; justify-content:center; background:var(--ink); opacity:0; pointer-events:none; transition:.3s; font-size:29px; }.nav-links.open { opacity:1; pointer-events:auto; }.nav-links .pill { font-size:13px; }.menu-button { display:block; position:relative; z-index:2; }.hero { padding:130px 20px 48px; align-items:center; }.hero-art { opacity:.72; }.orb { left:44%; top:17%; }.panel-a { right:-12%; top:16%; transform:scale(.75) rotate(9deg); }.panel-b { right:20%; top:63%; transform:scale(.65) rotate(-9deg); }.orbit { left:19%; top:17%; }.hero-copy { padding-top:150px; }.hero-meta { display:none; }.split-heading { display:block; }.split-heading > p { margin-top:23px; }.services-list { margin-top:40px; }.service-row { grid-template-columns:45px 1fr 25px; gap:12px; }.service-row p { display:none; }.project { min-height:440px; }.demo-offer { grid-template-columns:1fr; }.offer-grid { grid-template-columns:1fr; }.statements { grid-template-columns:1fr 1fr; }.statement { min-height:210px; }.step { grid-template-columns:55px 1fr; gap:7px; }.step p { grid-column:2; margin-top:8px; }.outcomes { grid-template-columns:1fr; }.world { min-height:360px; }.contact-form { grid-template-columns:1fr; }.field.full { grid-column:auto; }.footer-top { grid-template-columns:1fr 1fr; }.footer-top > :first-child { grid-column:1/-1; }.cta { margin:0 12px 12px; }.cta::after { width:58%; right:-20%; top:4%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }