/* ===== Futuristic homepage (body.home) — effects are driven by ai-background.js ===== */

/* Typography: Inter for text, Inter Tight for headings and buttons, IBM Plex Sans Arabic for Arabic (Google Fonts).
   Bigger, brighter text where it matters. */
body.home{--muted:#b2bbc8;font-family:'Inter','IBM Plex Sans Arabic',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.home h1,body.home h2,body.home h3,body.home .btn,body.home .brand,body.home .section-kicker,body.home .eyebrow,body.home .core-label b{font-family:'Inter Tight','Inter','IBM Plex Sans Arabic',Arial,sans-serif}
html[dir="rtl"] body.home,html[dir="rtl"] body.home h1,html[dir="rtl"] body.home h2,html[dir="rtl"] body.home h3,html[dir="rtl"] body.home .btn,
html[dir="rtl"] body.home .section-kicker,html[dir="rtl"] body.home .eyebrow{font-family:'IBM Plex Sans Arabic','Inter',Arial,sans-serif;letter-spacing:0}
body.home nav a{font-size:14px}
body.home .eyebrow,body.home .section-kicker{font-size:12.5px;letter-spacing:2.2px}
body.home .hero h1{font-weight:800;letter-spacing:-2.5px}
body.home .hero p{font-size:clamp(18px,1.45vw,21px);line-height:1.65;color:#c3cad5}
body.home h2{font-weight:800}
body.home .intro p,body.home .section-head p{font-size:19px;line-height:1.65}
body.home .btn{font-size:16px}
body.home .service-grid h3{font-size:26px}
body.home .service-grid p,body.home .work-card p,body.home .pricing p,body.home .final-cta p{font-size:17px;line-height:1.6}
body.home .founder-body p{font-size:18px}
body.home .hero .card-line{font-size:13.5px}
body.home footer{font-size:13px}
html[dir="rtl"] body.home .hero h1,html[dir="rtl"] body.home h2{line-height:1.25}
html[dir="rtl"] body.home .eyebrow,html[dir="rtl"] body.home .section-kicker,html[dir="rtl"] .ai-badge-row span{font-size:14.5px}

/* Background: animated 3D AI network (canvas) + fine grid + glows */
.ai-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
body.home{background:radial-gradient(900px 600px at 85% -10%,rgba(232,255,47,.10),transparent 60%),
  radial-gradient(800px 600px at -10% 40%,rgba(89,216,255,.07),transparent 60%),var(--bg);background-attachment:fixed}
.ai-grid{position:fixed;inset:-112px;z-index:0;pointer-events:none;will-change:transform;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 25%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 0%,transparent 70%)}
body.home main,body.home footer{position:relative;z-index:2}  /* above the 3D story canvas (z-index 1): text stays readable */
body.home .nav{z-index:20}
body.home .service-grid article,body.home .work-card,body.home .pricing,body.home .final-cta,body.home .founder-card{background-color:rgba(13,17,24,.9)}

/* The hero picture (never the text) drifts gently with the mouse and scrolls slower than the page */
/* Keeps style.css's own placement of the artwork (a centred band on wide screens) and only adds a slight
   zoom so the gentle movement never shows an edge. */
body.home .hero-bg:before{scale:1.06;translate:calc(var(--mx,0) * -20px) calc(var(--my,0) * -14px + var(--hs,0) * 1px)}
/* Key words in the accent yellow (site-i18n.js wraps the last words of [data-hl] headings) */
.hl{color:var(--accent);text-shadow:0 0 30px rgba(232,255,47,.28)}
body.home .actions{flex-wrap:wrap}
/* Buttons keep breathing room around their text in every language: long labels wrap onto two
   balanced lines instead of filling the button edge to edge or being cut off */
body.home .btn{min-height:54px;padding:14px 28px;text-align:center;line-height:1.25;text-wrap:balance;max-width:100%}
.ai-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.ai-badge-row span{position:relative;font-size:12px;letter-spacing:.6px;font-weight:700;color:#cfe57a;border:1px solid rgba(232,255,47,.3);background:rgba(232,255,47,.06);padding:6px 10px 6px 22px;border-radius:999px}
.ai-badge-row span:before{content:'';position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e8ff2f;box-shadow:0 0 8px #e8ff2f;animation:aiBlink 2.4s ease-in-out infinite}
.ai-badge-row span:nth-child(2):before{animation-delay:.8s}.ai-badge-row span:nth-child(3):before{animation-delay:1.6s}
html[dir="rtl"] .ai-badge-row span{padding:6px 22px 6px 10px}html[dir="rtl"] .ai-badge-row span:before{left:auto;right:9px}
@keyframes aiBlink{0%,100%{opacity:.35}50%{opacity:1}}

/* Modern buttons: a clean bright pill with a soft glow (main action) or frosted glass (second action).
   Nothing jumps: only colour and glow change, and on the main actions a small arrow slides on hover. */
body.home .btn{position:relative;isolation:isolate;border-radius:14px;font-weight:700;letter-spacing:.2px;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .25s ease,color .2s ease}
body.home .btn.primary{background:#e8ff2f;border:1px solid #e8ff2f;color:#0a0d0b;
  box-shadow:0 10px 30px rgba(232,255,47,.22),inset 0 1px 0 rgba(255,255,255,.55)}
body.home .btn.primary:hover{background:#f2ff7a;border-color:#f2ff7a;box-shadow:0 14px 42px rgba(232,255,47,.4),inset 0 1px 0 rgba(255,255,255,.6)}
body.home .btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#f4f6f8;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body.home .btn.ghost:hover{background:rgba(232,255,47,.08);border-color:rgba(232,255,47,.75);color:#fff;box-shadow:0 0 24px rgba(232,255,47,.14)}
body.home .btn:active{filter:brightness(.94)}
body.home .btn:focus-visible{outline:2px solid #e8ff2f;outline-offset:3px}
body.home .btn.go:after{content:'→';display:inline-block;margin-inline-start:10px;font-weight:800;transition:transform .22s ease}
html[dir="rtl"] body.home .btn.go:after{content:'←'}
body.home .btn.go:hover:after{transform:translateX(5px)}
html[dir="rtl"] body.home .btn.go:hover:after{transform:translateX(-5px)}

/* Cards: a calm lift and a yellow edge on hover (no tilting text) */
body.home .service-grid article,.demo-features article{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
body.home .service-grid article:hover,.demo-features article:hover{transform:translateY(-4px);border-color:rgba(232,255,47,.45);box-shadow:0 24px 56px rgba(0,0,0,.5)}

/* Real pictures in the cards: project screenshots (services) and the demo screens (per language) */
body.home .service-grid article{overflow:hidden}
.card-shot{margin:-32px -32px 26px;height:200px;overflow:hidden;border-bottom:1px solid var(--line);background:#0b0e13}
.card-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
body.home .service-grid article:hover .card-shot img{transform:scale(1.04)}
body.home .service-grid .card-shot+b+h3{margin-top:14px}
.feature-shot{margin:-26px -26px 20px;height:230px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;gap:10px;padding:22px 18px 0;
  border-bottom:1px solid var(--line);border-radius:16px 16px 0 0;background:radial-gradient(260px 180px at 50% 100%,rgba(232,255,47,.14),transparent 70%),#0b0e13}
.feature-shot img{display:block;width:72%;height:auto;border-radius:16px 16px 0 0;box-shadow:0 18px 40px rgba(0,0,0,.55);transition:transform .5s ease}
.feature-shot.duo img{width:47%}
.feature-shot.duo img+img{margin-top:26px}
.demo-features article:hover .feature-shot img{transform:translateY(-6px)}

/* Who we are + what we do + direct contact buttons */
.about-contact{align-items:start}
.about-lead{margin-bottom:28px}
.about-what{margin-top:6px}
.about-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.about-list li{position:relative;padding-inline-start:26px;color:#dde2e9;font-size:17.5px;line-height:1.55}
.about-list li:before{content:'';position:absolute;inset-inline-start:2px;top:.62em;width:10px;height:10px;border-radius:3px;background:#e8ff2f;box-shadow:0 0 12px rgba(232,255,47,.6);transform:rotate(45deg)}
.contact-box{padding:34px;border:1px solid rgba(232,255,47,.35);border-radius:20px;background:linear-gradient(140deg,rgba(24,31,10,.92),rgba(11,14,19,.92))}
.contact-box h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.8px;margin:10px 0}
.contact-box p{color:var(--muted);margin:0 0 20px;font-size:17px}
.contact-buttons{display:flex;gap:10px;flex-wrap:wrap}
body.home .contact-buttons .btn{flex:1 1 150px;padding-inline:20px}
.contact-demo{width:100%;margin-top:12px}
@media(max-width:800px){.contact-box{padding:26px 20px}}

/* "How the system works": channels -> AI core -> dashboard, with data packets drawn on .sys-wires */
.sys-flow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(40px,8vw,130px);margin:10px 0 46px;padding:38px clamp(18px,3vw,40px);
  border:1px solid rgba(89,216,255,.18);border-radius:24px;background:radial-gradient(500px 300px at 50% 50%,rgba(232,255,47,.07),transparent 70%),rgba(9,12,17,.78);overflow:hidden}
.sys-wires{position:absolute;inset:0;z-index:0;pointer-events:none}
.sys-col{position:relative;z-index:1;display:grid;gap:14px}
.sys-node{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #29313d;border-radius:14px;background:linear-gradient(180deg,#121821,#0c1016);
  box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);font-size:15.5px;font-weight:700;color:#e9edf2;transition:border-color .3s,box-shadow .3s}
.sys-node svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:#59d8ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sys-node.out svg{stroke:#e8ff2f}
.sys-node.ping{border-color:rgba(232,255,47,.7);box-shadow:0 0 0 1px rgba(232,255,47,.3),0 0 26px rgba(232,255,47,.25)}
.sys-in .sys-node.ping{border-color:rgba(89,216,255,.7);box-shadow:0 0 0 1px rgba(89,216,255,.3),0 0 26px rgba(89,216,255,.25)}
.sys-core{position:relative;z-index:1;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#26300c,#0b0e12 68%);border:1px solid rgba(232,255,47,.5);box-shadow:0 0 60px rgba(232,255,47,.22),inset 0 0 40px rgba(232,255,47,.12);transition:box-shadow .35s ease,transform .35s ease}
.sys-core.hit{box-shadow:0 0 100px rgba(232,255,47,.45),inset 0 0 60px rgba(232,255,47,.25);transform:scale(1.04)}
.sys-core .ring{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(232,255,47,.28);border-top-color:#e8ff2f;animation:coreSpin 6s linear infinite}
.sys-core .r2{inset:-28px;border-color:rgba(89,216,255,.18);border-right-color:#59d8ff;animation-duration:9s;animation-direction:reverse}
.sys-core .r3{inset:8px;border-style:dashed;border-color:rgba(232,255,47,.22);animation-duration:14s}
.core-label{text-align:center;line-height:1.1}
.core-label b{display:block;font-size:46px;letter-spacing:-2px;color:#e8ff2f;text-shadow:0 0 22px rgba(232,255,47,.6)}
.core-label small{display:block;max-width:124px;margin-top:6px;font-size:11px;letter-spacing:.4px;color:#b9c2cf}
@keyframes coreSpin{to{transform:rotate(360deg)}}
@media(max-width:800px){
  .sys-flow{grid-template-columns:1fr;gap:42px;padding:26px 16px;justify-items:center}
  .sys-col{width:100%;grid-template-columns:1fr 1fr;gap:10px}
  .sys-out{grid-template-columns:1fr}
  .sys-node{padding:10px 12px;font-size:14.5px}
  body.home .hero p{font-size:18px}
  body.home .intro p,body.home .section-head p{font-size:17.5px}
  .sys-core{width:140px;height:140px}.core-label b{font-size:38px}
}

/* What the demo shows */
.demo-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.demo-features article{padding:26px;border:1px solid var(--line);border-radius:16px;background:rgba(13,17,24,.9);overflow:hidden}
.demo-features h3{font-size:21px;margin:0 0 8px}
.demo-features p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.demo-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.demo-cta-row span{color:var(--muted);font-size:14.5px}
@media(max-width:1000px){.demo-features{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.demo-features{grid-template-columns:1fr}.demo-cta-row .btn{width:100%}}

/* Popup form: let the inputs shrink on narrow phones instead of pushing past the screen edge */
.popup form .phone>input{min-width:0;width:100%}

@media(prefers-reduced-motion:reduce){
  body.home .btn.primary:before,.sys-core .ring,.ai-badge-row span:before{animation:none}
  body.home .btn{transform:none}
}

/* ===== The simpler homepage: "choose what you need", one contact block, and more motion ===== */
/* Moving light behind everything (slow drifting colour clouds; transform-only, so it stays smooth on phones) */
.ai-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ai-aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform;opacity:.5}
.ai-aurora i:nth-child(1){background:radial-gradient(circle,rgba(232,255,47,.20),transparent 62%);left:45%;top:-25%;animation:auroraA 24s ease-in-out infinite alternate}
.ai-aurora i:nth-child(2){background:radial-gradient(circle,rgba(89,216,255,.17),transparent 62%);left:-25%;top:25%;animation:auroraB 30s ease-in-out infinite alternate}
.ai-aurora i:nth-child(3){background:radial-gradient(circle,rgba(150,120,255,.13),transparent 62%);left:30%;top:55%;animation:auroraC 36s ease-in-out infinite alternate}
@keyframes auroraA{to{transform:translate(-32vw,30vh) scale(1.25)}}
@keyframes auroraB{to{transform:translate(38vw,-18vh) scale(1.15)}}
@keyframes auroraC{to{transform:translate(-20vw,-35vh) scale(1.3)}}

/* Sections glide in as they come into view. Nothing is ever hidden while waiting: the animation only plays when\n   ai-background.js marks an element .in, slightly before it enters the screen. */
/* One place at a time: each part appears when it reaches the screen and fades away again when it leaves
   (above or below), so the eye stays on what is in front of it. Without ai-background.js nothing is hidden. */
html.reveal-on [data-reveal]{opacity:0;transform:translateY(48px) scale(.985);
  transition:opacity .6s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
             border-color .25s ease,box-shadow .25s ease}
html.reveal-on [data-reveal].gone-up{transform:translateY(-48px) scale(.985)}
html.reveal-on [data-reveal].in{opacity:1;transform:none}

/* The key words of the big headline shine (the letters themselves stay still) */
body.home .hero .hl{background:linear-gradient(100deg,#e8ff2f 30%,#fbffd2 45%,#e8ff2f 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none;animation:hlShine 6s linear infinite}
@keyframes hlShine{to{background-position:-250% 0}}

/* Menu: four plain links on one line */
body.home .nav > nav{gap:26px;align-items:center}
body.home .nav > nav > a:not(.nav-team):not(.nav-cta){color:#d7dde6;font-weight:600}
body.home .nav > nav > a:not(.nav-team):not(.nav-cta):hover{color:var(--accent)}
body.home .nav .nav-team{padding:9px 14px}

/* 2) Choose what you need: four big cards with a real picture */
.need-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.need-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:rgba(13,17,24,.92);color:var(--text);transition:border-color .25s ease,box-shadow .25s ease}
.need-shot{margin:0;height:180px;flex-shrink:0;overflow:hidden;background:#0b0e13;border-bottom:1px solid var(--line)}
.need-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s ease}
.need-shot.phone{display:flex;align-items:flex-start;justify-content:center;padding:20px 18px 0;background:radial-gradient(260px 200px at 50% 100%,rgba(232,255,47,.18),transparent 70%),#0b0e13}
.need-shot.phone img{width:88%;height:auto;object-fit:contain;border-radius:14px 14px 0 0;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.need-body{display:flex;flex-direction:column;gap:10px;padding:24px 24px 22px;min-width:0}
.need-body h3{margin:0;font-size:24px;line-height:1.2}
.need-body p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.6}
.need-go{margin-top:auto;color:var(--accent);font-weight:800;font-size:15.5px}
.need-new{align-self:flex-start;padding:3px 11px;border-radius:999px;background:var(--accent);color:#0a0d0b;font-size:11.5px;font-weight:800;letter-spacing:1px}
body.home .need-card:hover{border-color:rgba(232,255,47,.55);box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 0 1px rgba(232,255,47,.15)}
body.home .need-card:hover .need-shot img{transform:scale(1.05)}
/* The new AI service: a living light runs along its border */
.need-ai{border-color:transparent;background:linear-gradient(rgba(13,17,24,.96),rgba(13,17,24,.96)) padding-box,
  linear-gradient(120deg,rgba(232,255,47,.12),#e8ff2f,rgba(89,216,255,.75),rgba(232,255,47,.12)) border-box;background-size:auto,300% 300%;animation:borderFlow 6s ease-in-out infinite}
@keyframes borderFlow{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}
@media(max-width:1200px){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .need-grid{grid-template-columns:minmax(0,1fr)}
  .need-shot{height:170px}
  .need-body h3{font-size:21px}
}

/* 3) The AI assistant: call it right here or try the demo */
body.home #ai .demo-cta-row{margin-top:4px}

/* 6) Contact + the founder, side by side */
.contact-final{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
.contact-request{width:100%;margin-top:12px}
.founder-mini{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:30px;border:1px solid var(--line);border-radius:20px;background:rgba(13,17,24,.92);color:var(--text);transition:border-color .25s ease}
.founder-mini:hover{border-color:rgba(232,255,47,.45)}
.founder-mini .founder-avatar{width:84px;height:84px;flex-shrink:0}
.founder-mini .founder-avatar span{font-size:28px}
.founder-mini h3{margin:6px 0 8px;font-size:24px}
.founder-mini p{margin:0 0 10px;color:var(--muted);font-size:16px;line-height:1.6}
.founder-mini .founder-link{color:var(--accent);font-weight:800}
@media(max-width:900px){.contact-final{grid-template-columns:minmax(0,1fr)}}

/* Footer: the extra pages live here instead of the menu */
body.home footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 26px}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{color:#cbd1da;font-weight:600}
.foot-links a:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .ai-aurora i,.need-ai,body.home .hero .hl{animation:none}
}

/* The 15% offer as a small message card in the corner (not a full-screen popup); opposite side of the chat */
.offer-card{position:fixed;left:22px;bottom:22px;z-index:55;width:min(360px,calc(100vw - 24px));padding:18px 18px 16px;border-radius:20px;
  border:1px solid rgba(232,255,47,.45);background:linear-gradient(160deg,rgba(26,33,12,.97),rgba(11,14,19,.97));color:var(--text);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 30px rgba(232,255,47,.12);opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .offer-card{left:auto;right:22px}
.offer-card.show{opacity:1;transform:none}
.offer-close{position:absolute;top:8px;inset-inline-end:10px;padding:4px;background:none;border:0;color:#9ca6b5;font-size:22px;line-height:1;cursor:pointer}
.offer-close:hover{color:#fff}
.offer-top{display:flex;align-items:center;gap:12px;padding-inline-end:24px}
.offer-badge{flex-shrink:0;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#e8ff2f;color:#0a0d0b;
  font-weight:900;font-size:18px;box-shadow:0 0 22px rgba(232,255,47,.35)}
.offer-title{display:block;margin-top:2px;font-size:17px;line-height:1.3}
.offer-text{margin:10px 0 12px;color:var(--muted);font-size:14.5px;line-height:1.5}
body.home .offer-card .btn{width:100%;min-height:46px;padding:10px 18px}
.offer-card.open .offer-claim{display:none}
.offer-card form{display:grid;gap:8px;margin-top:4px}
.offer-card form input{width:100%;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid #2a3240;background:#0b0f15;color:#f4f6f8;font:inherit;font-size:14.5px}
.offer-card form input:focus{outline:none;border-color:#e8ff2f}
.offer-card form .phone{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px}
.offer-card form .phone .popup-email{grid-column:1 / -1}
@media(max-width:800px){.offer-card,html[dir="rtl"] .offer-card{left:12px;right:12px;bottom:84px;width:auto}}
@media(prefers-reduced-motion:reduce){.offer-card{transition:none}}

/* Why i-System: true numbers only, big and simple (they count up when they come into view) */
.num-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.num{display:flex;flex-direction:column;gap:8px;padding:28px 24px;border:1px solid var(--line);border-radius:20px;background:rgba(13,17,24,.9)}
.num strong{font-family:'Inter Tight','Inter','IBM Plex Sans Arabic',Arial,sans-serif;font-size:clamp(44px,5vw,64px);line-height:1;font-weight:800;color:var(--accent);
  text-shadow:0 0 30px rgba(232,255,47,.25);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
.num span{color:#d3d9e2;font-size:16.5px;line-height:1.5}
@media(max-width:1000px){.num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.num{padding:20px 18px}.num span{font-size:15px}}

/* "Try the AI" in the menu (laptops) */
body.home .nav .nav-try{padding:10px 16px;border-radius:12px;background:rgba(232,255,47,.1);border:1px solid rgba(232,255,47,.55);color:#e8ff2f!important;font-weight:700}
body.home .nav .nav-try:hover{background:#e8ff2f;color:#0a0d0b!important}

/* Phones: "Try the AI" and "Contact" always one tap away at the bottom of the screen */
.quick-bar{display:none}
@media(max-width:800px){
  .quick-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1.25fr 1fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(7,9,13,.92);border-top:1px solid rgba(232,255,47,.18);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .quick-bar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-weight:800;font-size:15px;text-align:center}
  .quick-bar .qb-try{background:#e8ff2f;color:#0a0d0b}
  .quick-bar .qb-contact{border:1px solid rgba(255,255,255,.2);color:#f4f6f8;background:rgba(255,255,255,.05)}
  body.home{padding-bottom:78px}
  body.home .isc-floating{bottom:84px}
  body.home .offer-card,html[dir="rtl"] body.home .offer-card{bottom:150px}
  body.home .nav .nav-try{display:none!important}
}

/* The 3D scroll story (scroll-3d.js): the glowing object behind the content and the big word of each step */
.scroll-3d{position:fixed;inset:0;z-index:1;pointer-events:none}
html.has-3d .ai-bg{display:none}
html.has-3d body.home .hero-bg,html.has-3d body.home .hero-card{display:none}
.stage-words{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}
html:not(.has-3d) .stage-words{display:none}
.stage-words span{grid-area:1 / 1;font-family:'Inter Tight','Inter','IBM Plex Sans Arabic',Arial,sans-serif;font-weight:800;font-size:clamp(72px,16vw,250px);line-height:1;
  letter-spacing:-.04em;white-space:nowrap;color:rgba(232,255,47,.035);-webkit-text-stroke:1.5px rgba(232,255,47,.38);
  opacity:0;transform:translateY(70px) scale(.96);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.stage-words span.on{opacity:1;transform:none}
html[dir="rtl"] .stage-words span{letter-spacing:0}
@media(max-width:800px){.stage-words span{font-size:clamp(64px,24vw,140px);-webkit-text-stroke-width:1.2px}}
/* Laptops: boxes become frosted glass, so the 3D object and its big word stay visible behind the content */
@media(min-width:1000px) and (hover:hover){
  html.has-3d body.home .need-card,html.has-3d body.home .num,html.has-3d body.home .contact-box,html.has-3d body.home .founder-mini,
  html.has-3d body.home .pricing,html.has-3d body.home .sys-flow{background:rgba(11,14,20,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html.has-3d body.home .need-ai{background:linear-gradient(rgba(11,14,20,.62),rgba(11,14,20,.62)) padding-box,
    linear-gradient(120deg,rgba(232,255,47,.12),#e8ff2f,rgba(89,216,255,.75),rgba(232,255,47,.12)) border-box;background-size:auto,300% 300%}
}

/* The card's form stays closed until the visitor taps Claim (older form styles must not open it) */
.offer-card [hidden]{display:none!important}

/* The 15% card stays small on every screen: never more than a corner, and its form scrolls inside it */
.offer-card{max-height:min(78vh,620px);overflow:auto;overscroll-behavior:contain}
.founder-mini .founder-role{margin:0;color:var(--accent);font-weight:700}
@media(max-width:800px){
  .offer-card,html[dir="rtl"] .offer-card,body.home .offer-card,html[dir="rtl"] body.home .offer-card{left:12px;right:auto;width:min(300px,calc(100vw - 88px));
    bottom:84px;max-height:58vh;padding:14px 14px 12px;border-radius:18px}
  html[dir="rtl"] .offer-card,html[dir="rtl"] body.home .offer-card{left:auto;right:12px}
  .offer-badge{width:44px;height:44px;font-size:15px;border-radius:13px}
  .offer-title{font-size:15px}
  .offer-text{font-size:13.5px;margin:8px 0 10px}
}

/* Footer: our Instagram and TikTok */
.foot-social{display:flex;gap:10px}
.foot-social a{padding:8px 16px;border-radius:999px;border:1px solid rgba(232,255,47,.4);color:#e8ff2f;font-weight:700;font-size:13.5px}
.foot-social a:hover{background:#e8ff2f;color:#0a0d0b}

/* ===== Global-brand finish: display typography, a short brand opening, the moving line of what we build,
   our product in 3D, and light that follows the mouse (premium.js). ===== */

/* Typography: big, tight display headings (Inter Tight), calm text (Inter), IBM Plex Sans Arabic for Arabic */
body.home .hero h1{font-weight:700;letter-spacing:-.045em;word-spacing:.06em;line-height:.98;font-size:clamp(46px,6.3vw,96px)}
@media(max-width:800px){body.home .hero h1{letter-spacing:-.035em;word-spacing:.08em;line-height:1.02}}
body.home h2{font-weight:700;letter-spacing:-.035em;line-height:1.04}
body.home h3{font-weight:700;letter-spacing:-.015em}
body.home h1,body.home h2{text-wrap:balance}
body.home p{text-wrap:pretty}
body.home .section-kicker,body.home .eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.22em}
body.home .section-kicker:before,body.home .eyebrow:before{content:'';width:28px;height:1px;flex-shrink:0;background:currentColor;opacity:.75}
body.home .offer-card .section-kicker:before{display:none}
html[dir="rtl"] body.home .hero h1,html[dir="rtl"] body.home h2,html[dir="rtl"] body.home h3{letter-spacing:0;line-height:1.3}
html[dir="rtl"] body.home .section-kicker,html[dir="rtl"] body.home .eyebrow{letter-spacing:0}
html[dir="rtl"] body.home .hero h1{font-size:clamp(40px,5.2vw,80px);word-spacing:0;line-height:1.22}

/* The hero arrives like a film title: each line rises out of a soft blur, one after another */
@keyframes riseIn{from{opacity:0;transform:translateY(34px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
html{--intro:0s}
html:not(.intro-seen){--intro:1.05s}
body.home .hero-copy > *{animation:riseIn 1s cubic-bezier(.2,.7,.2,1) both}
body.home .hero-copy > :nth-child(1){animation-delay:calc(var(--intro) + .05s)}
body.home .hero-copy > :nth-child(2){animation-delay:calc(var(--intro) + .16s)}
body.home .hero-copy > :nth-child(3){animation-delay:calc(var(--intro) + .3s)}
body.home .hero-copy > :nth-child(4){animation-delay:calc(var(--intro) + .42s)}
body.home .hero-copy > :nth-child(5){animation-delay:calc(var(--intro) + .54s)}

/* Brand opening: "isystem" rises, a yellow line draws, then the curtain lifts (about 1.8 s, once per visit) */
.brand-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:18px;background:#07090d;
  pointer-events:none;animation:biLift .8s cubic-bezier(.76,0,.24,1) 1.05s forwards}
html.intro-seen .brand-intro{display:none}
.bi-logo{font-family:'Inter Tight','Inter',Arial,sans-serif;font-weight:800;font-size:clamp(46px,8vw,92px);letter-spacing:-.05em;line-height:1.05;
  overflow:hidden;padding:0 .06em .06em;direction:ltr}
.bi-logo span{display:inline-block;animation:biWord .75s cubic-bezier(.2,.7,.2,1) both}
.bi-logo .brand-i{color:var(--accent);text-shadow:0 0 30px rgba(232,255,47,.45)}
.bi-logo .bi-word{color:#fff;animation-delay:.1s}
.bi-line{display:block;width:120px;height:2px;background:var(--accent);box-shadow:0 0 18px rgba(232,255,47,.7);transform:scaleX(0);
  animation:biLine .7s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes biWord{from{transform:translateY(110%)}to{transform:none}}
@keyframes biLine{to{transform:scaleX(1)}}
@keyframes biLift{to{transform:translateY(-100%);visibility:hidden}}

/* Reading progress: a thin yellow line along the top of the screen */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:linear-gradient(90deg,#e8ff2f,#59d8ff);transform-origin:0 50%;
  transform:scaleX(var(--progress,0));box-shadow:0 0 12px rgba(232,255,47,.55)}
html[dir="rtl"] .scroll-progress i{transform-origin:100% 50%;background:linear-gradient(270deg,#e8ff2f,#59d8ff)}

/* What we build, always moving: two rows in opposite directions (pauses under the mouse) */
.ticker{position:relative;z-index:1;padding:26px 0;overflow:hidden;direction:ltr;border-block:1px solid rgba(255,255,255,.07);
  background:rgba(7,9,13,.45);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tk-row{display:flex;overflow:hidden}
.tk-row + .tk-row{margin-top:12px}
.tk-track{display:flex;flex-shrink:0;align-items:center;gap:34px;padding-right:34px;white-space:nowrap;will-change:transform;
  animation:tickerMove 90s linear infinite}
.tk-row.rev .tk-track{animation-direction:reverse;animation-duration:75s}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-track span{font-family:'Inter Tight','Inter','IBM Plex Sans Arabic',Arial,sans-serif;font-weight:700;font-size:clamp(24px,3.1vw,46px);
  letter-spacing:-.03em;line-height:1.15;color:#f4f6f8;unicode-bidi:isolate}
.tk-track b{color:var(--accent);font-size:clamp(14px,1.4vw,20px);text-shadow:0 0 14px rgba(232,255,47,.6)}
.tk-row.rev .tk-track span{font-size:clamp(18px,2.1vw,30px);font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4)}
.tk-row.rev .tk-track b{color:#59d8ff;font-size:9px;text-shadow:0 0 10px rgba(89,216,255,.8)}
@keyframes tickerMove{to{transform:translateX(-50%)}}
@media(max-width:800px){.ticker{padding:18px 0}.tk-track{gap:22px;padding-right:22px}}

/* Our product in 3D: a laptop with the dashboard and phones with the AI. They straighten up and slide into
   place while the stage scrolls into view (--sp, 0..1), the laptop screen scrolls (--ss) and everything leans
   gently toward the mouse (--mx/--my). Without JavaScript they simply stand straight. */
.stage{--sp:1;--ss:0;--mx:0;--my:0;position:relative;max-width:1180px;height:clamp(400px,46vw,640px);margin:4px auto 14px;perspective:1800px;perspective-origin:50% 25%}
.stage-glow{position:absolute;left:8%;right:8%;top:8%;bottom:0;pointer-events:none;opacity:calc(.3 + var(--sp) * .7);
  background:radial-gradient(48% 52% at 50% 62%,rgba(232,255,47,.22),transparent 70%),radial-gradient(34% 40% at 24% 40%,rgba(89,216,255,.16),transparent 70%),
  radial-gradient(34% 40% at 78% 44%,rgba(150,120,255,.14),transparent 70%)}
.stage-glow:after{content:'';position:absolute;left:12%;right:12%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.dev{position:absolute;margin:0;will-change:transform}
.laptop{left:50%;bottom:7%;z-index:2;width:min(64%,770px);translate:-50% 0;transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--sp)) * 40deg + var(--my) * -3deg)) rotateY(calc(var(--mx) * 6deg)) translateY(calc((1 - var(--sp)) * 70px)) scale(calc(.86 + var(--sp) * .14))}
.lid{position:relative;aspect-ratio:16/10;padding:1.5%;border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#20262f,#0b0d12);
  border:1px solid #2f3642;box-shadow:0 50px 100px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.lid:before{content:'';position:absolute;top:.6%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2c333d}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;background:#0b0e13}
.screen img{display:block;width:100%;height:auto;transform:translateY(calc(var(--ss) * -40%))}
.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.12),rgba(255,255,255,0) 38%)}
.base{position:relative;height:clamp(10px,1.3vw,18px);margin:0 -7%;border-radius:2px 2px 16px 16px;
  background:linear-gradient(180deg,#454c58,#1a1e25 55%,#0c0e12);box-shadow:0 30px 50px rgba(0,0,0,.55)}
.base:before{content:'';position:absolute;top:0;left:50%;width:16%;height:42%;margin-left:-8%;border-radius:0 0 8px 8px;background:#11141a}
.dev-phone{bottom:0;z-index:3;width:clamp(120px,17%,205px)}
.dev-phone img{display:block;width:100%;height:auto;border-radius:12%/7.5%;box-shadow:0 34px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07)}
.dev-phone.left{left:8%;animation:devFloatA 7s ease-in-out infinite;
  transform:translateX(calc((1 - var(--sp)) * -150px)) translateY(calc((1 - var(--sp)) * 90px)) rotateY(calc(14deg + (1 - var(--sp)) * 22deg + var(--mx) * 7deg)) rotateZ(-3deg)}
.dev-phone.right{right:8%;animation:devFloatB 8s ease-in-out infinite;
  transform:translateX(calc((1 - var(--sp)) * 150px)) translateY(calc((1 - var(--sp)) * 90px)) rotateY(calc(-14deg - (1 - var(--sp)) * 22deg + var(--mx) * 7deg)) rotateZ(3deg)}
.dev-phone.far{left:0;bottom:20%;z-index:1;width:clamp(100px,13%,158px);opacity:calc(var(--sp) * .85);filter:brightness(.72) saturate(.9);
  transform:translateX(calc((1 - var(--sp)) * -80px)) rotateY(calc(26deg + var(--mx) * 5deg)) rotateZ(-7deg) scale(.94)}
@keyframes devFloatA{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes devFloatB{0%,100%{translate:0 -10px}50%{translate:0 6px}}
.chip{position:absolute;top:-16px;left:50%;translate:-50% 0;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:rgba(10,13,18,.8);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#f4f6f8;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.chip:before{content:'';width:7px;height:7px;border-radius:50%;background:#2bd96b;box-shadow:0 0 10px #2bd96b;animation:aiBlink 2s ease-in-out infinite}
.laptop .chip{top:-18px;border-color:rgba(232,255,47,.45)}
.laptop .chip:before{background:#e8ff2f;box-shadow:0 0 10px #e8ff2f}
.stage-note{margin:0 0 42px;text-align:center;color:var(--muted);font-size:15.5px}
@media(max-width:800px){
  .stage{height:auto;aspect-ratio:1/1.05;max-height:560px;margin:0 -2vw 8px;perspective:1200px}
  .laptop{width:90%;bottom:34%}
  .dev-phone{width:31%}
  .dev-phone.left{left:1%}
  .dev-phone.right{right:1%}
  .dev-phone.far{display:none}
  .chip{font-size:11px;padding:5px 9px;top:-12px}
  .stage-note{font-size:14px;margin-bottom:30px}
}

/* Pictures open up as their card arrives, and section titles come into focus */
html.reveal-on body.home .need-card[data-reveal] .need-shot img{transform:scale(1.16);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
html.reveal-on body.home .need-card[data-reveal].in .need-shot img{transform:none}
html.reveal-on body.home .need-card[data-reveal].in:hover .need-shot img{transform:scale(1.05);transition-duration:.7s}
@media(hover:hover) and (min-width:1000px){
  html.reveal-on body.home .section-head[data-reveal] h2{filter:blur(10px);opacity:.2;transition:filter 1s ease .1s,opacity 1s ease .1s}
  html.reveal-on body.home .section-head[data-reveal].in h2{filter:none;opacity:1}
}

/* Light that follows the mouse over the cards, cards that lean toward it, main buttons pulled toward it (premium.js) */
.spot{position:relative}
.spot:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(360px circle at var(--lx,50%) var(--ly,50%),rgba(232,255,47,.11),transparent 55%)}
.spot:hover:after{opacity:1}
body.home .need-grid{perspective:1400px}
body.home .need-card{transition:border-color .25s ease,box-shadow .25s ease,rotate .35s ease}
html.reveal-on body.home .need-card[data-reveal]{transition:opacity .6s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),
  border-color .25s ease,box-shadow .25s ease,rotate .35s ease}
body.home main .btn{transition:background-color .2s ease,border-color .2s ease,box-shadow .25s ease,color .2s ease,translate .3s cubic-bezier(.2,.7,.2,1)}

@media(prefers-reduced-motion:reduce){
  .brand-intro{display:none}
  body.home .hero-copy > *,.tk-track,.dev-phone.left,.dev-phone.right,.chip:before{animation:none}
  .stage{--sp:1;--ss:0}
}
/* +100 projects: first in "Why i-System" and in the hero's trust line (five numbers in one row on laptops;
   on tablets and phones the projects card takes the full width above the other four) */
.num-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.num-feature{border-color:rgba(232,255,47,.45);background:linear-gradient(160deg,rgba(232,255,47,.10),rgba(13,17,24,.9) 60%)}
.num-feature strong{background:linear-gradient(100deg,#e8ff2f 20%,#fbffd2 50%,#e8ff2f 80%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none;animation:hlShine 7s linear infinite}
.num-feature strong span{color:inherit}
body.home .trust .trust-count{color:var(--accent);font-weight:700}
@media(max-width:1200px){.num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.num-feature{grid-column:1 / -1}}
@media(min-width:1001px) and (max-width:1200px){.num-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.num-feature strong{animation:none}}
/* "Try the AI" stands out everywhere: a light runs around its border, a play icon pulses, and a small line says
   it is free and quick (hero, the AI section); the menu and the phone bar get a solid button with the AI sparkle. */
@property --try-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes tryBorder{to{--try-a:360deg}}
body.home .btn.btn-try{gap:12px;padding:9px 22px 9px 9px;color:#f4f6f8;border:1.5px solid transparent;
  background:linear-gradient(rgba(12,16,22,.92),rgba(12,16,22,.92)) padding-box,
    conic-gradient(from var(--try-a),#e8ff2f,#59d8ff,#a98bff,rgba(232,255,47,.3),#e8ff2f) border-box;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(89,216,255,.16),0 0 34px rgba(232,255,47,.16);animation:tryBorder 4s linear infinite}
html[dir="rtl"] body.home .btn.btn-try{padding:9px 9px 9px 22px}
body.home .btn.btn-try:hover{box-shadow:0 0 40px rgba(89,216,255,.28),0 0 46px rgba(232,255,47,.3)}
.try-play{position:relative;flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8ff2f;
  box-shadow:0 0 18px rgba(232,255,47,.55)}
.try-play:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(232,255,47,.6);animation:iscPulseTry 2.2s ease-out infinite}
@keyframes iscPulseTry{0%{opacity:.85;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
.try-play svg{width:16px;height:16px;fill:#0a0d0b;margin-left:2px}
html[dir="rtl"] .try-play svg{margin:0 2px 0 0;transform:scaleX(-1)}
.try-lines{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2;text-align:start}
.try-lines small{font-size:12px;font-weight:600;color:#9fe7bf;letter-spacing:.01em}
.try-spark{width:16px;height:16px;flex-shrink:0;fill:currentColor;animation:iscTwinkleTry 3s ease-in-out infinite}
@keyframes iscTwinkleTry{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.12)}}
body.home .nav .nav-try{display:inline-flex;align-items:center;gap:8px;background:#e8ff2f;border:1px solid #e8ff2f;color:#0a0d0b!important;font-weight:800;
  box-shadow:0 0 0 0 rgba(232,255,47,.5);animation:tryGlow 2.6s ease-in-out infinite}
body.home .nav .nav-try:hover{background:#f2ff7a;color:#0a0d0b!important}
@keyframes tryGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,255,47,.45),0 6px 20px rgba(232,255,47,.18)}50%{box-shadow:0 0 0 7px rgba(232,255,47,0),0 6px 26px rgba(232,255,47,.32)}}
@media(max-width:800px){
  .quick-bar .qb-try{position:relative;overflow:hidden;gap:8px;box-shadow:0 0 24px rgba(232,255,47,.35)}
  .quick-bar .qb-try .try-spark{width:18px;height:18px}
  .quick-bar .qb-try:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:tryShine 3.2s ease-in-out infinite}
  body.home .btn.btn-try{width:100%;justify-content:flex-start}
}
@keyframes tryShine{0%,55%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){
  body.home .btn.btn-try,.try-play:after,.try-spark,body.home .nav .nav-try,.quick-bar .qb-try:after{animation:none}
}
/* The big words behind the 3D story, brighter and in colour: each step has its own colour (idea yellow, design
   blue, AI yellow-green, system violet, launch yellow to blue) with a slow shine across the letters. */
.stage-words span{color:transparent;-webkit-text-stroke:2px rgba(232,255,47,.9);
  background:linear-gradient(115deg,rgba(232,255,47,.34),rgba(251,255,210,.18) 45%,rgba(232,255,47,.34)) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;animation:stageShine 8s linear infinite}
.stage-words span[data-stage="1"]{-webkit-text-stroke-color:rgba(89,216,255,.9);
  background-image:linear-gradient(115deg,rgba(89,216,255,.34),rgba(210,245,255,.16) 45%,rgba(89,216,255,.34))}
.stage-words span[data-stage="2"]{-webkit-text-stroke-color:rgba(200,255,70,.95);
  background-image:linear-gradient(115deg,rgba(232,255,47,.42),rgba(89,216,255,.26) 50%,rgba(232,255,47,.42))}
.stage-words span[data-stage="3"]{-webkit-text-stroke-color:rgba(169,139,255,.95);
  background-image:linear-gradient(115deg,rgba(169,139,255,.36),rgba(225,215,255,.16) 45%,rgba(169,139,255,.36))}
.stage-words span[data-stage="4"]{-webkit-text-stroke-color:rgba(232,255,47,.9);
  background-image:linear-gradient(115deg,rgba(232,255,47,.38),rgba(89,216,255,.32) 50%,rgba(232,255,47,.38))}
@keyframes stageShine{to{background-position:-200% 0}}
@media(min-width:1000px) and (hover:hover){
  .stage-words span{filter:drop-shadow(0 0 26px rgba(232,255,47,.28))}
  .stage-words span[data-stage="1"]{filter:drop-shadow(0 0 26px rgba(89,216,255,.32))}
  .stage-words span[data-stage="3"]{filter:drop-shadow(0 0 26px rgba(169,139,255,.32))}
}
@media(max-width:800px){.stage-words span{-webkit-text-stroke-width:1.6px}}
@media(prefers-reduced-motion:reduce){.stage-words span{animation:none}}
/* The counting number keeps the size of its card's big number (the card's caption style must not shrink it) */
.num strong span{font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}
/* Phones: the big word sits up with the 3D object (above the text) and a little softer, so the text stays easy to read */
@media(max-width:800px){
  .stage-words{place-items:start center;padding-top:17vh}
  .stage-words span.on{opacity:.72}
}
/* Owner's feedback (2026-10-17): the big background words were too strong and clashed with the content.
   They stay coloured but calm and truly in the background: thin coloured outline, a faint tint, no glow. */
.stage-words span{-webkit-text-stroke-width:1.5px;filter:none!important;
  background-image:linear-gradient(115deg,rgba(232,255,47,.13),rgba(251,255,210,.05) 45%,rgba(232,255,47,.13))}
.stage-words span[data-stage="0"],.stage-words span[data-stage="4"]{-webkit-text-stroke-color:rgba(232,255,47,.75)}
.stage-words span[data-stage="1"]{-webkit-text-stroke-color:rgba(89,216,255,.75);
  background-image:linear-gradient(115deg,rgba(89,216,255,.13),rgba(210,245,255,.05) 45%,rgba(89,216,255,.13))}
.stage-words span[data-stage="2"]{-webkit-text-stroke-color:rgba(232,255,47,.75);
  background-image:linear-gradient(115deg,rgba(232,255,47,.14),rgba(89,216,255,.07) 50%,rgba(232,255,47,.14))}
.stage-words span[data-stage="3"]{-webkit-text-stroke-color:rgba(169,139,255,.8);
  background-image:linear-gradient(115deg,rgba(169,139,255,.14),rgba(225,215,255,.05) 45%,rgba(169,139,255,.14))}
.stage-words span[data-stage="4"]{background-image:linear-gradient(115deg,rgba(232,255,47,.13),rgba(89,216,255,.1) 50%,rgba(232,255,47,.13))}
.stage-words span.on{opacity:.6}
@media(max-width:800px){.stage-words span{-webkit-text-stroke-width:1.2px}.stage-words span.on{opacity:.5}}
/* The moving line sits on frosted glass, so the background word never mixes with its words */
.ticker{background:rgba(7,9,13,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* "Try our AI demo": a red frame with a red glow and a red play button, to catch the eye like the AI button */
body.home .btn.btn-try{background:linear-gradient(rgba(16,10,12,.94),rgba(16,10,12,.94)) padding-box,
    conic-gradient(from var(--try-a),#ff2d3d,#ff7a2f,#ff2d6f,rgba(255,45,61,.35),#ff2d3d) border-box;
  box-shadow:0 0 30px rgba(255,45,61,.3),0 10px 30px rgba(0,0,0,.45)}
body.home .btn.btn-try:hover{box-shadow:0 0 46px rgba(255,45,61,.5),0 12px 34px rgba(0,0,0,.5)}
.try-play{background:radial-gradient(circle at 34% 28%,#ffb3b3 0%,#ff4b4b 32%,#e3112b 66%,#9e0016 100%);box-shadow:0 0 20px rgba(255,45,61,.65)}
.try-play:after{border-color:rgba(255,60,70,.7)}
.try-play svg{fill:#fff}/* The second moving line: plain soft words (no outlines, so nothing looks like a stray background letter) */
.tk-row.rev .tk-track span{color:rgba(214,221,230,.55);-webkit-text-stroke:0;font-weight:600}
/* ===== "Try the AI" transition (try-transition.js): elegant, never alarming. A dark circle full of soft light grows
   from the tapped button, the page steps back and blurs, a glowing AI orb with "isystem AI" appears, then the demo opens. ===== */
html.tt-leave body.home main,html.tt-leave body.home .nav,html.tt-leave body.home footer,html.tt-leave body.home .quick-bar{
  transform:scale(.96);filter:blur(6px);opacity:.35;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s ease,opacity .7s ease}
html.tt-leave .isc-floating,html.tt-leave .offer-card{opacity:0;transition:opacity .3s ease}
.tt-portal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,#16090c 0%,#0a0b10 45%,#05070a 100%);
  clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .85s cubic-bezier(.65,0,.25,1)}
.tt-portal.open{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}
.tt-portal:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 30% at 50% 46%,rgba(255,45,61,.22),transparent 70%),radial-gradient(30% 26% at 38% 56%,rgba(232,255,47,.10),transparent 70%),
    radial-gradient(30% 26% at 64% 38%,rgba(89,216,255,.10),transparent 70%)}
.tt-box{position:relative;display:grid;justify-items:center;gap:14px;padding:0 20px;text-align:center;opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .5s ease .4s,transform .7s cubic-bezier(.2,.7,.2,1) .4s}
.tt-portal.open .tt-box{opacity:1;transform:none}
.tt-orb{position:relative;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#ffb3b3 0%,#ff4b4b 32%,#e3112b 64%,#9e0016 100%);
  box-shadow:0 0 0 6px rgba(255,45,61,.12),0 0 60px rgba(255,45,61,.6),inset 0 -8px 14px rgba(0,0,0,.25),inset 0 5px 10px rgba(255,255,255,.45);
  animation:ttBreath 1.6s ease-in-out infinite}
.tt-orb:before,.tt-orb:after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,70,80,.55);animation:ttRing 1.6s ease-out infinite}
.tt-orb:after{animation-delay:.8s}
.tt-orb svg{width:40px;height:40px;fill:#fff;animation:ttSpark 1.6s ease-in-out infinite}
.tt-logo{direction:ltr;font-family:'Inter Tight','Inter',Arial,sans-serif;font-weight:800;font-size:clamp(34px,6vw,58px);letter-spacing:-.04em;line-height:1;color:#fff}
.tt-logo span{color:#e8ff2f;text-shadow:0 0 24px rgba(232,255,47,.5)}
.tt-msg{color:#c9d0da;font-size:15.5px}
.tt-bar{width:min(240px,64vw);height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.tt-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff2d3d,#e8ff2f,#59d8ff);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.3,.7,.2,1) .45s}
html[dir="rtl"] .tt-bar i{transform-origin:100% 50%}
.tt-portal.open .tt-bar i{transform:scaleX(1)}
@keyframes ttBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ttRing{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.55)}}
@keyframes ttSpark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(12deg) scale(1.1)}}
/* Owner's feedback (2026-10-17): no outlines on the background words (an outline shows the joins inside a letter,
   e.g. the bar of the A crossing its legs). The words are now SOLID 3D letters: a filled face with a deep
   extruded side, tilted back a little, calm (low opacity) and always behind the content. */
.stage-words{perspective:1100px}
.stage-words span{-webkit-text-stroke:0!important;background:none!important;-webkit-background-clip:border-box;background-clip:border-box;
  animation:none;filter:none!important;color:#e8ff2f;text-shadow:1px 1px 0 #b0c41e,2px 2px 0 #a7ba1c,3px 3px 0 #9eb01a,4px 4px 0 #95a618,5px 5px 0 #8c9c17,6px 6px 0 #839215,7px 7px 0 #7a8813,8px 8px 0 #707e11,9px 9px 0 #67740f,10px 10px 0 #5e6a0d,11px 11px 0 #55600c,12px 12px 0 #4c560a,13px 13px 0 #434c08,14px 14px 0 #3a4206,16px 20px 26px rgba(0,0,0,.6);
  transform:rotateX(26deg) translateY(80px) scale(.94);transform-origin:50% 60%}
.stage-words span.on{opacity:.3;transform:rotateX(14deg)}
.stage-words span[data-stage="1"]{color:#59d8ff;text-shadow:1px 1px 0 #34a0c8,2px 2px 0 #3198be,3px 3px 0 #2e90b5,4px 4px 0 #2b88ab,5px 5px 0 #2880a1,6px 6px 0 #257898,7px 7px 0 #22708e,8px 8px 0 #206884,9px 9px 0 #1d607a,10px 10px 0 #1a5871,11px 11px 0 #175067,12px 12px 0 #14485d,13px 13px 0 #114054,14px 14px 0 #0e384a,16px 20px 26px rgba(0,0,0,.6)}
.stage-words span[data-stage="2"]{color:#c8ff3a;text-shadow:1px 1px 0 #8cbe28,2px 2px 0 #85b426,3px 3px 0 #7eab23,4px 4px 0 #76a121,5px 5px 0 #6f981f,6px 6px 0 #688e1c,7px 7px 0 #61851a,8px 8px 0 #597b18,9px 9px 0 #527216,10px 10px 0 #4b6813,11px 11px 0 #445f11,12px 12px 0 #3c550f,13px 13px 0 #354c0c,14px 14px 0 #2e420a,16px 20px 26px rgba(0,0,0,.6)}
.stage-words span[data-stage="3"]{color:#a98bff;text-shadow:1px 1px 0 #785cd2,2px 2px 0 #7257c9,3px 3px 0 #6c52c0,4px 4px 0 #664db6,5px 5px 0 #5f48ad,6px 6px 0 #5943a4,7px 7px 0 #533e9b,8px 8px 0 #4d3a91,9px 9px 0 #473588,10px 10px 0 #41307f,11px 11px 0 #3a2b76,12px 12px 0 #34266c,13px 13px 0 #2e2163,14px 14px 0 #281c5a,16px 20px 26px rgba(0,0,0,.6)}
@media(max-width:800px){.stage-words span.on{opacity:.26}}/* The 3D depth grows with the letter size (same look on phones and laptops) */
.stage-words span{text-shadow:0.006em 0.006em 0 #b0c41e,0.011em 0.011em 0 #a8bb1c,0.017em 0.017em 0 #a0b31b,0.022em 0.022em 0 #98aa19,0.028em 0.028em 0 #91a118,0.033em 0.033em 0 #899916,0.039em 0.039em 0 #819014,0.044em 0.044em 0 #798713,0.05em 0.05em 0 #717f11,0.055em 0.055em 0 #697610,0.061em 0.061em 0 #616d0e,0.066em 0.066em 0 #59650c,0.072em 0.072em 0 #525c0b,0.077em 0.077em 0 #4a5309,0.083em 0.083em 0 #424b08,0.088em 0.088em 0 #3a4206,.07em .09em .12em rgba(0,0,0,.6)}
.stage-words span[data-stage="1"]{text-shadow:0.006em 0.006em 0 #34a0c8,0.011em 0.011em 0 #3199c0,0.017em 0.017em 0 #2f92b7,0.022em 0.022em 0 #2c8baf,0.028em 0.028em 0 #2a84a6,0.033em 0.033em 0 #277d9e,0.039em 0.039em 0 #257696,0.044em 0.044em 0 #226f8d,0.05em 0.05em 0 #206985,0.055em 0.055em 0 #1d627c,0.061em 0.061em 0 #1b5b74,0.066em 0.066em 0 #18546c,0.072em 0.072em 0 #164d63,0.077em 0.077em 0 #13465b,0.083em 0.083em 0 #113f52,0.088em 0.088em 0 #0e384a,.07em .09em .12em rgba(0,0,0,.6)}
.stage-words span[data-stage="2"]{text-shadow:0.006em 0.006em 0 #8cbe28,0.011em 0.011em 0 #86b626,0.017em 0.017em 0 #7fad24,0.022em 0.022em 0 #79a522,0.028em 0.028em 0 #739d20,0.033em 0.033em 0 #6d951e,0.039em 0.039em 0 #668c1c,0.044em 0.044em 0 #60841a,0.05em 0.05em 0 #5a7c18,0.055em 0.055em 0 #547416,0.061em 0.061em 0 #4d6b14,0.066em 0.066em 0 #476312,0.072em 0.072em 0 #415b10,0.077em 0.077em 0 #3b530e,0.083em 0.083em 0 #344a0c,0.088em 0.088em 0 #2e420a,.07em .09em .12em rgba(0,0,0,.6)}
.stage-words span[data-stage="3"]{text-shadow:0.006em 0.006em 0 #785cd2,0.011em 0.011em 0 #7358ca,0.017em 0.017em 0 #6d53c2,0.022em 0.022em 0 #684fba,0.028em 0.028em 0 #634bb2,0.033em 0.033em 0 #5d47aa,0.039em 0.039em 0 #5842a2,0.044em 0.044em 0 #533e9a,0.05em 0.05em 0 #4d3a92,0.055em 0.055em 0 #48368a,0.061em 0.061em 0 #433182,0.066em 0.066em 0 #3d2d7a,0.072em 0.072em 0 #382972,0.077em 0.077em 0 #33256a,0.083em 0.083em 0 #2d2062,0.088em 0.088em 0 #281c5a,.07em .09em .12em rgba(0,0,0,.6)}
/* Loading screen: the isystem logo instead of the red orb (owner's choice) - the letters rise one by one, a light
   sweeps over them, and a small red "AI" tag sits beside the logo. The message is in the visitor's language. */
.tt-logo{position:relative;display:flex;align-items:flex-start;gap:0;direction:ltr;font-family:'Inter Tight','Inter',Arial,sans-serif;font-weight:800;
  font-size:clamp(56px,11vw,112px);letter-spacing:-.05em;line-height:1.02;color:#fff;padding:0 .06em .08em;overflow:hidden}
.tt-logo b{display:inline-block;font-weight:800;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i) * .05s);
  background:linear-gradient(100deg,#fff 30%,#ffe9a8 45%,#fff 60%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ttShine 1.6s ease-in-out .9s infinite}
.tt-logo b.tt-i{background-image:linear-gradient(100deg,#e8ff2f 30%,#fbffd2 45%,#e8ff2f 60%);filter:drop-shadow(0 0 22px rgba(232,255,47,.55))}
.tt-portal.open .tt-logo b{transform:none}
@keyframes ttShine{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.tt-ai{align-self:center;display:inline-flex;align-items:center;gap:5px;margin-inline-start:.22em;padding:.12em .42em;border-radius:.4em;
  font-size:.24em;letter-spacing:.04em;line-height:1.2;color:#fff;background:linear-gradient(135deg,#ff5260,#e3112b 60%,#b3001e);
  box-shadow:0 0 24px rgba(255,45,61,.55);opacity:0;transform:scale(.6);transition:opacity .4s ease .75s,transform .5s cubic-bezier(.2,1.4,.4,1) .75s}
.tt-ai svg{width:.95em;height:.95em;fill:#fff}
.tt-portal.open .tt-ai{opacity:1;transform:none}
.tt-orb{display:none}
@media(max-width:520px){.tt-ai{font-size:.3em}.tt-msg{font-size:14.5px}}
.tt-logo .tt-ai{color:#fff;text-shadow:none}
.tt-logo b.tt-i{filter:none}

/* Homepage price box: link to the AI Automation plans (prices from automation/catalog.py) */
.pricing-plans{margin:12px 0 0;font-weight:700}.pricing-plans a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}

/* Homepage: one big services card - AI Automation first (on sale), the next services as "coming soon" */
.svc-board{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:16px;border:1px solid var(--line);border-radius:26px;background:rgba(10,14,20,.86)}
.svc-main{min-height:100%}
.svc-main h3{font-size:30px!important;margin:10px 0 8px}
.svc-price{display:block;margin:6px 0 12px;font-weight:800;font-size:20px;color:var(--accent)}
.svc-soon{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border:1px dashed var(--line);border-radius:18px;background:rgba(13,17,24,.7)}
.svc-item h4{margin:0;font-size:18px}
.svc-item p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.svc-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.08);color:#b8c0cc}
.svc-pill.on{background:rgba(232,255,47,.15);color:var(--accent)}
@media (max-width:900px){.svc-board{grid-template-columns:1fr}.svc-soon{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-soon{grid-template-columns:1fr}.svc-board{padding:10px}}
.svc-main .svc-pill{align-self:flex-start;width:auto}
/* The bottom bar on phones (2026-10-28): WhatsApp in the second place, green */
.quick-bar .qb-wa{background:#25d366 !important;color:#08130c !important;border-color:#25d366 !important;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px}

/* While the 3D loads: never the old flat background first (founder, 2026-10-29) */
html.will-3d:not(.has-3d) body.home :is(.ai-bg,.ai-grid,.ai-aurora,.hero-bg,.hero-card){opacity:0!important;transition:none}

/* The partner button next to the first try button: yellow at night, blue by day (founder, 2026-10-29) */
.btn.btn-partner{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:#e8ff2f;color:#0a0d0b!important;border:1px solid #e8ff2f;
  text-decoration:none;font-weight:800;box-shadow:0 10px 30px rgba(232,255,47,.22);transition:transform .2s,box-shadow .2s}
html[dir="rtl"] .btn-partner{padding:10px 10px 10px 16px}
.btn-partner:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(232,255,47,.32)}
.btn-partner .bp-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0a0d0b;color:#e8ff2f;flex:0 0 34px}
.btn-partner .bp-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-partner .try-lines{display:flex;flex-direction:column;line-height:1.2;text-align:start}
.btn-partner .try-lines small{font-weight:600;font-size:12px;opacity:.75}
html[data-theme="light"] .btn.btn-partner:not(.primary){background:#1f5eff!important;border-color:#1f5eff;color:#fff!important;box-shadow:0 10px 30px rgba(31,94,255,.25)}
html[data-theme="light"] .btn.btn-partner .bp-ic{background:#fff;color:#1f5eff}
.trial-actions .btn-partner{margin-top:4px}
html .btn.btn-partner .try-lines :is(span,small){color:inherit!important;text-shadow:none!important}