/* Shared layout for 4uai subpages: tokens, navigation, hero, bento cards, FAQ, contact, footer. */
:root{--bg:#F3F4F7;--navy:#1F2A44;--brick:#D2461E;--brick-light:#F08A62;--peach:#F6C7B3;--periwinkle:#C8D3EE;--text-2:#4A5570;--text-3:#5A6480;--text-4:#6A7390;--line:#E6E8EE;--line-soft:#EEF0F4;--glass:rgba(255,255,255,.6);--glass-border:rgba(255,255,255,.9);color-scheme:light}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--navy);font-size:16px;line-height:1.5;overflow-x:hidden}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.page{position:relative;max-width:1280px;margin:0 auto;padding:20px 20px 28px;overflow:hidden}
.blob{position:absolute;border-radius:50%;pointer-events:none}
/* navigation */
.nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 24px;border-radius:20px;background:rgba(255,255,255,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8)}
.nav-logo{font-weight:700;font-size:18px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.logo-sq{width:22px;height:22px;border-radius:7px;background:var(--navy);display:grid;place-items:center}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--brick)}
.nav-links{display:flex;gap:6px;font-size:14px;font-weight:500;list-style:none}
.nav-links a{padding:9px 14px;border-radius:12px;text-decoration:none;color:var(--navy);transition:background .2s}
.nav-links a:hover{background:rgba(31,42,68,.06)}
.nav-links a[aria-current="page"]{background:rgba(31,42,68,.08)}
.has-dd{position:relative}
.dd-toggle::after{content:'▾';margin-left:6px;font-size:10px;opacity:.6}
.dd{position:absolute;top:100%;left:0;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd-panel{min-width:280px;padding:8px;border-radius:18px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 50px -24px rgba(31,42,68,.35);list-style:none}
.nav-links .dd-panel a{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.dd-name{display:flex;align-items:center;gap:8px;font-weight:600}
.dd-desc{font-size:12px;color:var(--text-4);font-weight:400}
.dd-tag{padding:2px 7px;border-radius:100px;background:var(--brick);color:#fff;font:500 10px 'JetBrains Mono',monospace}
.dd-tag.alt{background:rgba(31,42,68,.1);color:var(--navy)}
.nav-cta{padding:12px 20px;border-radius:14px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .25s}
.nav-cta:hover{background:var(--brick)}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;padding:3px;border:1px solid rgba(31,42,68,.12);border-radius:100px;background:rgba(255,255,255,.7)}
.lang-switch a{display:block;padding:6px 9px;border-radius:100px;color:var(--navy);font:600 12px 'JetBrains Mono',monospace;text-decoration:none;transition:background .2s}
.lang-switch a[aria-current]{background:var(--navy);color:#fff}
@media(max-width:1060px){.nav-links{display:none}}
/* hero */
.crumbs{position:relative;z-index:1;padding:28px 28px 0;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-4)}
.crumbs a{color:var(--text-4);text-decoration:none}
.crumbs a:hover{color:var(--brick)}
.hero{position:relative;z-index:1;padding:48px 28px 90px;max-width:860px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:100px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(12px);font-size:13px;font-weight:500}
.hero-badge-tag{padding:3px 8px;border-radius:100px;background:var(--brick);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px}
h1.hero-h1{margin:28px 0 0;font-weight:600;font-size:clamp(48px,7.4vw,92px);line-height:.95;letter-spacing:-.055em;animation:rise 1s cubic-bezier(.22,1,.36,1) both}
h1.hero-h1 em{font-weight:300;font-style:italic;color:var(--brick)}
.hero-lead{margin:28px 0 0;max-width:600px;font-size:19px;line-height:1.55;color:var(--text-2);animation:rise 1s .15s cubic-bezier(.22,1,.36,1) both}
.hero-btns{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap;animation:rise 1s .3s cubic-bezier(.22,1,.36,1) both}
.btn-navy{padding:16px 26px;border-radius:16px;background:var(--navy);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background .25s}
.btn-navy:hover{background:var(--brick)}
.btn-glass{padding:16px 26px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid rgba(31,42,68,.1);font-size:15px;font-weight:600;text-decoration:none;color:var(--navy)}
/* bento cards */
.bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:120px;gap:14px}
.glass-card{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brick);margin-bottom:4px}
.card-title{font-weight:600;font-size:24px;letter-spacing:-.03em;line-height:1.1}
.card-desc{font-size:14px;line-height:1.5;color:var(--text-3);max-width:540px}
.mono{font-family:'JetBrains Mono',monospace}
.card-feature{grid-column:span 7;grid-row:span 4;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -30px rgba(31,42,68,.25)}
.feature-window{flex:1;min-height:0;border-radius:18px;border:1px solid var(--line);background:#fff;overflow:hidden;position:relative}
.feature-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-4)}
.card-stat{grid-column:span 5;grid-row:span 1;border-radius:24px;background:var(--navy);color:#fff;padding:18px 24px;display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative;overflow:hidden}
.stat-blob{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--brick);filter:blur(80px);opacity:.45;right:-60px;bottom:-100px;pointer-events:none}
.stat-eyebrow{position:relative;font-family:'JetBrains Mono',monospace;font-size:10px;opacity:.7}
.stat-row{position:relative;display:flex;align-items:center;gap:18px}
.stat-num{font-weight:600;font-size:30px;letter-spacing:-.04em;line-height:1;flex-shrink:0}
.stat-desc{font-size:13px;line-height:1.4;opacity:.8}
.card-list{grid-column:span 5;grid-row:span 3;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px}
.list-title{font-weight:600;font-size:22px;letter-spacing:-.03em;margin-top:4px}
.check-list{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);list-style:none;min-height:0}
.check-list li{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;font-weight:600}
.check-list li:last-child{border-bottom:0}
.check-list .mono{font-size:10px;color:var(--brick);font-weight:400}
.card-oferta{grid-column:span 12;grid-row:span 3;padding:56px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.service-item{display:flex;flex-direction:column;gap:10px}
.svc-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brick)}
.svc-name{font-weight:600;font-size:24px;letter-spacing:-.03em;margin:0}
.svc-desc{font-size:14px;line-height:1.55;color:var(--text-3);margin:0}
.svc-points{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:4px;font-size:13px;color:var(--text-2)}
.svc-points li{display:flex;gap:8px}
.svc-points li::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--brick);margin-top:7px;flex-shrink:0}
.card-approach{grid-column:span 4;grid-row:span 3;border-radius:28px;background:var(--navy);color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.approach-blob{position:absolute;width:280px;height:280px;border-radius:50%;background:var(--brick);filter:blur(90px);opacity:.35;left:-80px;bottom:-120px;pointer-events:none}
.approach-label{position:relative;font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.7}
.approach-quote{position:relative;font-weight:300;font-size:26px;line-height:1.2;letter-spacing:-.03em}
.approach-quote em{font-weight:600;font-style:italic;color:var(--brick-light)}
.card-process{grid-column:span 8;grid-row:span 3;border-radius:28px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.process-h2{font-weight:600;font-size:40px;letter-spacing:-.045em;line-height:1}
.process-h2 .faint{font-weight:300;opacity:.5}
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(31,42,68,.14)}
.steps-grid.four{grid-template-columns:repeat(4,1fr)}
.pstep{padding:18px 14px 0 0;display:flex;flex-direction:column;gap:8px}
.step-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--brick)}
.step-name{font-weight:600;font-size:16px;margin:0}
.step-desc{font-size:13px;line-height:1.5;color:var(--text-3);margin:0}
.card-deliver{grid-column:span 7;grid-row:span 2;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600}
.card-next{grid-column:span 5;grid-row:span 2;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.next-links{display:flex;flex-direction:column;gap:8px}
.next-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-size:14px;font-weight:600;transition:border-color .2s,color .2s}
.next-link:hover{border-color:var(--brick);color:var(--brick)}
/* FAQ */
.faq{position:relative;z-index:1;margin-top:40px;padding:56px 8px 0;display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.faq-h2{font-weight:600;font-size:clamp(32px,4vw,48px);letter-spacing:-.05em;line-height:1}
.faq-h2 em{font-weight:300;font-style:italic;color:var(--brick)}
.faq-list{display:flex;flex-direction:column;border-top:1px solid rgba(31,42,68,.14)}
.faq-list details{border-bottom:1px solid rgba(31,42,68,.14)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:17px;letter-spacing:-.02em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-family:'JetBrains Mono',monospace;font-weight:400;font-size:18px;color:var(--brick);transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{padding:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--text-3);max-width:62ch}
/* contact */
.contact-section{position:relative;z-index:1;margin-top:40px;padding:72px 8px 40px;display:grid;grid-template-columns:1fr 1.1fr;gap:64px}
.contact-h2{font-weight:600;font-size:clamp(36px,5vw,60px);letter-spacing:-.05em;line-height:.95;margin-bottom:18px}
.contact-h2 em{font-weight:300;font-style:italic;color:var(--brick)}
.contact-lead{font-size:16px;line-height:1.6;color:var(--text-2);max-width:40ch;margin-bottom:28px}
.contact-meta{display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:13px}
.contact-meta a{text-decoration:none;color:var(--navy)}
.contact-meta .dim{color:var(--text-4)}
.form{display:flex;flex-direction:column;gap:12px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea{padding:14px 16px;border-radius:14px;border:1px solid rgba(31,42,68,.12);background:#fff;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:15px;color:var(--navy);outline:none;transition:border-color .2s;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--navy)}
.form textarea{min-height:120px;resize:vertical}
.form-submit{border:none;padding:16px;border-radius:14px;background:var(--navy);color:#fff;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s;width:100%}
.form-submit:hover{background:var(--brick)}
.form-sent{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--brick);letter-spacing:.06em;display:none;margin-top:4px}
.form-note{font-size:12.5px;line-height:1.5;color:var(--text-4)}
.form-note a{color:var(--text-3);text-underline-offset:2px}
.form-note a:hover{color:var(--brick)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.site-footer{position:relative;z-index:1;margin-top:24px;padding:24px 8px 8px;border-top:1px solid rgba(31,42,68,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-4)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}
.site-footer a{color:var(--text-4);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--brick)}
@media(max-width:900px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .card-feature,.card-stat,.card-list,.card-oferta,.card-approach,.card-process,.card-deliver,.card-next{grid-column:1;grid-row:auto}
  .card-feature{min-height:560px}
  .card-list{min-height:380px}
  .card-approach{min-height:280px}
  .card-oferta{grid-template-columns:1fr;padding:40px 8px;gap:40px}
  .steps-grid,.steps-grid.four{grid-template-columns:1fr 1fr;gap:24px}
  .faq,.contact-section{grid-template-columns:1fr;gap:32px}
  .form-2col{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){h1.hero-h1,.hero-lead,.hero-btns{animation:none}}