@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#182838;--muted:#607080;--line:#dfe5e9;--paper:#f7f8f7;--white:#fff;
  --blue:#30475d;--blue2:#4b687f;--soft:#eef2f3;--accent:#b35d62;--dark:#101820;
  --radius:24px;--shadow:0 24px 70px rgba(24,40,56,.10)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(247,248,247,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(24,40,56,.08)}
.navin{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.04em}
.brand img{width:118px;height:40px;object-fit:cover;object-position:center;background:#000;border-radius:8px}
.links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600}.links a:hover{opacity:.58}.menu{display:none;background:none;border:0;font-size:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:999px;border:1px solid var(--ink);font-weight:700;font-size:14px;transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(24,40,56,.12)}.btn.fill{background:var(--ink);color:#fff}.btn.soft{border-color:var(--line);background:#fff}
.hero{padding:84px 0 72px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--blue2);display:flex;align-items:center;gap:10px}.kicker:before{content:"";width:30px;height:2px;background:var(--accent)}
h1{font-size:clamp(52px,7vw,96px);line-height:.94;letter-spacing:-.07em;margin:24px 0 26px;max-width:820px}h1 span{color:#5c8caf}
.lead{font-size:18px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.visual{position:relative;min-height:560px}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb.a{width:420px;height:420px;right:0;top:30px;background:linear-gradient(145deg,#dce8eb,#b9c9cf)}.orb.b{width:230px;height:230px;left:10px;bottom:0;background:#e9d9d8}
.device{position:absolute;right:35px;top:70px;width:390px;height:430px;background:#17232d;border-radius:42px;padding:16px;box-shadow:var(--shadow);transform:rotate(3deg)}
.screen{height:100%;border-radius:30px;background:#f8f8f4;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.mini{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.screen h3{font-size:36px;line-height:1.05;letter-spacing:-.05em;margin:8px 0}
.chart{height:130px;border-radius:20px;background:linear-gradient(140deg,#dbe7eb,#fff);position:relative;overflow:hidden}.chart:after{content:"";position:absolute;inset:40% -10% -20% 10%;border:3px solid #5c8caf;border-color:#5c8caf transparent transparent #5c8caf;border-radius:50% 0 0 0;transform:rotate(-8deg)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}.stat b{font-size:22px;display:block}
.section{padding:96px 0}.section.alt{background:#fff}.section.dark{background:var(--dark);color:#eef3f5}.head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:42px}.head h2{font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.055em;margin:8px 0}.head p{max-width:520px;color:var(--muted)}.dark .head p{color:#aebac2}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;min-height:260px;transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card .icon{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:21px;margin-bottom:48px}.card h3{font-size:22px;letter-spacing:-.03em;margin:0 0 10px}.card p{color:var(--muted);font-size:14px}
.products{display:grid;grid-template-columns:1fr 1fr;gap:20px}.product{border-radius:32px;padding:38px;min-height:440px;position:relative;overflow:hidden;background:#e8eef0}.product:nth-child(2){background:#eee8e5}.product h3{font-size:40px;letter-spacing:-.05em;margin:8px 0}.product p{max-width:450px}.mock{position:absolute;right:-30px;bottom:-40px;width:72%;height:230px;border-radius:28px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.12);padding:18px;transform:rotate(-4deg)}.mock .row{height:16px;border-radius:8px;background:#e8edef;margin:10px 0}.mock .row:nth-child(2){width:70%}.mock .row:nth-child(3){width:86%}
.work{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.work-card{border-radius:30px;min-height:390px;padding:34px;background:linear-gradient(145deg,#223442,#415b6e);color:#fff;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}.work-card.small{background:linear-gradient(145deg,#c9d7db,#eef2f2);color:var(--ink)}.work-card:before{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.24);border-radius:50%;right:-40px;top:-40px}.work-card h3{font-size:34px;letter-spacing:-.04em;margin:0}.work-card p{opacity:.72;max-width:500px}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.step{border-top:1px solid #5b6871;padding:20px 10px}.step b{font-size:12px;opacity:.55}.step h3{font-size:18px}
.cta{background:#dfe7e8;border-radius:36px;padding:64px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.055em;margin:0;max-width:700px}
footer{padding:54px 0 30px;background:#fff}.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em}.foot a{display:block;color:var(--muted);font-size:14px;margin:9px 0}.socials{display:flex;gap:10px;margin-top:20px}.social{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.social svg{width:19px;height:19px}.copy{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:var(--muted);font-size:12px}
.pagehero{padding:90px 0 50px}.pagehero h1{font-size:clamp(48px,7vw,82px)}.price{font-size:26px;font-weight:800;margin-top:18px}.tag{display:inline-block;padding:7px 11px;border:1px solid var(--line);border-radius:99px;font-size:11px;font-weight:700;margin:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form input,.form select,.form textarea{width:100%;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit}.form textarea{grid-column:1/-1;min-height:150px}.form button{cursor:pointer}
.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.on{opacity:1;transform:none}
@media(max-width:900px){.links{display:none}.links.open{display:flex;position:absolute;top:78px;left:0;right:0;background:#fff;padding:24px;flex-direction:column;align-items:flex-start}.menu{display:block}.hero-grid,.products,.work,.foot{grid-template-columns:1fr}.visual{min-height:450px}.device{width:330px;right:0}.grid3{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.cta{padding:38px;align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.wrap{width:min(100% - 28px,1180px)}.hero{padding-top:50px}.grid3{grid-template-columns:1fr}.visual{min-height:390px}.device{width:285px;height:350px}.orb.a{width:320px;height:320px}.screen h3{font-size:28px}.head{display:block}.process{grid-template-columns:1fr}.form{grid-template-columns:1fr}.form textarea{grid-column:auto}.cta{border-radius:24px}}

/* ===== Codiq Motion Edition ===== */
:root{--motion:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.brand img{background:transparent!important;border:0!important;padding:0!important;object-fit:contain!important;filter:none!important}
.reveal,.motion-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--motion),transform .75s var(--motion)}
.reveal.is-visible,.motion-reveal.is-visible{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(22px)}
[data-stagger].is-visible>*{animation:rise .65s var(--motion) forwards}
[data-stagger].is-visible>*:nth-child(2){animation-delay:.07s}[data-stagger].is-visible>*:nth-child(3){animation-delay:.14s}
[data-stagger].is-visible>*:nth-child(4){animation-delay:.21s}[data-stagger].is-visible>*:nth-child(5){animation-delay:.28s}
[data-stagger].is-visible>*:nth-child(6){animation-delay:.35s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes pulseRing{0%{transform:scale(.78);opacity:.85}100%{transform:scale(1.25);opacity:0}}
@keyframes sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
.hero .visual,.hero-visual{animation:floaty 6s ease-in-out infinite;will-change:transform}
.card,.product-card,.extra-card{transition:transform .35s var(--motion),box-shadow .35s var(--motion),border-color .35s}
.card:hover,.product-card:hover,.extra-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(25,45,61,.11)}
.btn,.button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.btn:hover,.button:hover{transform:translateY(-2px)}
.btn:after,.button:after{content:"";position:absolute;top:-40%;bottom:-40%;width:45%;left:-65%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg)}
.btn:hover:after,.button:hover:after{animation:sheen .75s ease}
.lang-wrap{position:relative}
.lang-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;font-size:18px}
.lang-menu{position:absolute;right:0;top:52px;min-width:155px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 45px rgba(20,36,48,.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;z-index:50}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:block;width:100%;padding:10px 12px;border:0;background:transparent;text-align:left;border-radius:10px;cursor:pointer;font:inherit}.lang-menu button:hover{background:#f2f5f6}
.ceo-section{padding:34px 0 86px}
.ceo-panel{display:grid;grid-template-columns:minmax(260px,.75fr) 1.45fr;gap:0;min-height:480px;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(135deg,#edf3f5,#fff);box-shadow:0 25px 65px rgba(26,44,58,.09)}
.ceo-photo{position:relative;overflow:hidden;min-height:480px}.ceo-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform 1s var(--motion)}.ceo-panel:hover .ceo-photo img{transform:scale(1.035)}
.ceo-copy{padding:52px;display:flex;flex-direction:column;justify-content:center}.ceo-copy h2{font-size:clamp(38px,5vw,70px);line-height:.95;letter-spacing:-.055em;margin:10px 0 22px}.ceo-copy blockquote{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.55;color:#41515c;max-width:780px}.ceo-sign{margin-top:26px;font-weight:800}.ceo-role{font-size:13px;color:var(--muted);margin-top:3px}
.product-motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-motion-card{min-height:330px;border:1px solid var(--line);border-radius:28px;padding:26px;background:#fff;position:relative;overflow:hidden;transition:.35s var(--motion)}
.product-motion-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(25,45,61,.1)}
.product-motion-card h3{font-size:28px;letter-spacing:-.04em;margin:10px 0}.product-motion-card p{color:var(--muted);line-height:1.55}
.product-orbit{position:absolute;width:150px;height:150px;right:-24px;bottom:-22px;border:1px solid #adc0ca;border-radius:50%}.product-orbit:before,.product-orbit:after{content:"";position:absolute;border:1px solid #adc0ca;border-radius:50%;inset:24px}.product-orbit:after{inset:49px;background:#e8eff2}
.product-motion-card:hover .product-orbit{animation:floaty 2.8s ease-in-out infinite}
.motion-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#587d94;right:54px;bottom:54px;box-shadow:0 0 0 0 rgba(88,125,148,.35);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 24px rgba(88,125,148,0)}100%{box-shadow:0 0 0 0 rgba(88,125,148,0)}}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;background:#fafbfb}
.marquee-track{display:flex;width:max-content;gap:50px;animation:marquee 24s linear infinite;font-weight:800;color:#6b7d88;text-transform:uppercase;letter-spacing:.13em;font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:1050px){.product-motion-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ceo-panel{grid-template-columns:1fr}.ceo-photo{min-height:420px}.ceo-copy{padding:32px}.product-motion-grid{grid-template-columns:1fr}.lang-menu{right:-30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* CODIQ TECH motion + responsive refinement */
.brand img{width:142px;height:48px;object-fit:contain;object-position:left center;background:transparent!important;border-radius:0!important}
footer img[alt="CODIQ TECH"]{object-fit:contain;background:transparent!important;border-radius:0!important}
.lang-wrap{position:relative}.lang-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.72);cursor:pointer;font-size:18px}
.lang-menu{display:none;position:absolute;right:0;top:48px;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow);z-index:100}
.lang-wrap.open .lang-menu{display:grid;animation:menuPop .2s ease both}.lang-menu button{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer}.lang-menu button:hover{background:var(--soft)}
@keyframes menuPop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.reveal,.motion-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.on,.reveal.is-visible,.motion-reveal.is-visible{opacity:1;transform:none}
.device{animation:deviceFloat 6s ease-in-out infinite}.orb.a{animation:orbFloat 9s ease-in-out infinite}.orb.b{animation:orbFloat 7s ease-in-out -2s infinite}
.chart:after{animation:chartPulse 3.2s ease-in-out infinite}
@keyframes deviceFloat{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1deg) translateY(-14px)}}@keyframes orbFloat{50%{transform:translate(12px,-18px) scale(1.04)}}@keyframes chartPulse{50%{transform:rotate(-8deg) translate(8px,-4px)}}
.compact{padding-bottom:24px}.ceo-section{padding-top:36px}.ceo-grid{display:grid;grid-template-columns:minmax(300px,.82fr) 1.18fr;gap:70px;align-items:center}.ceo-photo{position:relative}.ceo-photo img{width:100%;max-height:660px;object-fit:cover;border-radius:34px;box-shadow:var(--shadow)}.ceo-badge{position:absolute;left:22px;right:22px;bottom:22px;padding:16px 18px;border-radius:18px;background:rgba(247,248,247,.88);backdrop-filter:blur(14px);display:grid}.ceo-badge span,.ceo-sign span{font-size:13px;color:var(--muted)}.ceo-copy blockquote{font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em;margin:24px 0 30px}.ceo-copy p{font-size:16px;color:var(--muted);max-width:700px}.ceo-sign{display:grid;border-top:1px solid var(--line);padding-top:22px;margin-top:30px}
.social-lab{overflow:hidden}.social-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.social-copy h2{font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.055em;margin:18px 0}.social-copy p{color:var(--muted)}.social-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.social-pills span{border:1px solid var(--line);border-radius:99px;padding:8px 12px;font-size:12px}
.campaign-stage{min-height:520px;position:relative}.campaign-phone{position:absolute;width:270px;height:390px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);border:12px solid var(--ink);border-radius:34px;background:#fff;padding:24px;box-shadow:var(--shadow);animation:phoneFloat 5s ease-in-out infinite}.phone-label{font-size:11px;letter-spacing:.16em;color:var(--muted)}.post-image{height:185px;margin-top:18px;border-radius:20px;background:linear-gradient(135deg,#dce8eb,#b9cbd3);position:relative;overflow:hidden}.post-image:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.65);right:-18px;bottom:-20px;animation:bubble 4s ease-in-out infinite}.post-line{height:12px;border-radius:8px;background:#e2e8eb;margin-top:18px}.post-line.short{width:68%}.campaign-card{position:absolute;width:230px;padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.84);backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(24,40,56,.08);animation:cardFloat 6s ease-in-out infinite}.campaign-card small{display:block;color:var(--muted);letter-spacing:.12em}.campaign-card strong{display:block;font-size:21px;margin-top:8px}.campaign-card.c1{right:0;top:55px}.campaign-card.c2{left:0;bottom:60px;animation-delay:-2s}.campaign-orbit{position:absolute;inset:50% auto auto 50%;width:430px;height:430px;border:1px solid #dbe3e6;border-radius:50%;transform:translate(-50%,-50%);z-index:-1;animation:orbitSpin 18s linear infinite}
@keyframes phoneFloat{50%{transform:translate(-50%,-54%) rotate(2deg)}}@keyframes cardFloat{50%{transform:translateY(-14px)}}@keyframes bubble{50%{transform:translate(-15px,-8px) scale(1.12)}}@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:900px){.links{display:none;position:absolute;top:78px;left:20px;right:20px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.links.open{display:flex}.menu{display:block}.hero-grid,.ceo-grid,.social-grid{grid-template-columns:1fr}.visual{min-height:470px}.social-grid{gap:30px}.campaign-stage{min-height:470px}.ceo-grid{gap:34px}.products,.work{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr 1fr}.head{align-items:start;flex-direction:column}.form{grid-template-columns:1fr}.form textarea{grid-column:auto}.cta{padding:38px;flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.wrap{width:min(100% - 28px,1180px)}.hero{padding-top:48px}.visual{min-height:390px}.device{width:min(330px,90vw);height:360px;right:50%;transform:translateX(50%) rotate(2deg)}.device{animation:none}.screen h3{font-size:29px}.campaign-card{width:180px;padding:15px}.campaign-phone{width:235px;height:350px}.campaign-card.c1{right:-5px}.campaign-card.c2{left:-5px}.foot{grid-template-columns:1fr}.process{grid-template-columns:1fr}.brand img{width:124px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal,.motion-reveal{opacity:1;transform:none}}

/* ===== CODIQ REFINED — preserves original v2 layout ===== */
:root{--server-bg:url("server-hero.jpg")}
html{background:#f7f6f3}
body{position:relative;background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:
linear-gradient(rgba(247,246,243,.15),rgba(247,246,243,.19)),
var(--server-bg) center/cover no-repeat;transform:scale(1.01)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
radial-gradient(circle at 16% 12%,rgba(255,255,255,.78),transparent 38%),
linear-gradient(120deg,rgba(255,255,255,.25),transparent 58%)}
.nav{background:rgba(247,246,243,.76)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hero,.pagehero{background:transparent!important}
.section{background:rgba(247,246,243,.80);backdrop-filter:blur(3px)}
.section.alt{background:rgba(239,241,239,.84)}
.section.dark{background:rgba(17,31,44,.94)}
footer{background:rgba(236,238,236,.90)}
.theme-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:17px;transition:.25s}
.theme-btn:hover{transform:translateY(-2px)}
html[data-theme="dark"]{--ink:#eef7ff;--muted:#a7bdd0;--line:#294c68;--paper:#071522;--white:#0d2030;--soft:#102a3d;--dark:#04111c;--blue:#78b9e7;--blue2:#9bd3f5;background:#04111c}
html[data-theme="dark"] body::before{background:
linear-gradient(135deg,rgba(2,10,20,.62),rgba(5,28,48,.16) 48%,rgba(2,12,22,.27)),
var(--server-bg) center/cover no-repeat}
html[data-theme="dark"] body::after{background:
radial-gradient(circle at 78% 18%,rgba(40,147,214,.20),transparent 34%),
radial-gradient(circle at 18% 78%,rgba(26,96,153,.18),transparent 36%)}
html[data-theme="dark"] .nav{background:rgba(4,17,28,.28)!important;border-color:rgba(124,185,231,.15)}
html[data-theme="dark"] .section{background:rgba(6,25,40,.82)}
html[data-theme="dark"] .section.alt{background:rgba(9,34,52,.88)}
html[data-theme="dark"] .section.dark{background:rgba(3,15,25,.94)}
html[data-theme="dark"] footer{background:rgba(3,15,25,.94)}
html[data-theme="dark"] .card,html[data-theme="dark"] .screen,html[data-theme="dark"] .stat,html[data-theme="dark"] .form input,html[data-theme="dark"] .form select,html[data-theme="dark"] .form textarea{background:rgba(12,38,57,.82);color:var(--ink);border-color:rgba(122,185,231,.20)}
html[data-theme="dark"] .theme-btn{background:rgba(14,44,65,.75);color:#eef7ff;border-color:#315d7c}
.system-plans{border-top:1px solid var(--line)}
.plan-grid{margin-top:28px}.plan-card{min-height:290px;display:flex;flex-direction:column}.plan-card h3{font-size:25px;line-height:1.05}.plan-card p{flex:1}
.featured-plan{transform:translateY(-8px);box-shadow:0 24px 60px rgba(17,45,66,.12)}
.plan-link{font-size:13px;font-weight:800;color:var(--ink);margin-top:20px}
.support-chat{position:fixed;right:22px;bottom:22px;z-index:9999;font-family:inherit}
.chat-launch{border:0;border-radius:999px;padding:13px 18px;background:#17344c;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.22);display:flex;gap:9px;align-items:center;font-weight:800;cursor:pointer}
.chat-dot{width:9px;height:9px;border-radius:50%;background:#64d89a;box-shadow:0 0 0 5px rgba(100,216,154,.14)}
.chat-panel{position:absolute;right:0;bottom:58px;width:min(340px,calc(100vw - 32px));padding:22px;border-radius:22px;background:rgba(249,249,247,.97);border:1px solid rgba(22,48,69,.14);box-shadow:0 24px 70px rgba(0,0,0,.24);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transition:.25s}
.support-chat.open .chat-panel{opacity:1;visibility:visible;transform:none}
.chat-close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:25px;cursor:pointer;color:#17344c}
.chat-brand{font-size:11px;font-weight:900;letter-spacing:.12em;color:#17344c}.chat-brand span{color:#4caf78;letter-spacing:0}
.chat-panel h3{margin:14px 0 6px;font-size:25px;color:#172d40}.chat-panel p{font-size:13px;color:#657583;margin:0 0 14px}
.chat-panel a{display:block;padding:11px 12px;margin:7px 0;border-radius:12px;background:#edf2f4;color:#17344c;font-size:13px;font-weight:700}
.chat-panel .chat-whatsapp{background:#17344c;color:#fff;margin-top:12px}
html[data-theme="dark"] .chat-panel{background:rgba(7,27,42,.98);border-color:#28516f}
html[data-theme="dark"] .chat-panel h3,html[data-theme="dark"] .chat-brand,html[data-theme="dark"] .chat-close{color:#eef7ff}
html[data-theme="dark"] .chat-panel p{color:#a7bdd0}
html[data-theme="dark"] .chat-panel a{background:#102f47;color:#e9f6ff}
html[data-theme="dark"] .chat-panel .chat-whatsapp{background:#76b8e6;color:#061827}
@media(max-width:760px){.support-chat{right:14px;bottom:14px}.chat-launch span:last-child{display:none}.chat-launch{width:48px;height:48px;padding:0;justify-content:center}.featured-plan{transform:none}}


/* ===== CODIQ FINAL THEME REFINEMENTS ===== */
.lang-btn .lang-icon{
  width:21px;height:21px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

/* Preserve the server image as the visual canvas while keeping content readable. */
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .pagehero{background:transparent!important}
html:not([data-theme="dark"]) .section{background:rgba(247,246,243,.76)}
html:not([data-theme="dark"]) .section.alt{background:rgba(239,241,239,.80)}
html:not([data-theme="dark"]) footer{background:rgba(236,238,236,.86)}

/* Dark mode: deep navy rather than bright blue. */
html[data-theme="dark"]{
  --ink:#f4f9ff;
  --muted:#a8bdd0;
  --line:rgba(141,193,231,.22);
  --paper:#050d17;
  --white:#0a1928;
  --soft:#0d2336;
  --dark:#020a12;
  --blue:#66b8ef;
  --blue2:#9bd8ff;
  background:#020a12;
}
html[data-theme="dark"] body{background:#020a12;color:var(--ink)}
html[data-theme="dark"] .nav{
  background:rgba(2,12,22,.82)!important;
  border-color:rgba(126,190,235,.16);
  box-shadow:0 10px 40px rgba(0,0,0,.16)
}
html[data-theme="dark"] .section{background:rgba(4,17,29,.80)}
html[data-theme="dark"] .section.alt{background:rgba(7,28,45,.84)}
html[data-theme="dark"] .section.dark{background:rgba(2,10,18,.94)}
html[data-theme="dark"] footer{
  background:linear-gradient(135deg,rgba(2,10,18,.97),rgba(5,28,46,.96));
  border-top:1px solid rgba(126,190,235,.14)
}
html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .contact-cta{
  background:linear-gradient(135deg,rgba(7,25,40,.94),rgba(10,46,72,.91))!important;
  border-color:rgba(126,190,235,.20)!important;
  color:#f4f9ff!important;
  box-shadow:0 24px 70px rgba(0,0,0,.24)
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .product,
html[data-theme="dark"] .product-motion-card,
html[data-theme="dark"] .screen,
html[data-theme="dark"] .stat{
  background:rgba(9,30,47,.86);
  border-color:rgba(126,190,235,.17)
}
html[data-theme="dark"] .theme-btn,
html[data-theme="dark"] .lang-btn{
  background:rgba(15,48,72,.72);
  color:#dff3ff;
  border-color:rgba(126,190,235,.24)
}

/* CODIQ FINAL THEME CONTRAST */
html:not([data-theme="dark"]) body{color:#263b4c}
html:not([data-theme="dark"]) h1,html:not([data-theme="dark"]) h2,html:not([data-theme="dark"]) h3,html:not([data-theme="dark"]) h4{color:#14283a}
html:not([data-theme="dark"]) p,html:not([data-theme="dark"]) .lead,html:not([data-theme="dark"]) .muted,html:not([data-theme="dark"]) .mini{color:#61717d}
html:not([data-theme="dark"]) .links a,html:not([data-theme="dark"]) footer a{color:#263b4c}
html:not([data-theme="dark"]) .kicker,html:not([data-theme="dark"]) h1 span{color:#4d91bd}
html[data-theme="dark"] body,html[data-theme="dark"] main,html[data-theme="dark"] header,html[data-theme="dark"] section,html[data-theme="dark"] footer{color:#eaf5fd}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,html[data-theme="dark"] strong,html[data-theme="dark"] b{color:#f5fbff}
html[data-theme="dark"] p,html[data-theme="dark"] .lead,html[data-theme="dark"] .muted,html[data-theme="dark"] .mini,html[data-theme="dark"] .copy{color:#aec5d7}
html[data-theme="dark"] .kicker,html[data-theme="dark"] h1 span,html[data-theme="dark"] .price{color:#77c7f6}
html[data-theme="dark"] .links a,html[data-theme="dark"] footer a,html[data-theme="dark"] .foot a{color:#d7e9f5}
html[data-theme="dark"] .links a:hover,html[data-theme="dark"] footer a:hover{color:#82cff8}
html[data-theme="dark"] .btn.soft{color:#e9f6ff;background:rgba(11,38,58,.72);border-color:rgba(132,200,242,.28)}
html[data-theme="dark"] .btn.fill{color:#04121d;background:#8bd2f7;border-color:#8bd2f7}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{color:#f1f8fd!important;background:rgba(7,25,40,.88)!important;border-color:rgba(132,200,242,.22)!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#829daf}
html[data-theme="dark"] .lang-menu{background:#081b2b;border-color:rgba(132,200,242,.20)}
html[data-theme="dark"] .lang-menu button{color:#e7f4fc}
html[data-theme="dark"] .social{color:#dff2fd;border-color:rgba(132,200,242,.26)}
body::before{filter:saturate(.94) contrast(1.04)}
html[data-theme="dark"] body::before{filter:saturate(.88) brightness(.86) contrast(1.08)}

/* ===== FINAL CODIQ THEME OVERRIDES ===== */
html:not([data-theme="dark"]){--cx:#173e5c;--ct:#294455;--cm:#657985;--ca:#377fa9}
html:not([data-theme="dark"]) body::before{background:linear-gradient(135deg,rgba(244,241,233,.48),rgba(244,241,233,.57) 48%,rgba(244,241,233,.65)),var(--server-bg) center/cover no-repeat!important;filter:saturate(.88) contrast(1.08) brightness(1.01)!important}
html:not([data-theme="dark"]) body{color:var(--ct)!important}
html:not([data-theme="dark"]) h1,html:not([data-theme="dark"]) h2,html:not([data-theme="dark"]) h3,html:not([data-theme="dark"]) h4,html:not([data-theme="dark"]) h5,html:not([data-theme="dark"]) h6,html:not([data-theme="dark"]) strong{color:#132b3e!important}
html:not([data-theme="dark"]) p,html:not([data-theme="dark"]) .lead,html:not([data-theme="dark"]) .muted,html:not([data-theme="dark"]) .mini,html:not([data-theme="dark"]) .copy{color:var(--cm)!important}
html:not([data-theme="dark"]) .kicker,html:not([data-theme="dark"]) h1 span,html:not([data-theme="dark"]) .accent{color:var(--ca)!important}
html:not([data-theme="dark"]) .btn.fill,html:not([data-theme="dark"]) a.btn.fill,html:not([data-theme="dark"]) header .btn.fill,html:not([data-theme="dark"]) nav .btn.fill{background:#173e5c!important;color:#fff!important;border-color:#173e5c!important}
html:not([data-theme="dark"]) .btn.fill:hover{background:#245f83!important;color:#fff!important}
html:not([data-theme="dark"]) .btn.soft{background:rgba(255,253,248,.76)!important;color:#173e5c!important;border-color:rgba(23,62,92,.22)!important}
html:not([data-theme="dark"]) nav a,html:not([data-theme="dark"]) .links a,html:not([data-theme="dark"]) footer a{color:#294455!important}

html[data-theme="dark"]{--cx:#70d2ff;--ct:#d4e6f2;--cm:#9eb8ca;--ca:#70d2ff}
html[data-theme="dark"] body::before{background:linear-gradient(135deg,rgba(3,13,24,.48),rgba(5,29,48,.53) 48%,rgba(4,17,29,.61)),var(--server-bg) center/cover no-repeat!important;filter:saturate(.92) contrast(1.10) brightness(.82)!important}
html[data-theme="dark"] body,html[data-theme="dark"] main,html[data-theme="dark"] section,html[data-theme="dark"] header,html[data-theme="dark"] footer{color:var(--ct)!important}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,html[data-theme="dark"] strong{color:#f1f8ff!important}
html[data-theme="dark"] p,html[data-theme="dark"] .lead,html[data-theme="dark"] .muted,html[data-theme="dark"] .mini,html[data-theme="dark"] .copy{color:var(--cm)!important}
html[data-theme="dark"] .kicker,html[data-theme="dark"] h1 span,html[data-theme="dark"] .accent,html[data-theme="dark"] .price{color:var(--ca)!important}
html[data-theme="dark"] .btn.fill,html[data-theme="dark"] a.btn.fill,html[data-theme="dark"] header .btn.fill,html[data-theme="dark"] nav .btn.fill{background:#70d2ff!important;color:#04131f!important;border-color:#70d2ff!important}
html[data-theme="dark"] .btn.fill:hover{background:#b6a5ff!important;color:#08111b!important;border-color:#b6a5ff!important}
html[data-theme="dark"] .btn.soft{background:rgba(10,39,61,.82)!important;color:#e9f7ff!important;border-color:rgba(112,210,255,.28)!important}
html[data-theme="dark"] nav a,html[data-theme="dark"] .links a,html[data-theme="dark"] footer a,html[data-theme="dark"] .foot a{color:#d8eaf5!important}
html[data-theme="dark"] nav a:hover,html[data-theme="dark"] .links a:hover,html[data-theme="dark"] footer a:hover{color:#70d2ff!important}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:rgba(5,24,39,.90)!important;color:#f1f8ff!important;border-color:rgba(112,210,255,.25)!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#86a4b7!important}