/* AL TONY visual system for Malafak. Based on the supplied 2026 brand guide.
   No character/mascot elements; only product screenshots and official brand artwork. */
:root {
  --navy:#0B1E38; --navy-deep:#061324; --navy-mid:#103452;
  --teal:#0F8BA6; --teal-deep:#09697F; --cyan:#22D3EE;
  --silver:#A7B3C2; --pale:#EFF3F8; --white:#FFFFFF;
  --green:#0F8BA6; --green2:#19B6CE; --green-dark:#0A647B;
  --dark:#0B1E38; --yellow:#22D3EE; --cream:#EFF3F8;
  --paper:#FFFFFF; --ink:#0B1E38; --muted:#61738C;
  --line:#D8E3EF; --soft:#E5F5F8; --mint:#B6F1F8;
  --easing:cubic-bezier(.2,.75,.25,1);
}
html {scroll-padding-top:86px}
body {background:var(--pale);color:var(--navy);font-family:'Noto Kufi Arabic',sans-serif;line-height:1.9;letter-spacing:0}
html[lang="en"] body {font-family:'Inter',sans-serif;line-height:1.7}
h1,h2,h3,.brand-name b,.eco-card h3,.compare-head b,.footer-logo {font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;letter-spacing:-.025em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] .brand-name b,html[lang="en"] .compare-head b,html[lang="en"] .footer-logo {font-family:'Inter',sans-serif;letter-spacing:-.045em}
.kicker,.latin,.diagram-label,.model-num,.hero-index span:first-child,.price b,.save-line s,.gallery-count strong,.ui-label b,.hero-ready small,.spec-row strong,.nav-button,.brand-name small {font-family:'Inter',sans-serif}
.section {padding:106px 0}
.section-heading h2 {letter-spacing:-.025em;font-weight:850;line-height:1.53;font-size:clamp(34px,3.7vw,55px)}
.section-heading h2 em,.eco-intro h2 span {color:var(--teal)}
.section-heading p,.eco-intro-side p {color:#60728a}
.kicker {color:var(--teal);font-size:12px;letter-spacing:.13em}
.btn {font-family:inherit;font-weight:800;border-radius:13px;padding:13px 24px;min-height:54px;box-shadow:none;transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease}
.btn:hover {transform:translateY(-3px)}
.btn-yellow {background:var(--cyan);color:var(--navy);box-shadow:0 10px 26px #0cbbdf30}
.btn-yellow:hover {background:#81EBF6;box-shadow:0 15px 38px #11c9eb45}
.btn-outline-white {border-color:#8CCDDD60;color:#F5FDFF;background:#FFFFFF0C}
.btn-outline-white:hover {background:#FFFFFF1A}
.btn-dark,.btn-ink {background:var(--navy);color:white}
.btn-dark:hover {background:#15466A}
.btn-white-outline {color:var(--navy);border:1px solid #829FB87A;background:#FFFFFFA8}
.inline-link {color:var(--teal-deep);text-decoration-color:#6bc3d4}
.marker-title {background:linear-gradient(transparent 71%,#87E7F665 71%)}
::selection {background:#8CE9F5;color:var(--navy)}
*:focus-visible {outline:3px solid var(--cyan)!important;outline-offset:4px}
/* Branded header */
.announcement {background:#061426;border-bottom:1px solid #8ABAC81A;color:#C6E8F0}
.announcement a {color:#7FE8F5}
.ann-pulse {background:#35D9EE;box-shadow:0 0 0 6px #22D3EE1C,0 0 20px #22D3EE90}
.header {background:#0B1E38F7;color:white;border-bottom:1px solid #9FD8F622;backdrop-filter:blur(16px)}
.header.scrolled {box-shadow:0 13px 35px #0613243C}
.nav {height:83px}
.brand-mark {background:#0C2847;border-color:#6AD4E23C;box-shadow:0 0 22px #22D3EE11}
.brand-name b {font-size:22px}
.brand-name small {font-size:9px;color:#7EDDE9;letter-spacing:.11em}
.brand-partner {display:none}
.nav-links a:hover,.research-nav {color:#72E0F1}
.lang-switch {background:#FFFFFF0B;border-color:#86B2CA3D;color:#D7F4FF;border-radius:10px;font-family:'Inter',sans-serif}
.nav-button {background:var(--cyan);color:var(--navy);border-radius:10px;box-shadow:0 0 0 1px #A5F4FF5A inset}
.nav-button:hover {background:#82EBF9}
.menu-button {border-color:#83D7E361}
/* Hero: deep navy, clean editorial UI. No mascots. */
.hero {background:var(--navy-deep);color:white}
.hero:before {background:radial-gradient(circle at 26% 24%,#0F8BA65E,transparent 43%),radial-gradient(circle at 72% 72%,#1A76A440,transparent 43%),linear-gradient(127deg,#061324,#0B1E38 47%,#0C3552 100%);z-index:-2}
.hero-grain {opacity:.22;background-image:radial-gradient(#C5E7F5 1px,transparent 1px);background-size:31px 31px;mask-image:linear-gradient(90deg,transparent 5%,#000 72%)}
.hero-slope {width:800px;height:800px;left:-140px;top:-590px;border-color:#72E0F31F;border-radius:50%;transform:rotate(15deg)}
.hero-inner {min-height:680px;padding:70px 0 80px;gap:38px;grid-template-columns:1.02fr .98fr}
.hero-copy {z-index:5}
.hero-eyebrow {background:#0C3B57A6;border:1px solid #6ACADD4D;color:#B9EDF5;letter-spacing:0;min-height:38px;font-weight:700}
.eyebrow-dot {background:var(--cyan);box-shadow:0 0 0 5px #22D3EE26}
.hero h1 {font-size:clamp(47px,4.6vw,69px);font-weight:900;line-height:1.5;letter-spacing:-.035em;margin-bottom:13px}
.hero h1 .text-yellow {color:#4DDCF0;text-shadow:0 0 32px #22D3EE30}
.hero-lead {color:#D1DFEA;line-height:2.16;font-size:15px;margin:16px 0 25px;font-weight:500;max-width:595px}
.hero-footnotes {color:#B1D4E5;margin-top:25px;gap:14px;font-weight:600;font-size:11px}
.tick {color:var(--cyan)}
.hero-art {height:560px;isolation:isolate}
.hero-art:before {content:'';position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,#13B1D248 0%,#1E8AA125 33%,transparent 69%);filter:blur(14px);z-index:-1}
.hero-phone {background:#071424;border:7px solid #0D273F;box-shadow:0 28px 50px #020B1AC9,0 0 0 1px #64D3ED6B;transition:transform .65s var(--easing)}
.phone-top span {background:#66849A}
.orbit {border-color:#54C7E02A}
.orbit-one {box-shadow:0 0 0 50px #44ACD006,0 0 0 105px #44ACD006}
.orbit-two {border-color:#77D3E23A;opacity:.45}
.brand-watermark {position:absolute;top:12%;left:24%;height:340px;width:340px;z-index:0;opacity:.12;transform:rotate(-11deg);filter:drop-shadow(0 0 24px #33D7EF)}
.brand-watermark img {width:100%;height:100%;object-fit:contain}
.ui-label {background:#0B2940E9;color:#D8F6FA;border:1px solid #67CBDE78;box-shadow:0 9px 35px #020D1E33;border-radius:10px;padding:9px 13px}
.ui-label b {color:#73DDEB}
.signal-circle {background:#39D3E6;box-shadow:0 0 0 4px #22D3EE26}
.floating-chip {background:#ECFBFE;color:#10415B;border-color:#97D9E6;box-shadow:0 10px 28px #030E2399;font-weight:700}
.hero-ready {background:#F8FDFF;color:#0D2945;border-radius:13px;box-shadow:0 20px 42px #041322B0;left:3%;bottom:50px}
.hero-ready small {color:#617F98}
.ready-check {color:#05788C;background:#D8F7FB;border-color:#7ECFDB}
.hero-signal-card {position:absolute;bottom:8px;right:1.5%;width:182px;z-index:4;padding:13px 15px 12px;border-radius:14px;background:linear-gradient(145deg,#133854EE,#0C253EFA);border:1px solid #74D8E84D;box-shadow:0 16px 40px #02101C75;backdrop-filter:blur(10px);animation:signalFloat 6s ease-in-out infinite}
.signal-heading {display:flex;gap:8px;align-items:center;color:#D9F2FA;font-size:11px;font-weight:700}
.signal-led {height:8px;width:8px;border-radius:50%;background:#35E4E8;box-shadow:0 0 0 4px #35E4E81E,0 0 15px #4ADAE7;flex-shrink:0}
.signal-bars {display:flex;justify-content:space-between;align-items:center;gap:5px;height:38px;margin:8px 0 1px;direction:ltr}
.signal-bars i {height:var(--h);width:9px;background:linear-gradient(0deg,#117B98,#54E5F1);border-radius:5px;animation:barsPulse 2.8s ease-in-out infinite}
.signal-bars i:nth-child(2n) {animation-delay:-1.3s}.signal-bars i:nth-child(3n){animation-delay:-.7s}
.signal-foot {display:block;color:#7DB3C8;font:600 8px 'Inter',sans-serif;letter-spacing:.04em;direction:ltr;white-space:nowrap}
@keyframes signalFloat {50% {transform:translateY(-8px)}}
@keyframes barsPulse {50% {transform:scaleY(.60);opacity:.65}}
.hero-index {background:#061426;border-top:1px solid #82CDE61C;color:#B4CFE1}
.hero-index span:first-child {color:var(--cyan)}
.marquee {background:#0B3652;border-block:1px solid #2FA7C16B}
.marquee-track>span {color:#D0F7FA;font-family:'Inter',sans-serif;font-size:16px;font-weight:750;letter-spacing:.10em}
.marquee b {color:var(--cyan)}
/* Balanced light sections */
.problem-section,.pricing-section,.faq-section {background:var(--pale)}
.how-section,.gallery-section,.ecosystem-section {background:#FFF}
.features-section,.video-section {background:#F6F9FC}
.compare-card {background:#FFF;border-color:#D8E3EE;border-radius:18px;box-shadow:0 18px 42px #142D4410}
.compare-before {background:#F7F9FC}
.compare-after {background:#E9F7FA;border-color:#BAE6EC}
.compare-icon.good {background:#C5F2F6;color:#0B819B}
.compare-state.green {color:#0C778F;background:#C7EEF4}
.compare-head b {font-family:'Noto Kufi Arabic',sans-serif;font-size:19px}
html[lang="en"] .compare-head b {font-family:'Inter',sans-serif}
.compare-card>p,.step p,.video-copy p,.feature-card p,.eco-card>p,.faq-item p {color:#5D7289}
.fragment {border-color:#DFE8F3;color:#24445D}
.flow-pills>div {color:#20566B}
.flow-icon {border-color:#B2E4EB;background:white;color:#0C8AA3}
.flow-arrow {color:#0F8BA6}
.flow-success {background:#D0F1F4;color:#12566E}
.flow-success span:first-child {color:#0A9DB6}
.step-image {background:#E6F6FA;border-color:#DBEAF3}
.step:nth-child(2) .step-image {background:#EEF2FC}
.step:nth-child(3) .step-image {background:#E0F2F5}
.step:nth-child(4) .step-image {background:#E4EBF8}
.step-image img {border-color:#1C354F}
.step-number {background:var(--navy);color:#BDEEF5;font-family:'Inter',sans-serif}
.feature-card {border:1px solid #DDE7F1;border-radius:17px;box-shadow:0 12px 35px #112E4510}
.feature-big {background:linear-gradient(145deg,#0B2948,#0E7893);color:white;border-color:#267E9B}
.feature-card h3 {line-height:1.55}
.feature-tag {font-family:inherit;background:#0B1E3814}
.feature-big .feature-tag,.feature-dark .feature-tag {background:#FFFFFF20}
.feature-big p,.feature-dark p {color:#D8EEF6}
.feature-peach {background:#E6EFF8;color:#163B57}
.feature-lime {background:#DDF5F8;color:#145669}
.feature-dark {background:#0B1E38;color:white;border-color:#0C3853}
.feature-emoji {color:#37C6E0}
.privacy-graphic {background:#1EA9C20E}
.shield-core {color:#54D8E8}
.ring {border-color:#6EDEF544}
.video-copy h2 span {color:var(--teal)}
.video-shell {border:8px solid #112E4C;background:#071727;box-shadow:13px 18px 0 #D6E7EF,0 28px 65px #1C47672B}
.video-top {background:#0F2B45;color:#D1EDF5}
.video-live {background:var(--cyan)}
.video-shell video {background:#061426}
.gallery-count {background:#0B1E38;color:white;border:1px solid #3B8199;transform:rotate(-5deg)}
.gallery-count strong {color:#66D9EA}
.filter {color:#2B6075;border-color:#CBDDE9;background:#FFF}
.filter.active,.filter:hover {background:var(--navy);border-color:var(--navy);color:white}
.screen-card {background:#F3F7FA;border-color:#DCE7ED;border-radius:14px}
.screen-card:hover {box-shadow:0 17px 29px #0B335220}
.screen-card .screen-label {color:#3F5F74}
.screen-card .screen-num {background:#B6EAF1;color:#0C3047}
.price-card {background:#FFF;border:1px solid #D5E3EF;border-radius:19px;box-shadow:0 20px 46px #102A4110}
.price-year {background:linear-gradient(156deg,#0B1E38,#124464);border:1px solid #2F9CBA;box-shadow:0 17px 0 #D5ECF3}
.pricing-eyebrow {color:#0F8BA6}
.price-year .pricing-eyebrow {color:#89E5F2}
.price-year>p {color:#CFDFED}
.price-card>p {color:#5E7488}
.price-card li:before {color:#0B93A8}
.price-year li:before {color:#7AE9F5}
.btn-light-wide {background:#E3F6FA;color:#0D5D77}
.best-badge {background:var(--cyan);color:var(--navy)}
.save-line span {background:#22D3EE26;color:#A8EFF7}
.trial-bar {background:#E5F4F8;border-color:#B7DCE7;color:#224B65}
.trial-icon,.trial-bar a {color:#097E9B}
.eco-card {border-radius:19px;background:#F0F8FB;border-color:#D7E7ED}
.eco-sites {background:#F3F6FD;border-color:#DAE3EF}
.eco-wasel {background:#ECF9FC;border-color:#CEE9F0}
.eco-id {color:#49798D}
.eco-symbol {color:#117A96}
.eco-window {border-color:#0C5475;background:white}
.eco-window-line {background:#B6D9E7}
.eco-window-panes span {background:#D8EFF5}
.site-preview {border-color:#183B56;background:#FAFDFF}
.site-header {background:#E4EFF6}
.site-header span {background:#729AB0}
.site-header span:first-child {background:#23CDE4}
.site-hero i {background:#0A89A4}
.site-hero b {background:#AABED0}
.site-hero small {background:#D5EDF4}
.chat-preview {background:#102B47;box-shadow:9px 11px #1F619535}
.chat-preview>span {color:#88E3F5}
.chat-bubble.first {background:#117F9F;color:white}
.chat-bubble.second {background:#DDF5FB;color:#0D435F}
.chat-wave i {background:#55D5EC}
.eco-category,.eco-card>a {color:#0C7D9B}
.eco-card>p {color:#546A81}
/* Grant and research: restrained institutional treatment */
.research-section {background:#081A2E;color:#FFF}
.research-section:before {background:radial-gradient(circle,#1D9DB44B,transparent 66%)}
.research-dots {background-image:radial-gradient(#A7DDEA22 1px,transparent 1px)}
.kicker-bright {color:#79E1EF}
.status-chip {background:#12465F;border-color:#378BA3;color:#CFF5F9}
.status-chip .dot {background:var(--cyan)}
.research-heading h2 span {color:#55D9EA}
.research-heading p {color:#C0D0DE}
.research-metrics>div {background:#113149B8;border-color:#3A6C85}
.research-metrics b {color:#5CE0F1}
.research-metrics span,.research-metrics small {color:#C2DCE8}
.model-diagram {background:#07182A;border-color:#4B97AC69}
.diagram-head {border-bottom-color:#31546D}
.diagram-label {color:#89CDDC}
.diagram-chip {background:#19526E;color:#B5ECF5}
.model-card {background:#112C43;border-color:#356981}
.model-card p {color:#C1D3E1}
.model-target {background:#214A60;color:#B7E8F0}
.model-icon {color:#81DDEA}
.model-icon.reader {color:#A2ECF3}
.model-icon.teacher {color:#72DAEE}
.diagram-bottom {background:#0C273D;border-top-color:#34516A}
.diagram-bottom span {color:#BDD0DD}
.funding-spec,.funding-story {background:#102E45;border-color:#36627D}
.funding-story {background:#0D253A}
.funding-spec h3,.funding-story h3 {line-height:1.65}
.funding-eyebrow {color:#76D8E8}
.funding-story>p {color:#C2D4E2}
.spec-row {border-bottom-color:#4C6D82}
.fund-pillars>div {border-color:#426C83}
.fund-pillars b {color:#77D8EB}
.funding-disclaimer,.research-foot {color:#AAC8D9}
/* FAQ, CTA, footer */
.faq-aside {color:#496B80;border-top-color:#D4E4EF}
.faq-item {background:#FFF;border-color:#DBE6EF;border-radius:12px}
.faq-item[open] {border-color:#94CEDC;box-shadow:0 12px 30px #15668814}
.faq-item summary:after {color:var(--teal)}
.closing-cta {background:linear-gradient(118deg,#DBF4F8 0%,#ECF8FB 48%,#BDECF4 100%);color:var(--navy)}
.closing-cta:before {border-color:#1791A526;box-shadow:0 0 0 80px #128DA40D,0 0 0 160px #0C7F9A08}
.closing-cta h2 span {color:#0F8BA6}
.closing-cta p {color:#425E75}
.closing-caption {color:#0B809B}
.closing-inner {padding:96px 0}
.footer {background:#07172A;color:#EFFBFF}
.footer-brand p {color:#B5C9D8}
.footer-brand>a,.footer-bottom a {color:#71DCEE}
.footer-col a {color:#AFC7D6}
.footer-col a:hover {color:#71DCEE}
.footer-bottom {border-top-color:#526B822F;color:#8BAAC0}
.company-signature {margin-bottom:18px;width:260px;max-width:92%}
.company-signature img {width:100%;height:auto;object-fit:contain;object-position:right center;filter:drop-shadow(0 8px 24px #001A2B55)}
html[dir=ltr] .company-signature img {object-position:left center}
/* English typography and spacing need separate metrics */
html[lang=en] .hero h1 {font-size:clamp(45px,5.45vw,74px);line-height:1.07;letter-spacing:-.06em}
html[lang=en] .hero-lead {line-height:1.85;font-size:16px}
html[lang=en] .hero-eyebrow {letter-spacing:.09em}
html[lang=en] .section-heading h2 {line-height:1.15;font-size:clamp(38px,4.1vw,59px)}
html[lang=en] .feature-card h3 {line-height:1.18}
html[lang=en] .research-heading h2 {line-height:1.2}
html[lang=en] .closing-cta h2 {line-height:1.18}
/* Tablet / mobile */
@media (min-width:1200px){.brand-partner{display:block;margin-inline-start:15px;padding-inline-start:16px;border-inline-start:1px solid #B1DDE441;font:700 9px 'Inter',sans-serif;letter-spacing:.13em;color:#8FC7D5;white-space:nowrap}}
@media (max-width:1170px){.hero h1{font-size:clamp(43px,4.7vw,60px)}.hero-signal-card{right:6%;bottom:-5px}.hero-art{transform:scale(.91)}.brand-watermark{opacity:.09}}
@media (max-width:1000px){.nav-links {background:#102B46;box-shadow:0 28px 50px #0313269A}.hero-inner{gap:0}.hero-signal-card{bottom:-18px}.hero h1{font-size:clamp(40px,4.8vw,56px)}.hero-lead{font-size:14px}.hero-art{transform:scale(.76)}.hero-ready{bottom:41px}}
@media (max-width:760px){
 .section{padding:70px 0}.section-heading h2{font-size:clamp(28px,6.8vw,38px);line-height:1.55}
 .nav {height:70px}.hero-inner{display:grid;grid-template-columns:1fr;gap:18px;padding:58px 0 34px}.hero-copy{max-width:640px}
 .hero h1 {font-size:clamp(37px,8.9vw,61px);line-height:1.55;letter-spacing:-.03em}
 .hero-lead {font-size:14px;line-height:2}.hero-eyebrow{font-size:10px;padding:6px 11px}
 .hero-footnotes {gap:9px;font-size:10px}.hero-art {transform:scale(.86);width:540px;left:50%;margin:0 0 -52px -270px;height:470px}
 .brand-watermark {height:280px;width:280px;top:17%;left:28%}.hero-signal-card{bottom:-16px;right:13%;transform:none;width:168px}
 .hero-ready{bottom:48px;left:2%}.hero-index{color:#C5D8E6}.hero-index span:last-child{font-size:10px}
 .steps{row-gap:35px}.feature-card h3{font-size:24px}.research-heading h2{font-size:clamp(33px,6.5vw,45px)}
 .research-heading p,.funding-story>p {line-height:1.9}
 .footer-grid{gap:25px}.company-signature{width:225px}.closing-cta h2{font-size:clamp(32px,6.5vw,46px)}
 html[lang=en] .hero h1 {font-size:clamp(40px,9vw,65px);line-height:1.12}
 html[lang=en] .section-heading h2{font-size:clamp(32px,7.5vw,42px)}
}
@media (max-width:480px){
 .hero-inner{padding-top:44px}.hero h1{font-size:clamp(36px,9.0vw,43px)}
 .hero-art{transform:scale(.70);margin-bottom:-100px}.hero-signal-card{right:14%;bottom:-15px}
 .hero-ready{left:3%;bottom:43px}.hero-index{min-height:49px}
 .price-card{padding:24px}.research-metrics b{font-size:27px}.company-signature{width:190px}
 html[lang=en] .hero h1{font-size:clamp(37px,8.7vw,47px)}
}
@media(prefers-reduced-motion:reduce){.hero-signal-card,.signal-bars i{animation:none!important}}