@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy-950:#0b1016;
  --navy-900:#101820;
  --navy-850:#17232e;
  --navy-800:#1f313d;
  --navy-700:#274454;
  --gold-600:#00a7bd;
  --gold-500:#00bed4;
  --gold-400:#4ee1ef;
  --gold-300:#a7f2f8;
  --text:#18232d;
  --muted:#667482;
  --light:#f4f8fa;
  --border:#e4ebf0;
  --white:#fff;
  --radius:18px;
  --shadow:0 18px 55px rgba(11,16,22,.08);
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:94px}
body {margin:0;font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
body.menu-open {overflow:hidden}
img,svg {max-width:100%}
a {color:inherit;text-decoration:none}
button,input,textarea,select {font:inherit}
button {cursor:pointer}
svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-sprite {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.container {width:min(100% - 76px,1220px);margin-inline:auto}
[hidden] {display:none!important}
:focus-visible {outline:3px solid #11c8dd;outline-offset:4px}
::selection {background:#7cebf4;color:#101820}
.skip-link {position:fixed;left:18px;top:-100px;z-index:500;background:white;color:#101820;padding:12px 20px;border-radius:8px;font-weight:700}
.skip-link:focus {top:12px}

/* Navigation */
.site-header {position:sticky;top:0;z-index:100;background:rgba(255,255,255,.965);border-bottom:1px solid #edf0f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner {height:83px;display:flex;align-items:center;gap:32px}
.brand {display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand-symbol {display:grid;place-items:center;width:58px;height:48px}
.brand-symbol img {height:46px;width:58px;object-fit:contain}
.brand-name {display:flex;flex-direction:column;gap:2px;color:var(--navy-900);line-height:1}
.brand-name strong {font-family:Manrope,sans-serif;font-size:22px;letter-spacing:-1px;font-weight:800}
.brand-name>span {font-family:Manrope,sans-serif;font-weight:700;font-size:11px;letter-spacing:3.1px}
.desktop-nav {display:flex;align-items:center;gap:31px;margin-left:auto}
.desktop-nav a {font-weight:700;color:#526173;font-size:13.5px;transition:color .2s}
.desktop-nav a:hover {color:var(--navy-800)}
.header-cta {margin-left:8px;background:var(--navy-900);color:#fff;padding:14px 17px 14px 20px;display:flex;gap:18px;align-items:center;border-radius:8px;white-space:nowrap;font-weight:700;font-size:13px;transition:background .2s,transform .2s}
.header-cta svg {width:16px;height:16px}
.header-cta:hover {background:#0f2734;transform:translateY(-1px)}
.menu-toggle {display:none;align-items:center;flex-direction:column;justify-content:center;width:46px;height:44px;background:transparent;border:1px solid var(--border);border-radius:9px;gap:5px;margin-left:auto}
.menu-toggle span {height:2px;width:21px;background:var(--navy-900);transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2) {opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
.mobile-nav {position:absolute;top:100%;left:0;right:0;background:white;box-shadow:0 25px 40px rgba(0,0,0,.13);padding:16px max(28px,calc((100vw - 1220px)/2));border-top:1px solid var(--border)}
.mobile-nav a {display:flex;align-items:center;justify-content:space-between;font-weight:700;padding:17px 4px;border-bottom:1px solid #eef0f2;color:var(--navy-900)}
.mobile-nav a:last-child {border:0;color:var(--gold-600)}
.mobile-nav svg {width:16px;height:16px}

/* Hero */
.hero {background:linear-gradient(125deg,#091018 0%,#101820 52%,#16232d 100%);position:relative;color:#fff;overflow:hidden;isolation:isolate}
.hero::before {content:'';position:absolute;width:870px;height:870px;right:-390px;top:-315px;border:1px solid rgba(228,189,114,.13);border-radius:50%;box-shadow:0 0 0 160px rgba(178,198,218,.018),0 0 0 300px rgba(178,198,218,.018);z-index:-1}
.hero::after {content:'';position:absolute;left:-290px;bottom:-570px;width:900px;height:850px;background:radial-gradient(circle,rgba(17,200,221,.18),transparent 65%);pointer-events:none;z-index:-1}
.hero-grain {position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.hero-grid {min-height:664px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:62px;padding-top:71px;padding-bottom:62px}
.hero-copy {position:relative;z-index:3}
.eyebrow {display:flex;align-items:center;gap:11px;color:var(--gold-300);font-size:11px;letter-spacing:2.2px;font-weight:800;white-space:nowrap}
.eyebrow-line {height:1px;width:32px;background:var(--gold-400);display:block}
h1,h2,h3,h4,p {margin-top:0}
h1,h2,h3,h4 {font-family:'Manrope','DM Sans',sans-serif}
.hero h1 {max-width:660px;font-size:clamp(42px,4.45vw,64px);line-height:1.16;letter-spacing:-2.8px;font-weight:800;margin:28px 0 23px}
.gradient-text {background:linear-gradient(110deg,#baf7fb 0%,#11d5e7 53%,#6fe9f3 100%);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-copy>p {font-size:16px;line-height:1.94;color:#b6c4d0;max-width:540px;margin-bottom:30px}
.hero-copy>p strong {color:#fff}
.hero-actions {display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn {display:inline-flex;justify-content:center;align-items:center;gap:16px;padding:16px 23px;border-radius:9px;border:1px solid transparent;min-height:52px;font-size:13.5px;font-weight:800;transition:transform .22s,box-shadow .22s,background .22s,color .22s}
.btn:hover {transform:translateY(-2px)}
.btn svg {width:17px;height:17px}
.btn-gold {background:linear-gradient(135deg,#a9f4fa,#10cfe4);color:#0e1720;box-shadow:0 12px 28px rgba(16,22,28,.12)}
.btn-gold:hover {box-shadow:0 12px 30px rgba(16,207,228,.23)}
.btn-text-light {color:#fff;padding-inline:6px;background:transparent}
.btn-text-light:hover {color:var(--gold-300)}
.btn-text-light span {font-size:19px;font-weight:400}
.hero-highlights {display:flex;flex-wrap:wrap;gap:12px 19px;margin-top:44px}
.hero-highlights>span {display:inline-flex;align-items:center;gap:7px;color:#c4d2dc;font-size:12px;font-weight:600}
.hero-highlights svg {width:15px;height:15px;color:var(--gold-400);stroke-width:2.3}
.hero-visual {height:508px;position:relative;display:grid;place-items:center}
.orb {position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.orb-one {width:370px;height:370px;background:radial-gradient(circle,rgba(17,200,221,.22),rgba(83,150,165,.07) 63%,transparent 72%);right:0;top:30px}
.orb-two {width:360px;height:360px;border:1px solid rgba(82,228,241,.2);right:42px;top:45px}
.product-window {position:relative;z-index:2;width:min(100%,478px);min-height:405px;background:linear-gradient(155deg,rgba(18,24,32,.97),rgba(9,15,21,.98));border:1px solid rgba(78,225,239,.28);box-shadow:0 34px 78px rgba(0,8,20,.44),inset 0 1px rgba(255,255,255,.16);border-radius:18px;overflow:hidden;transform:perspective(1100px) rotateY(-7deg) rotateX(2deg);animation:float-window 7s ease-in-out infinite}
.window-top {height:48px;display:flex;align-items:center;gap:17px;padding:0 20px;border-bottom:1px solid rgba(220,237,255,.10);background:rgba(5,23,40,.37);color:#8ca1af;font-size:9px;letter-spacing:1.5px;font-weight:800}
.traffic {display:flex;gap:6px}.traffic i {width:7px;height:7px;background:#8d9eac;border-radius:50%;opacity:.6}.traffic i:nth-child(1) {background:#11c8dd}.traffic i:nth-child(2) {background:#7197ae}
.window-top-icon {margin-left:auto;color:var(--gold-400);font-size:20px;font-weight:300}
.window-content {padding:34px 39px 33px;position:relative;overflow:hidden}
.window-content::before {content:'';position:absolute;right:-53px;top:10px;width:230px;height:230px;border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.013),0 0 0 110px rgba(255,255,255,.012)}
.window-brand {display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.window-brand img {object-fit:contain;width:100px;height:77px;filter:drop-shadow(0 4px 9px rgba(0,0,0,.16))}
.window-brand span {font-size:10px;font-weight:700;color:#b3c4d0;white-space:nowrap}
.window-rule {width:100%;height:1px;background:linear-gradient(90deg,rgba(239,210,155,.5),transparent);margin:12px 0 25px}
.window-title {font-family:Manrope,sans-serif;color:#fff;font-size:30px;font-weight:800;letter-spacing:-1.15px;line-height:1.32}
.window-title em {color:var(--gold-400);font-style:normal}
.window-description {font-size:11.5px;color:#a3b6c4;margin:15px 0 26px;max-width:285px;line-height:1.7}
.window-pills {display:flex;gap:9px;position:relative;z-index:1}.window-pills span {font-size:9px;font-weight:800;letter-spacing:1px;border:1px solid rgba(227,189,120,.38);color:#8deff7;padding:8px 11px;border-radius:5px}
.window-graphic {position:absolute;right:-16px;bottom:-26px;width:165px;height:120px;opacity:.6}
.graphic-line {position:absolute;inset:0;border-left:2px solid rgba(235,193,118,.6);border-top:2px solid rgba(235,193,118,.6);transform:rotate(-40deg) translate(25px,40px);border-radius:50%}
.graphic-node {position:absolute;width:8px;height:8px;background:#4ee1ef;box-shadow:0 0 0 6px rgba(239,206,145,.12);border-radius:50%}.n1{left:16px;top:64px}.n2{left:90px;top:33px}.n3{right:17px;bottom:22px}
.hero-floating {display:flex;align-items:center;gap:10px;position:absolute;z-index:3;background:rgba(255,255,255,.975);color:var(--navy-900);box-shadow:0 13px 34px rgba(0,10,24,.21);border-radius:10px}
.floating-a {top:37px;right:-12px;padding:13px 17px;font-size:11px;font-weight:800;letter-spacing:.3px;transform:rotate(5deg);animation:float-a 5s ease-in-out infinite}
.float-icon {display:grid;place-items:center;color:var(--gold-600);font-size:20px}
.floating-b {left:-30px;bottom:8px;padding:14px 19px;transform:rotate(-3deg);animation:float-b 6s ease-in-out infinite}
.float-check {display:grid;place-items:center;background:#ecfcfd;border-radius:9px;width:37px;height:37px;color:#247451}.float-check svg{width:19px;height:19px;stroke-width:2.6}
.floating-b strong {display:block;font-family:Manrope,sans-serif;font-size:12px;margin-bottom:4px}.floating-b small{display:block;color:#718094;font-size:10px}
.hero-bottom {border-top:1px solid rgba(255,255,255,.09);position:relative}
.hero-bottom-inner {height:53px;display:flex;align-items:center;gap:25px;color:#819fb8;font-size:9.5px;letter-spacing:2px;font-weight:800}
.hero-bottom-line {height:1px;width:38px;background:#8e9cac;opacity:.5}
.hero-bottom-inner>a {margin-left:auto;color:var(--gold-400);font-size:24px;font-weight:300}

.values-strip {background:#f4f7f9;border-bottom:1px solid #e9ebed}
.values-inner {height:91px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.values-inner>span {display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:800;color:#526479}
.values-inner svg {color:var(--gold-600);width:21px;height:21px}
.values-inner>i {width:1px;height:28px;background:#dee2e6}

/* Shared section styles */
.section {padding:112px 0}
.kicker {display:inline-flex;align-items:center;gap:9px;color:#0090a3;font-size:11px;letter-spacing:2.1px;font-weight:800}
.kicker>span {height:6px;width:6px;border-radius:50%;background:#14cbe0}
.section h2,.faq-section h2 {font-weight:800;font-size:clamp(32px,3.4vw,46px);letter-spacing:-1.8px;line-height:1.24;margin:17px 0 0;color:var(--navy-900)}
.section h2 span,.faq-section h2 span {color:var(--gold-600)}
.section-head {display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:47px}
.section-head>div {max-width:610px}
.section-head>p {max-width:395px;line-height:1.85;color:var(--muted);font-size:14.5px;margin-bottom:3px}
.reveal.will-reveal {opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.will-reveal.is-visible {opacity:1;transform:none}
.service-card:nth-child(2),.process-card:nth-child(2),.example-card:nth-child(2) {transition-delay:.085s}
.service-card:nth-child(3),.process-card:nth-child(3),.example-card:nth-child(3) {transition-delay:.17s}
.service-card:nth-child(4),.process-card:nth-child(4) {transition-delay:.255s}

/* Services */
.services-section {background:#fff}
.service-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.service-card {display:flex;flex-direction:column;padding:27px 24px 25px;min-height:370px;border:1px solid var(--border);border-radius:14px;background:white;box-shadow:0 5px 24px rgba(23,57,88,.025);transition:transform .3s,border-color .3s,box-shadow .3s,opacity .65s}
.service-card:hover {transform:translateY(-6px);border-color:#8feff7;box-shadow:0 20px 42px rgba(20,51,79,.09)}
.service-top {display:flex;align-items:start;justify-content:space-between;margin-bottom:28px}
.service-icon {height:51px;width:51px;display:grid;place-items:center;border:1px solid #e7e3dc;background:#f7feff;color:#00aabc;border-radius:11px}
.service-icon svg {width:24px;height:24px}
.service-number {font-size:10px;letter-spacing:1.4px;font-weight:800;color:#9ba7b4}
.service-card h3 {font-size:19px;letter-spacing:-.6px;margin-bottom:11px;color:var(--navy-900)}
.service-card>p {font-size:13px;line-height:1.8;color:#6d7e8f;margin-bottom:18px}
.service-tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;margin-bottom:22px}
.service-tags span {font-size:10px;font-weight:700;color:#63758a;background:#f3f5f7;border-radius:5px;padding:6px 8px}
.service-link {border-top:1px solid #edf0f2;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12px;color:#98703c}
.service-link svg {width:17px;height:17px;transition:transform .2s}
.service-link:hover svg {transform:translateX(5px)}

/* Ideas / example projects */
.solution-section {background:#f5f7f9;overflow:hidden}
.solution-layout {display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:77px}
.solution-aside>p {color:var(--muted);line-height:1.95;font-size:15px;margin:22px 0 29px;max-width:340px}
.btn-outline {color:var(--navy-900);border-color:#cbd5dd;background:transparent}
.btn-outline:hover {border-color:var(--navy-900);background:white}
.examples-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.example-card {background:#fff;overflow:hidden;border-radius:13px;border:1px solid #e4ebf0;box-shadow:0 7px 25px rgba(13,40,62,.035)}
.example-a {grid-row:span 2}
.example-art {height:153px;position:relative;overflow:hidden;display:grid;place-items:center;background:#edf3f8}
.example-a .example-art {height:277px}
.art-web {background:radial-gradient(circle at 30% 80%,#d6e5ef,transparent 72%),linear-gradient(130deg,#f0f5f8,#dce7ee)}
.mini-browser {height:185px;width:85%;background:white;border:1px solid #d5e1eb;box-shadow:0 15px 27px rgba(20,54,86,.15);border-radius:10px;transform:rotate(-8deg) translate(16px,40px)}
.mini-toolbar {height:28px;background:#102d4d;border-radius:9px 9px 0 0;display:flex;align-items:center;gap:5px;padding-left:12px}
.mini-toolbar b {width:6px;height:6px;border-radius:50%;background:#11c8dd}.mini-toolbar b:nth-child(2){opacity:.55}.mini-toolbar b:nth-child(3){opacity:.3}
.mini-layout {padding:28px 20px}.mini-line {height:9px;width:81%;background:#ccdce9;border-radius:4px;margin-bottom:10px}.mini-line.goldline{background:#30d8e8;width:58%;height:11px}.mini-line.short{width:47%}.mini-button{display:block;width:85px;height:22px;background:#10375a;border-radius:4px;margin-top:24px}
.art-dashboard {background:linear-gradient(145deg,#e2edf4,#cddde9)}
.dashboard-mini {width:78%;height:132px;border-radius:8px;background:white;display:flex;box-shadow:0 14px 26px rgba(14,50,76,.18);transform:translateY(18px) rotate(8deg);overflow:hidden}
.dash-side {width:25%;background:#113354;flex-shrink:0}.dash-body {padding:15px;flex:1}.dash-bar {height:6px;width:65%;background:#d8e3ea;border-radius:5px}.dash-chart{height:59px;display:flex;align-items:end;gap:8px;margin:12px 0 9px}.dash-chart span{width:12px;background:#d4aa64;border-radius:2px 2px 0 0;height:35%}.dash-chart span:nth-child(2){height:70%;background:#18303f}.dash-chart span:nth-child(3){height:46%}.dash-chart span:nth-child(4){height:92%;background:#18303f}.dash-chart span:nth-child(5){height:62%}.dash-row{width:80%;height:5px;background:#dce6ed;border-radius:4px;margin-bottom:5px}.dash-row.short{width:55%}
.art-connect {background:linear-gradient(130deg,#102c49,#184667)}
.connect-wire {position:absolute;width:190px;height:190px;border:2px dashed rgba(222,184,111,.35);border-radius:50%;transform:rotate(-18deg)}
.connect-icon {width:50px;height:50px;display:grid;place-items:center;color:#f5dcaa;background:#24506f;border:1px solid rgba(246,223,180,.4);border-radius:13px;position:absolute;box-shadow:0 10px 17px rgba(0,0,0,.14)}
.ci-a {left:23%;top:36%;font-size:22px}.ci-b {top:12%;right:23%;font-size:27px}.ci-c{bottom:7%;right:24%;font-size:26px}
.example-copy {padding:21px 23px 23px}.example-copy small {display:block;color:#0099ae;font-size:9px;letter-spacing:1.15px;font-weight:800;margin-bottom:10px}.example-copy h3 {font-size:16px;letter-spacing:-.45px;line-height:1.45;margin:0 0 8px}.example-copy p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}

/* Process */
.process-section {background:#fff}
.center-head {text-align:center;max-width:680px;margin:0 auto 53px}
.center-head h2{margin-bottom:17px}.center-head>p{font-size:14px;line-height:1.8;color:var(--muted)}
.process-grid {display:grid;grid-template-columns:repeat(4,1fr);position:relative;gap:15px}
.process-grid::before {content:'';position:absolute;left:12%;right:12%;top:56px;border-top:1px dashed #d8c29a}
.process-card {position:relative;text-align:center;padding:24px 15px 5px;background:#fff}
.step-no {display:block;color:#0ea9bb;font-weight:800;font-size:11px;letter-spacing:2px;margin-bottom:22px}
.step-icon {height:63px;width:63px;display:grid;place-items:center;border-radius:50%;background:#eefbfc;border:1px solid #b9f6fb;color:#0097aa;margin:0 auto 25px;box-shadow:0 0 0 12px #fff;position:relative;z-index:1}
.step-icon svg {width:26px;height:26px}
.process-card h3 {font-size:16px;letter-spacing:-.4px;margin-bottom:10px}
.process-card p {font-size:12.5px;color:#697c8c;line-height:1.85;margin:0 auto;max-width:226px}

/* About */
.about-section {background:#f8f9fa;border-top:1px solid #eef0f2}
.about-layout {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.about-visual {position:relative;min-height:385px;border-radius:16px;background:linear-gradient(145deg,#e5ebf0,#fff 68%);border:1px solid #e4e9ef;display:grid;place-items:center;padding:38px 22px;box-shadow:var(--shadow)}
.about-visual::after {content:'';position:absolute;width:80%;height:65%;border:1px solid #d8e1e8;border-radius:50%;pointer-events:none;transform:rotate(-21deg)}
.about-logo {background:white;border-radius:9px;box-shadow:0 14px 35px rgba(28,54,79,.07);padding:20px 22px;position:relative;z-index:1;width:min(100%,434px);transform:rotate(-2deg)}
.about-logo img {display:block;width:100%;height:auto;object-fit:contain}
.about-stamp {position:absolute;z-index:2;bottom:26px;right:14px;padding:13px 16px;background:var(--navy-900);color:#fff;font-size:9px;font-weight:800;letter-spacing:1px;border-radius:5px;transform:rotate(4deg);box-shadow:0 8px 15px rgba(0,10,25,.15)}
.about-stamp span{color:var(--gold-400);padding-inline:4px}
.about-copy>p {font-size:14.5px;line-height:1.95;color:#6b7c8c;margin:24px 0 0}
.about-copy>p+p {margin-top:11px}
.about-copy>p strong {color:var(--navy-900)}
.about-points {display:grid;gap:19px;margin-top:29px}
.about-points>div {display:flex;align-items:flex-start;gap:14px}
.about-points>div>span {width:40px;height:40px;display:grid;place-items:center;background:#edf9fb;color:#009fb4;border-radius:9px;flex-shrink:0}
.about-points>div>span svg {width:19px;height:19px}
.about-points p {display:grid;gap:5px;margin:1px 0 0}.about-points strong {font-size:13px;color:var(--navy-900)}.about-points small {font-size:12.5px;color:#708292}

/* FAQ */
.faq-section {background:white}
.faq-grid {display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.faq-grid>div:first-child>p {color:var(--muted);font-size:14px;line-height:1.85;margin-top:21px}
.faqs {border-top:1px solid #e4e9ed}
.faqs details {border-bottom:1px solid #e4e9ed}
.faqs summary {position:relative;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;font-weight:800;font-size:14px;color:var(--navy-900);padding:22px 0}
.faqs summary::-webkit-details-marker {display:none}
.faq-plus {height:24px;width:24px;position:relative;flex-shrink:0;border-radius:50%;background:#f4f7f9}
.faq-plus::before,.faq-plus::after {content:'';position:absolute;background:#0099ae;border-radius:1px;left:7px;right:7px;top:11px;height:2px;transition:transform .2s}
.faq-plus::after {transform:rotate(90deg)}
.faqs details[open] .faq-plus::after {transform:rotate(0)}
.faqs details p {line-height:1.8;color:#6c7e8f;font-size:13px;margin:0;padding:0 33px 22px 0}

/* Contact */
.contact-section {padding:0 0 100px;background:linear-gradient(180deg,#fff 0%,#f7f8fa 100%)}
.contact-shell {display:grid;grid-template-columns:1fr 1fr;border-radius:20px;background:var(--navy-900);overflow:hidden;box-shadow:0 30px 62px rgba(9,28,48,.12)}
.contact-copy {color:#fff;padding:70px 55px 56px;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 95%,#174465,#091f39 65%)}
.contact-kicker {color:var(--gold-300);font-size:10px;letter-spacing:2px;font-weight:800}
.contact-copy h2 {font-size:clamp(33px,3.3vw,45px);line-height:1.29;letter-spacing:-1.8px;margin:24px 0}
.contact-copy h2 em {color:var(--gold-400);font-style:normal}
.contact-copy>p {color:#b3c6d5;font-size:14px;line-height:1.85;max-width:388px}
.contact-benefits {display:grid;gap:17px;margin-top:34px}
.contact-benefits span {display:flex;align-items:center;gap:11px;color:#d7e0e8;font-size:12px;font-weight:600}
.contact-benefits svg {color:var(--gold-400);width:16px;height:16px}
.whatsapp-link {position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;color:#e9c989;font-size:13px;font-weight:800;margin-top:33px;padding-bottom:6px;border-bottom:1px solid #e9c989}
.whatsapp-link svg{height:17px;width:17px}
.contact-decoration {position:absolute;bottom:-37px;right:10px;font-size:170px;letter-spacing:-20px;font-family:Manrope,sans-serif;font-weight:800;color:rgba(224,237,246,.035);pointer-events:none}
.contact-decoration span{color:rgba(232,202,144,.12);font-size:60px;letter-spacing:0}
.contact-form-box {background:#fff;padding:55px 56px}
.form-head>span {font-size:10px;letter-spacing:2px;color:var(--gold-600);font-weight:800}
.form-head h3 {font-size:26px;letter-spacing:-1px;margin:11px 0 6px;color:var(--navy-900)}
.form-head p {font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:26px}
#quote-form {display:grid;gap:15px}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:13px}
#quote-form label {display:flex;flex-direction:column;gap:8px;font-size:11.5px;color:#273e53;font-weight:800}
#quote-form label>span {color:#0099ae}
#quote-form input,#quote-form select,#quote-form textarea {border:1px solid #dce3e9;border-radius:7px;background:#fbfcfd;color:var(--navy-900);padding:13px 13px;font-size:12.5px;outline:0;width:100%;font-weight:500;transition:border-color .2s,box-shadow .2s}
#quote-form input::placeholder,#quote-form textarea::placeholder {color:#9ba8b3}
#quote-form input:focus,#quote-form select:focus,#quote-form textarea:focus {border-color:#12b7cb;box-shadow:0 0 0 3px rgba(192,150,76,.12)}
#quote-form select {appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23657a8e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 5 4.5 4.5L12 5'/%3E%3C/svg%3E");background-position:right 13px center;background-repeat:no-repeat;padding-right:37px}
#quote-form textarea {resize:vertical;min-height:110px;line-height:1.6}
.btn-dark {background:var(--navy-900);color:#fff;border:0}
.btn-dark:hover {background:var(--navy-700)}
.form-submit {width:100%;justify-content:space-between;margin-top:3px}
.form-note {font-size:11.5px;line-height:1.6;color:#6c7989;background:#f7f8f9;padding:10px 12px;margin:0;border-radius:6px}
.form-privacy {display:flex;align-items:center;gap:8px;font-size:10.5px;color:#8b99a5;margin:0;line-height:1.5}
.form-privacy svg {height:13px;width:13px}

/* Footer */
.site-footer {background:#0b1117;color:#d6e1e8;padding:65px 0 0}
.footer-top {display:flex;justify-content:space-between;gap:65px;padding-bottom:57px}
.footer-brand {max-width:340px}.footer-brand .brand-name{color:white}.footer-brand .brand-name strong{color:white}
.footer-brand>p {font-size:13px;line-height:1.85;color:#8ba1af;max-width:290px;margin-top:22px;margin-bottom:0}
.footer-links {display:flex;gap:105px}
.footer-links>div {display:flex;flex-direction:column;gap:13px}
.footer-links h4 {font-size:12px;color:#fff;margin-bottom:8px}
.footer-links a {font-size:12px;color:#92a6b4;transition:color .2s}.footer-links a:hover{color:var(--gold-300)}
.footer-bottom {display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(237,248,255,.12);padding:25px 0;color:#728ca1;font-size:11px}
.footer-bottom p {margin:0}.footer-bottom p span {color:var(--gold-400)}

/* Fallback contact message */
.message-dialog {width:min(100% - 32px,560px);max-height:min(88vh,750px);overflow:auto;border:0;border-radius:16px;padding:29px 32px;box-shadow:0 30px 110px rgba(0,17,33,.4);color:var(--text)}
.message-dialog::backdrop {background:rgba(3,16,29,.7);backdrop-filter:blur(4px)}
.dialog-top {display:flex;gap:12px;justify-content:space-between;align-items:start}.dialog-top h2{font-size:23px;letter-spacing:-.8px;margin:13px 0 8px}.dialog-close{background:#f2f4f6;border:0;border-radius:7px;font-size:25px;color:#455666;width:36px;height:36px;line-height:1}
.message-dialog>p {font-size:13px;line-height:1.7;color:var(--muted)}
.message-dialog pre {white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f7f9;border:1px solid #e6ebee;padding:16px;font:12px/1.75 'DM Sans',sans-serif;border-radius:9px;color:#1d3140;max-height:285px;overflow:auto}
.message-dialog>.btn {width:100%}.copy-status {margin:9px 0 0!important;color:#0c8a98!important;text-align:center}

@keyframes float-window {0%,100%{transform:perspective(1100px) rotateY(-7deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1100px) rotateY(-7deg) rotateX(2deg) translateY(-9px)}}
@keyframes float-a {0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-9px) rotate(5deg)}}
@keyframes float-b {0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(8px) rotate(-3deg)}}

@media (max-width:1190px) {
  .header-inner{gap:19px}.desktop-nav{gap:19px}.header-cta{margin-left:0}
  .hero-grid{gap:30px}.hero h1{font-size:clamp(40px,4.5vw,57px)}
  .service-card{padding-inline:19px}.service-card h3{font-size:17px}
  .solution-layout{gap:43px}.about-layout{gap:55px}.faq-grid{gap:55px}
  .contact-copy{padding:60px 40px}.contact-form-box{padding:50px 39px}
}
@media (max-width:960px) {
  html{scroll-padding-top:80px}
  .container {width:min(100% - 48px,720px)}
  .header-inner{height:74px}.desktop-nav,.header-cta{display:none}.menu-toggle{display:flex}
  .hero-grid{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:82px;padding-bottom:87px;gap:27px}
  .hero-copy{max-width:650px;margin:auto}.eyebrow{justify-content:center}.hero h1{max-width:650px;font-size:clamp(43px,6vw,63px)}.hero-copy>p{margin-inline:auto}
  .hero-actions,.hero-highlights{justify-content:center}.hero-highlights{margin-top:31px}
  .hero-visual{height:470px;width:min(100%,540px);margin:auto}.product-window{width:450px}.floating-a{right:4px}.floating-b{left:3px}
  .section{padding:85px 0}.section-head{align-items:start;flex-direction:column;gap:17px}.section-head>p{max-width:550px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:325px;padding-inline:26px}
  .solution-layout{grid-template-columns:1fr;gap:35px}.solution-aside>p{max-width:600px}.examples-grid{max-width:700px}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:22px}.process-grid::before{display:none}.process-card{padding-top:12px}
  .about-layout{grid-template-columns:1fr;gap:40px}.about-visual{max-width:670px}.about-copy{max-width:680px}
  .faq-grid{grid-template-columns:1fr;gap:25px}.contact-shell{grid-template-columns:1fr}.contact-copy{padding:65px}.contact-copy h2{max-width:510px}.contact-form-box{padding:50px 65px}
}
@media (max-width:680px) {
  .container{width:min(100% - 36px,560px)}
  .header-inner{height:70px}.brand-symbol{width:47px;height:40px}.brand-symbol img{width:49px;height:37px}.brand-name strong{font-size:19px}.brand-name>span{font-size:9px;letter-spacing:2.7px}
  .hero-grid{padding-top:68px;padding-bottom:55px;gap:15px}.eyebrow{font-size:9px;letter-spacing:1.45px;white-space:normal}.eyebrow-line{width:20px;flex-shrink:0}
  .hero h1{font-size:clamp(38px,9vw,51px);letter-spacing:-1.9px;margin:23px 0 20px}.hero-copy>p{font-size:14px;line-height:1.85}.hero-actions{gap:12px}.hero-actions .btn{padding:14px 17px;font-size:12px}
  .hero-highlights{gap:10px 13px;margin-top:30px}.hero-highlights>span{font-size:10px}
  .hero-visual{height:342px}.product-window{width:min(89%,390px);min-height:0;border-radius:12px}.window-top{height:36px;padding:0 14px;font-size:7px}.window-content{padding:15px 24px 21px}.window-brand img{height:55px;width:78px}.window-brand span{font-size:9px}.window-rule{margin:8px 0 15px}.window-title{font-size:24px}.window-description{font-size:10px;margin:11px 0 17px}.window-pills{gap:5px}.window-pills span{font-size:7px;padding:7px 8px}
  .floating-a{top:0;right:-5px;font-size:9px;padding:9px 11px}.floating-b{left:0;bottom:4px;padding:9px 11px}.floating-b strong{font-size:10px}.floating-b small{font-size:9px}.float-check{height:31px;width:31px}
  .hero-bottom-inner{font-size:8px;letter-spacing:1px;gap:11px}.hero-bottom-line{width:17px}.hero-bottom-inner>a{font-size:19px}
  .values-inner{height:auto;padding:26px 0;display:grid;grid-template-columns:1fr 1fr;gap:19px 11px}.values-inner>span{font-size:11px;gap:9px}.values-inner>i{display:none}.values-inner>span:last-child{grid-column:span 2}
  .section{padding:72px 0}.section h2,.faq-section h2{font-size:clamp(30px,7vw,38px);letter-spacing:-1.3px}.section-head{margin-bottom:31px}.section-head>p{font-size:13px}
  .service-grid{grid-template-columns:1fr;gap:13px}.service-card{min-height:0;padding:23px}.service-top{margin-bottom:18px}.service-card>p{margin-bottom:17px}.service-tags{margin-bottom:16px}
  .examples-grid{grid-template-columns:1fr}.example-a{grid-row:auto}.example-a .example-art{height:190px}.example-art{height:165px}.mini-browser{height:175px;transform:rotate(-8deg) translate(18px,43px)}
  .center-head{margin-bottom:28px}.process-grid{grid-template-columns:1fr;gap:6px}.process-card{padding:14px 10px 18px}.step-no{margin-bottom:8px}.step-icon{margin-bottom:16px}
  .about-visual{min-height:280px;padding:25px 16px}.about-logo{padding:9px}.about-stamp{font-size:7px;right:8px;bottom:12px;padding:10px}
  .faq-grid{gap:12px}.faqs summary{font-size:12.5px;padding:20px 0}
  .contact-section{padding-bottom:65px}.contact-shell{border-radius:13px}.contact-copy{padding:43px 27px 48px}.contact-copy h2{font-size:36px}.contact-form-box{padding:36px 23px}.form-row{grid-template-columns:1fr}.form-head h3{font-size:23px}
  .site-footer{padding-top:48px}.footer-top{flex-direction:column;gap:36px;padding-bottom:41px}.footer-links{gap:55px;flex-wrap:wrap}.footer-bottom{flex-direction:column;gap:10px}
}
@media (max-width:390px) {
  .container{width:calc(100% - 30px)}.hero h1{font-size:36px}.hero-visual{height:292px}.window-content{padding:13px 18px 15px}.window-brand img{width:60px;height:45px}.window-title{font-size:20px}.window-pills span{padding:6px}.floating-a{right:-4px}.floating-b{bottom:0}.hero-bottom-inner>span:nth-child(3){display:none}
  .contact-copy h2{font-size:32px}.contact-form-box{padding-inline:17px}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal.will-reveal {opacity:1!important;transform:none!important}
}

.site-footer .brand-symbol, .window-brand img {filter: drop-shadow(0 4px 16px rgba(17,200,221,.14));}
.contact-decoration, .about-stamp span, .footer-bottom p span {color: var(--gold-400);}

/* Envío directo de cotizaciones: retroalimentación accesible */
.form-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.form-submit:disabled { opacity:.68; cursor:wait; transform:none; }
.form-submit[aria-busy="true"] svg { opacity:.48; }
.form-note { transition:background-color .2s ease,color .2s ease; }
.form-note[data-state="success"] { background:#e6f9f7; color:#085954; border:1px solid #b8ece6; }
.form-note[data-state="error"] { background:#fff0ee; color:#992e24; border:1px solid #f3c7c1; }
.form-note[data-state="warning"] { background:#fff6df; color:#805414; border:1px solid #f0d99d; }