/* ===== Poppins self-hosted ===== */
@font-face {
    font-family: "Poppins";
    src:url("../../fonts/ttf/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../../fonts/ttf/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:url("../../fonts/ttf/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src:url("../../fonts/ttf/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* اگر italic هم لازم داری مثلا: */
@font-face {
    font-family: "Poppins";
    src: url("../../fonts/ttf/Poppins-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* متغیر فونت اصلی سایت */
:root {
    --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --jade:#12d4a7; --jade2:#15b8ff;
    --ink:#fff; --ink-d: #ffffff;
    --charcoal:#000; --charcoal2:#0b1523;
    --card:rgba(255,255,255,.06); --card-b:rgba(255,255,255,.14);
    --radius:16px;
    --nav-h:150px;
}

*{box-sizing:border-box}
html,body{height:100%; scroll-behavior:auto}

body{
    margin:0;
    color:var(--ink);
    font-family: var(--font-sans);
    font-size:16px;
    line-height:1.6;
    background:#000;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{color:inherit; text-decoration:none}
.container{ width:min(1200px,92vw); margin-inline:auto }
.screen{ min-height:80svh; position:relative; isolation:isolate; display:grid; align-items:center }
.center{text-align:center}
h1,h2,h3{margin:0 0 .35em}

/* Top progress */
.top-progress{ position:fixed; inset:0 auto auto 0; height:3px; width:100%; z-index:500; pointer-events:none }
.top-progress > i{ display:block; height:100%; transform:scaleX(0); transform-origin:0 0;
    background:linear-gradient(90deg,var(--jade),var(--jade2)) }

/* Sticky header (optional) */
.site-header{
    position:sticky; top:0; z-index:400; height:var(--nav-h);
    backdrop-filter:saturate(140%) blur(8px);
    background:linear-gradient(180deg,rgba(5,8,15,.85),rgba(5,8,15,.45) 70%,transparent);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:transform .35s ease, background .25s linear;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--nav-h); padding:0 10px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px }
.nav-links{ display:flex; align-items:center; gap:18px }
.nav-cta{ display:flex; gap:10px }
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.78rem 1.2rem;
    border-radius:16px; border:1px solid var(--card-b); background:var(--card);
    color:var(--ink); transition:transform .2s, box-shadow .2s }
.btn.primary{ border:0; background:linear-gradient(90deg,var(--jade),var(--jade2)); color:#06101a; font-weight:800 }
.btn.is-magnet{ box-shadow:0 10px 34px rgba(0,230,179,.28) }

/* HERO */
.hero{ position:relative; min-height:100svh }
.hero .bg{ position:absolute; inset:0; z-index:-1; overflow:hidden }

.hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)) }
.hero .copy{ max-width:740px; padding:0 4vw; margin:0 auto; text-align:center }
.hero h1{ font-size:clamp(54px,9vw,110px) }
.lede{ font-size:clamp(16px,2.2vw,20px); color:#ffffff; max-width:72ch; margin-inline:auto }
.hero .ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; justify-content:center }

/* Showcase (parallax grid + scribble draw) */
.showcase{ background:#000; }
.showcase__head{ position:relative; margin:6svh auto 3svh; }
.showcase__pin{ position:relative; text-align:center; }
.xl{ font-size:clamp(36px,7vw,84px); margin:0; }
.thin{ font-weight:300; opacity:.9 }
.scribble{ position:absolute; left:50%; top:60%; transform:translateX(-50%); width:min(900px,92vw); pointer-events:none; }
.scribble__path{ stroke:var(--jade); }
.showcase__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.showcase__grid img{
    width:100%; height:min(60svh,520px); object-fit:cover; border-radius:16px;
    border:1px solid rgba(255,255,255,.1); background:#0b0b0b; box-shadow:0 30px 90px rgba(0,0,0,.45);
}
@media (max-width:1024px){ .showcase__grid{ grid-template-columns:repeat(2,1fr) } }

/* Purpose (Vision+Mission pinned) */
.purpose{ position:relative; min-height:100svh; background:#000; }
.purpose__bg{ position:absolute; inset:0; z-index:-1; background:#000; }
.purpose__inner{ position:relative; width:min(1100px,92vw); margin:0 auto; }
.purpose .panel{
    position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0svh 2vw;
}
.purpose .panel .lede{ max-width:70ch; }

/* Nano field (27 cubes) */
.nano{ background:#000; position:relative; }
.nano__wrap{ position:relative; height:100svh; display:grid; place-items:center; }
#nanoField{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(60vmin,560px); height:min(60vmin,560px); perspective:900px;
}
.nano__caption{ position:absolute; bottom:6svh; left:50%; transform:translateX(-50%); opacity:.8 }
.nano-cube{
    position:absolute; width:48px; height:48px; transform-style:preserve-3d;
    --x:0; --y:0; --z:0; transform: translate3d(var(--x),var(--y),var(--z));
}
.nano-face{
    position:absolute; inset:0; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.02);
    transform: translateZ(24px);
}
.nano-face:nth-child(2){ transform: rotateY(90deg)  translateZ(24px); }
.nano-face:nth-child(3){ transform: rotateY(180deg) translateZ(24px); }
.nano-face:nth-child(4){ transform: rotateY(-90deg) translateZ(24px); }
.nano-face:nth-child(5){ transform: rotateX(90deg)  translateZ(24px); }
.nano-face:nth-child(6){ transform: rotateX(-90deg) translateZ(24px); }

/* Learn (sticky copy + pinned media steps) */
.learn{ isolation:isolate }
.learn__grid{ min-height:100svh; display:grid; grid-template-columns:minmax(340px,0.9fr) 1.1fr; gap:4vw; align-items:stretch; width:100%; padding:6svh 5vw; }
.learn__copy{ position:sticky; top:8svh; align-self:start }
.learn .stage{ position:sticky; top:0; height:100svh; overflow:hidden; border-radius:22px; background:#000; }
.learn .stage>img, .learn .stage>video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center }
.steps{list-style:none; margin:0 0 1.4rem; padding:0}
.steps li{
    position:relative; padding:14px 16px 14px 52px; margin:.35rem 0;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    border-radius:14px; line-height:1.45; transform:translateZ(0);
}
.steps li::before{
    content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; border-radius:50%;
    border:2px solid var(--jade); transform:translateY(-50%); opacity:.8;
}
.steps li.is-active{
    background:linear-gradient(90deg,rgba(0,230,179,.16),rgba(21,184,255,.10));
    border-color:rgba(0,230,179,.45);
    box-shadow:0 10px 30px rgba(0,230,179,.12);
}
.steps li.is-active::before{background:var(--jade); box-shadow:0 0 0 6px rgba(0,230,179,.18)}

/* CTA strip */
.cta-strip{ background:linear-gradient(180deg, rgba(255,255,255,.04), transparent) }
.cta-strip .row{ display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap }

/* Horizontal features */
#features{ overflow:hidden }
#features .track{ display:flex; align-items:center; gap:6vw; height:100svh; padding:0 8vw; perspective:1200px }
#features .item{ flex:0 0 auto; width:66vw; max-width:980px; border-radius:22px; border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); padding:32px 34px; position:relative; overflow:hidden;
    box-shadow:0 40px 120px rgba(0,0,0,.4) }
#features .item h3{ font-size:clamp(28px,4.8vw,56px); margin:0 0 .3em }
#features .item p{ color:var(--ink-d); margin:0 0 10px; max-width:60ch }
#features .media{ position:absolute;     right: -3%;
    top: 70%; transform:translateY(-50%) rotateY(-12deg);
    width: min(52vw,380px); height:auto; opacity:.9; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)) }
#features::before{ content:""; position:absolute; inset:auto 0 12svh 0; height:28svh;
    background:radial-gradient(60% 180% at 50% 50%, rgba(0,230,179,.12), rgba(21,184,255,.1) 40%, transparent 70%);
    filter:blur(40px); pointer-events:none }

@media (max-width:1024px){
    .learn__grid{ grid-template-columns:1fr; gap:24px; padding:7svh 4vw }
    .learn .stage{ height:75svh }
    #features .item{ width:84vw }
    #features .media{ width:70vw; right:-12% }
}
/* Personas */
#personas .cards{ position:relative; perspective:1200px }
#personas .card{
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px; padding:18px 16px; backdrop-filter: blur(6px);
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    will-change: transform, filter, opacity;
}
#personas .cards-scrim{
    position:absolute; inset:-10% -5% -5% -5%; z-index:-1;
    background:
            radial-gradient(60% 50% at 60% 20%, rgba(18,212,167,.08), rgba(0,0,0,0) 60%),
            url("<?= URL ?>public/static/bg-grid.svg");
    opacity:.6; mask-image: linear-gradient(to bottom, #000, transparent 95%);
}

/* Timeline */
#ipreg .timeline{ position:relative; padding-left:28px; list-style:none }
#ipreg .timeline__line{
    position:absolute; left:12px; top:6px; bottom:6px; width:2px; background:linear-gradient(#12d4a7,#7bd7ff);
    transform-origin:0 0;
}
#ipreg .timeline__item{ position:relative; margin:14px 0; line-height:1.55 }
#ipreg .timeline__item:before{
    content:""; position:absolute; left:-19px; top:.4em; width:10px; height:10px; border-radius:50%;
    background:#12d4a7; box-shadow:0 0 0 4px rgba(18,212,167,.15);
}

/* Sticky badge */
.ip-badge{
    width:110px; height:110px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #dfe9ff 28%, #b9d6ff 50%, #8fbaff 70%, #6ea1ff 85%, #5a8fff 100%);
    box-shadow:0 12px 40px rgba(0,0,0,.35); display:grid; place-items:center;
    border:2px solid rgba(255,255,255,.65); mix-blend:screen
}
.ip-badge span{ font:600 11px/1.1 ui-sans-serif,system-ui; text-align:center; color:#09101f }

/* هر سکشن یک stacking context مستقل داشته باشد تا pin ها زیر/رو هم نپرند */
.screen { position: relative; isolation: isolate; z-index: 0; }

/* مخصوص hscroll: هنگام pin روی بقیه ننشیند */
#features.screen { z-index: 1; }

/* اگر هدر sticky داری، روی همه بایستد */
.site-header, #siteHeader { position: sticky; top: 0; z-index: 50; }
/* ===== Personas — theme tokens (هماهنگ با پالت فعلی) ===== */
:root{
    --p-bg: transparent;              /* سکشن روی پس‌زمینه‌ی تیره صفحه می‌نشیند */
    --p-card-bg: rgba(255,255,255,.03);
    --p-card-bd: rgba(255,255,255,.08);
    --p-card-glow: rgba(18,212,167,.28);   /* #12d4a7 با شفافیت */
    --p-title: #e9eef6;
    --p-text: #b9c2cf;
    --p-chip-bg: rgba(255,255,255,.06);
    --p-chip-bd: rgba(255,255,255,.14);
    --p-accent: #12d4a7;
}

section.personas{ background: var(--p-bg); padding-block: clamp(48px,6vw,96px); }
.personas .personas__head{ margin-bottom: clamp(20px,3vw,32px); }
.personas .personas__head h2{ color: var(--p-title); margin: 0 0 8px; }
.personas .personas__head .sub{ color: var(--p-text); opacity:.85; margin:0; }

.persona-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(14px,2.2vw,22px);
}

.persona-card{
    position: relative;
    padding: clamp(18px,2.2vw,24px);
    border: 1px solid var(--p-card-bd);
    border-radius: 16px;
    background: var(--p-card-bg);
    backdrop-filter: blur(4px);
    transition: transform .35s cubic-bezier(.2,.6,.2,1), border-color .35s, box-shadow .35s;
    will-change: transform;
    isolation: isolate;              /* برای glow داخلی */
    outline: none;
}
.persona-card:focus-visible{ box-shadow: 0 0 0 2px var(--p-accent); }

.persona-card::after{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    pointer-events:none;
    background: conic-gradient(from 0deg at 50% 50%, var(--p-card-glow), transparent 20%, transparent 80%, var(--p-card-glow));
    filter: blur(12px);
    opacity: 0;
    transition: opacity .35s ease;
    z-index:-1;
}

.persona-card:hover{
    transform: translateY(-6px);
    border-color: color-mix(in lab, var(--p-accent) 40%, var(--p-card-bd));
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.persona-card:hover::after{ opacity: .8; }

/* Header (icon + title) */
.pc-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pc-icon{
    display:inline-grid; place-items:center;
    width:40px; height:40px; border-radius:12px;
    background: radial-gradient(120% 120% at 30% 30%, rgba(18,212,167,.25), rgba(18,212,167,.06) 60%, transparent 70%);
    color: var(--p-accent);
    border: 1px solid var(--p-card-bd);
}
.pc-title{ font-size: clamp(16px,1.6vw,18px); color: var(--p-title); margin:0; letter-spacing:.1px; }

/* Points */
.pc-points{ margin:10px 0 12px; padding-left: 18px; color: var(--p-text); }
.pc-points li{ margin:6px 0; line-height:1.5; }

/* Chips */
.pc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
    font-size: 12px; line-height: 1; padding:8px 10px;
    border-radius: 999px;
    background: var(--p-chip-bg);
    border: 1px solid var(--p-chip-bd);
    color: #dfe6ef;
}

/* Footer CTA */
.personas__foot{ display:flex; justify-content:center; margin-top: clamp(18px,3vw,28px); }
.personas .btn.primary{ padding:.9rem 1.2rem; }

/* Responsive */
@media (max-width: 1200px){
    .persona-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
    .persona-grid{ grid-template-columns: 1fr; }
    .persona-card{ padding: 16px; }
    .pc-icon{ width:36px;height:36px; }
}
@media (prefers-reduced-motion: reduce){
    .persona-card,
    .persona-card::after{ transition: none; }
}
/* ===== Horizontal Features - layout & chrome ===== */
section.hf { position: relative; overflow: clip; }
.hf .htrack{
    display: grid;
    grid-auto-flow: column;
    align-items: stretch;
    gap: clamp(24px, 4vw, 56px);
    padding-inline: clamp(24px, 6vw, 72px);
    height: 100svh;
}
.hf .hslide{
    width: 100vw;            /* هر اسلاید تمام عرض ویوپورت */
    max-width: 100vw;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(3px);
}
.hf .hslide header h3{ margin:0; }

.hf .media-wrap{
    display: grid; place-items: center;
    border-radius: 14px;
    background: radial-gradient(120% 120% at 30% 30%, rgba(18,212,167,.16), rgba(18,212,167,.04) 60%, transparent 70%);
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
}
.hf .media{ width: 92%; height: auto; transform-origin: 50% 60%; }

/* gradient edges */
.hf-edge{
    position: absolute; top:0; bottom:0; width: 8vw; pointer-events:none; z-index: 2;
    background: linear-gradient(to var(--dir), rgba(11,16,32,1), rgba(11,16,32,0));
    mix-blend-mode: normal;
}
.hf-left{ left:0; --dir:right; }
.hf-right{ right:0; --dir:left; }

/* progress bar */
.hf-progress{ position:absolute; left:6vw; right:6vw; bottom:22px; height:3px; background:rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.hf-progress > span{ display:block; height:100%; width:0%; background:#12d4a7; transform-origin:0 0; }

/* dots */
.hf-dots{
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:2;
}
.hf-dots button{
    width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.28);cursor:pointer;opacity:.7;
}
.hf-dots button.is-active{ background:#12d4a7; opacity:1; width:22px; border-radius:999px; transition: width .25s ease; }

/* mobile fallback: تبدیل به اسلایدر لمسی ساده (بدون pin) */
@media (max-width: 820px){
    section.hf{ overflow: visible; }
    .hf .htrack{
        grid-auto-flow: initial;
        grid-template-columns: 86% 86% 86% 86%;
        overflow-x:auto; scroll-snap-type:x mandatory;
        height: auto; padding-block: 24px;
    }
    .hf .hslide{ scroll-snap-align: start; height: auto; }
    .hf-edge, .hf-progress, .hf-dots{ display:none; }
}
/* ===== VALUE — Neo Aurora Strip ===== */
.value-neo{
    position: relative;
    isolation: isolate;
    padding-block: clamp(48px, 14svh, 22svh);
    overflow: clip;
    border-block: 1px solid rgba(255,255,255,.06);
}

/* Mesh grid (زیرپوستی) */
.value-neo::before{
    content:"";
    position:absolute; inset:-10% -5%;
    background:
            radial-gradient(1200px 600px at 10% 20%, rgba(18,212,167,.12), transparent 60%),
            radial-gradient(900px 500px at 90% 80%, rgba(0,194,255,.10), transparent 55%),
            repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 36px),
            repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
    filter: saturate(110%);
    z-index:-2;
}

/* Aurora blur layer */
.value-neo::after{
    content:"";
    position:absolute; inset:-20% -10%;
    background:
            conic-gradient(from 180deg at 70% 40%, rgba(18,212,167,.18), rgba(0,194,255,.08), rgba(124,77,255,.12), rgba(18,212,167,.18));
    filter: blur(60px);
    opacity:.7;
    animation: value-aurora 22s linear infinite;
    z-index:-1;
}
@keyframes value-aurora { to { transform: rotate(360deg); } }

/* Grid layout */
.value-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
}
@media (max-width: 980px){
    .value-grid{ grid-template-columns: 1fr; }
}

/* Head helper badge */
.value-badge{
    width:max-content; margin-bottom:10px;
    padding:6px 10px; border-radius:999px;
    font: 600 11px/1.1 ui-sans-serif, system-ui;
    letter-spacing:.14em;
    color:#0b1520; background:#12d4a7;
    box-shadow: 0 0 0 6px rgba(18,212,167,.12);
}

/* Card glass for bullets */
.value-card{
    position:relative;
    border:1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: clamp(16px, 2.2vw, 28px);
    box-shadow: 0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Bullets with custom checkmark (SVG mask) */
.value-bullets{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.value-bullets li{
    position:relative; padding-left: 38px;
    color:#e8f7f3; opacity:.95;font-size: 19px;
}
.value-bullets li::before{
    content:"";
    position:absolute; left:0; top:.2em; width:22px; height:22px;
    border-radius:8px;
    background: linear-gradient(135deg, #12d4a7, #00c2ff);
    box-shadow: 0 4px 18px rgba(18,212,167,.35), inset 0 0 0 1px rgba(255,255,255,.35);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.6 16.6 5.5 12.5l1.4-1.4 2.7 2.7 7-7 1.4 1.4-8.4 8.4z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70%;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.6 16.6 5.5 12.5l1.4-1.4 2.7 2.7 7-7 1.4 1.4-8.4 8.4z"/></svg>');
    mask-repeat:no-repeat; mask-position:center; mask-size:70%;
}

/* KPIs chips */
.value-metrics{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.value-metrics .chip{
    display:grid; gap:2px; align-items:center; justify-items:center;
    min-width: 96px; padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background: rgba(255,255,255,.04);
}
.value-metrics .chip span{
    font-weight:700; letter-spacing:.3px;
}
.value-metrics .chip small{
    opacity:.75; font-size:12px;
}

/* CTA side */
.value-right{ display:grid; place-items:center; }
.value-cta{
    font-size: clamp(15px, 1.1vw, 16px);
    padding: 14px 22px;
    border-radius: 999px;
    border:1px solid transparent;
    background:
            linear-gradient(#0b1520,#0b1520) padding-box,
            linear-gradient(135deg, #00c2ff, #12d4a7,#7c4dff) border-box;
    box-shadow:
            0 8px 28px rgba(0,194,255,.22),
            0 0 0 6px rgba(18,212,167,.10) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.value-cta:hover{
    transform: translateY(-2px);
    box-shadow:
            0 12px 36px rgba(0,194,255,.30),
            0 0 0 8px rgba(18,212,167,.14) inset;
    filter: saturate(120%);
}
.value-cta:active{ transform: translateY(0); }

/* Fine tune heading spacing */
.value-left .lg{ margin: 6px 0 14px;     font-size: clamp(26px, 3vw, 40px);}
/* ===== IP & REG — Neo Timeline ===== */
.ipreg-neo{
    position:relative; isolation:isolate;
    padding-block: clamp(48px, 12svh, 18svh);
    border-block: 1px solid rgba(255,255,255,.06);
    overflow: clip;
}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; gap:12px; } }

/* لایه‌های پس‌زمینه‌ی لطیف */
.ipreg-neo::before{
    content:""; position:absolute; inset:-10% -6%;
    background:
            radial-gradient(800px 480px at 15% 20%, rgba(18,212,167,.10), transparent 60%),
            radial-gradient(700px 420px at 85% 80%, rgba(124,77,255,.10), transparent 55%);
    filter: saturate(115%);
    z-index:-2;
}
.ipreg-neo::after{
    content:""; position:absolute; inset:-20% -12%;
    background: conic-gradient(from 120deg at 70% 30%,
    rgba(0,194,255,.10), rgba(18,212,167,.12),
    rgba(0,0,0,0), rgba(0,194,255,.08));
    filter: blur(60px); opacity:.7; z-index:-1;
}

/* Grid */
.ipreg-grid{
    display:grid; gap: clamp(20px, 4vw, 48px);
    grid-template-columns: 1.1fr auto;
    align-items: start;
}
@media (max-width: 980px){
    .ipreg-grid{ grid-template-columns: 1fr; }
    .ipreg-aside{ order:-1; justify-self:center; margin-bottom:10px; }
}

/* تایپوگرافی */
.ipreg-left .lg{ margin-bottom: 14px; }

/* ===== Timeline core (سازگار با timeline-vert اسکریپت خودت) ===== */
.ipreg-timeline{
    position:relative; list-style:none; margin:0; padding: 4px 0 0 0;
    counter-reset: ipcount;
}
.ipreg-timeline .timeline__line{
    position:absolute; left: 18px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(0,194,255,.0), rgba(0,194,255,.85), rgba(18,212,167,.0));
    box-shadow: 0 0 18px rgba(0,194,255,.35);
    transform-origin: 0 0; /* اسکریپت scaleY روی این اعمال می‌کنه */
}
.ipreg-timeline .timeline__item{
    position:relative;
    padding: 14px 10px 14px 56px; /* جا برای دات و شمارنده */
    color:#e8f7f3; opacity:.96;
}

/* Dot درخشان روی خط */
.ipreg-timeline .timeline__item::before{
    content:"";
    position:absolute; left: 9px; top: 20px;
    width: 18px; height: 18px; border-radius: 50%;
    background:
            radial-gradient(circle at 50% 50%, #12d4a7 0 40%, #00c2ff 70%, transparent 72%),
            linear-gradient(135deg, #12d4a7, #00c2ff);
    box-shadow:
            0 0 0 4px rgba(18,212,167,.18),
            0 0 20px rgba(0,194,255,.35), inset 0 0 0 1px rgba(255,255,255,.4);
}

/* کانکتور کوچک به کارت متن (تزئینی، تطبیق با راست‌به‌چپ/چپ‌به‌راست) */
.ipreg-timeline .timeline__item::after{
    content:"";
    position:absolute; left: 28px; top: 28px; width: 14px; height: 2px;
    background: linear-gradient(90deg, rgba(0,194,255,.7), rgba(18,212,167,.0));
}

/* شمارنده (ملایم) */
.ipreg-timeline .timeline__item > strong::before,
.ipreg-timeline .timeline__item::marker{ display:none; }
.ipreg-timeline .timeline__item .num{ display:none; }
.ipreg-timeline .timeline__item{
    counter-increment: ipcount;
}
.ipreg-timeline .timeline__item > *:first-child{
    position:relative;
}
.ipreg-timeline .timeline__item > *:first-child::before{
    content: counter(ipcount, decimal-leading-zero);
    position:absolute; left: -46px; top:-4px;
    font: 700 11px/1 ui-sans-serif,system-ui;
    letter-spacing:.14em;
    color:#0b1520;
    background:#12d4a7;
    padding:4px 8px; border-radius:999px;
    box-shadow: 0 0 0 6px rgba(18,212,167,.10);
}

/* ===== Badge (مُهر) — با sticky-badge انیمیشن می‌گیره ===== */
.ipreg-aside{ display:grid; place-items:center; }
.ip-badge{
    --size: 120px;
    width: var(--size); height: var(--size);
    display:grid; place-items:center; text-align:center;
    border-radius:50%;
    padding: 10px;
    color:#eafcfa; font-weight:700; line-height:1.05;
    background:
            radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
            conic-gradient(from 0deg, #12d4a7, #00c2ff, #7c4dff, #12d4a7);
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 61%, transparent 62%),
    radial-gradient(circle at 50% 50%, transparent 72%, #000 73%);
    mask: radial-gradient(circle at 50% 50%, #000 61%, transparent 62%),
    radial-gradient(circle at 50% 50%, transparent 72%, #000 73%);
    box-shadow:
            0 12px 34px rgba(0,0,0,.35),
            inset 0 0 0 2px rgba(255,255,255,.20),
            inset 0 0 0 8px rgba(11,21,32,.9),
            0 0 0 6px rgba(18,212,167,.10);
}
.ip-badge span{
    display:block; max-width: 80%; font-size: 12px;
    text-transform: uppercase; letter-spacing:.06em;
}
@media (max-width: 420px){
    .ip-badge{ --size: 100px; }
}

/* احترام به کاهش حرکات */
@media (prefers-reduced-motion: reduce){
    .ipreg-neo::after{ animation: none; }
}
/* === Impact (scoped) === */
.impact-sec{ --bg:#0a1422; --card:#0f1c30; --ring:#142640; --muted:#9fb3c8;
    --text:#e9fbf7; --glow: rgba(18,212,167,.5);
    padding-block:clamp(56px,12svh,18svh); position:relative; isolation:isolate;
}
.impact-sec .muted{color:var(--muted)}
.impact-chart-wrap{position:relative; display:grid; place-items:center; min-height:min(70svh,760px)}
#impactChart{max-width:min(92vw,860px); max-height:min(92vw,860px); aspect-ratio:1/1}
.impact-chart-wrap::before{
    content:""; position:absolute; inset:10% 8% 8% 8%;
    background: radial-gradient(60% 60% at 50% 50%, rgba(18,212,167,.08), transparent 60%),
    radial-gradient(80% 80% at 50% 50%, rgba(64,179,255,.05), transparent 70%);
    filter: blur(18px); z-index:0;
}
.impact-tip{
    position:absolute; pointer-events:none; padding:8px 10px; border-radius:12px;
    background:color-mix(in oklab, var(--card), transparent 10%); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08); color:#eaf7f5; font:600 12px/1.25 ui-sans-serif,system-ui;
    white-space:nowrap; transform:translate(-50%,-140%); box-shadow:0 8px 26px rgba(0,0,0,.26);
    opacity:0; transition:opacity .15s ease;
}

/* موبایل لیست */
@media (max-width: 980px){
    .impact-chart-wrap{display:none}
    .impact-list{display:grid; gap:10px; margin-top:8px}
}
@media (min-width: 981px){
    .impact-list{display:none}
}
.impact-card{
    display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
    padding:12px 14px; border-radius:14px; background:rgba(12,21,34,.72);
    border:1px solid rgba(255,255,255,.06); box-shadow:0 8px 26px rgba(0,0,0,.18);
}
.impact-card .mini{width:46px; height:46px; rotate:-90deg}
.impact-card .title{font-weight:700; color:#e7f7f3}
.impact-card .val{font-weight:800; color:#fff}
.impact-sec { --ring-shadow: rgba(0,0,0,.35); --muted:#9fb3c8; }
.impact-layout{display:grid;grid-template-columns:minmax(0,1.2fr) .8fr;gap:32px;align-items:start}
.impact-chart-wrap{position:relative; place-self:center; max-width:min(900px,85vw)}
.impact-tip{position:absolute;pointer-events:none;background:rgba(15,24,36,.9);color:#e9fbf7;
    padding:8px 10px;border-radius:10px;font:600 12px/1.2 ui-sans-serif,system-ui;box-shadow:0 8px 30px var(--ring-shadow);opacity:0;transition:opacity .15s}
.impact-panel h4{margin:0 0 8px 0}
.impact-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.impact-legend li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;
    padding:10px 12px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)}
.impact-legend .dot{width:12px;height:12px;border-radius:999px;margin-top:4px;box-shadow:0 0 0 3px rgba(255,255,255,.06) inset}
.impact-legend .lbl{font-weight:600}
.impact-legend .val{font-weight:700;color:#eafcfa}
.impact-legend .desc{font-size:12px;opacity:.85;margin-top:4px}
.impact-legend li.is-active{outline:2px solid rgba(18,212,167,.25); background:rgba(18,212,167,.05)}
.impact-note{margin-top:8px}

/* تیتر */
.hero-title{
    font-weight:800;
    letter-spacing:.01em;
    font-size: clamp(26px, 3.6vw, 44px);
    line-height:1.15;
    margin:0;
}
.hero-title .tm{ font-weight:700; font-size:.6em; margin-inline-start:.15em; vertical-align:super; }

/* ویژگی‌ها */
.hero-feats{
    --gap: clamp(18px, 4vw, 48px);
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap: var(--gap);
    width:min(1200px, 92%);
    margin:0; padding: clamp(6px, 1.4vw, 10px) 0 0;
    list-style:none;
    opacity:.96;
}
.hero-feats li{
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight:500;
    white-space:nowrap;
}


/* --- HERO base --- */
.hero{
    position:relative;
    overflow:hidden;
    padding-top:clamp(48px,6vh,72px);
    padding-bottom:clamp(24px,4vh,40px);
    color:#fff;
}


.hero__container{
    position:relative;
    max-width:min(1180px, 92vw);
    margin:0 auto;
}


.hero__stage{
    --skull-ar: 1.9;
    position:relative;
    width:100%;
    aspect-ratio: var(--skull-ar);
    margin-inline:auto;
    isolation:isolate;
}

.hero__stage .skull{
    position: absolute;
    inset: 0;
    width: 63%;
    height: 57%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
    will-change: transform;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -20%);
}

/* دست‌ها: روی ویدیو می‌نشینند */
.hand{
    position:absolute; top:25%;
    transform:translateY(-50%);
    height: clamp(160px, 30vh, 300px);
    user-select:none; pointer-events:none;
    z-index:3;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.55));
}
.hand--left{  left: max(-6vw, -40px); transform:translateY(-50%) rotate(-31deg); }
.hand--right{ right:max(-6vw, -40px); transform:translateY(-50%) rotate(-2deg); }

/* تیتر */
.hero .copy.hero-copy{
    position:relative;
    z-index:100 !important;
    text-align:center;
    margin-top: clamp(10px, 2vh, 16px);
    top: -20vh;

}
.hero-title{
    font-size:clamp(28px, 4.8vw, 64px);
    font-weight:800;
    letter-spacing:.02em;
}
.hero-title .tm{ font-size:.6em; opacity:.75; margin-left:.08em; }

/* ویژگی‌ها + تگ‌لاین */
.hero-feats{
    display:flex; flex-wrap:wrap; gap:.6rem 1rem;
    justify-content:center;
    margin: clamp(8px, 1.8vh, 14px) auto 0;
    padding:0; list-style:none;
    max-width:min(1100px, 94vw);
}
.hero-feats li{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
    padding:.5rem .8rem;
    border-radius:999px;
    font-size:clamp(12px, 1.7vw, 14px);
    white-space:nowrap;
}

.hero-feats li {
    font-size: 0.975rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.4;
}
@media (min-width: 1200px) {
    html { font-size: 18px; }
}
@media (max-width: 480px) {
    html { font-size: 15px; }
}

.hero-tagline{
    text-align:center;
    margin: .8rem auto 0;
    max-width: min(920px, 92vw);
    font-size:clamp(14px, 1.9vw, 18px);
    opacity:.92;
}
.hero-tagline .accent{ color:#12d4a7; }

/* --- ریسپانسیو --- */
@media (max-width: 1024px){
    .hand{ height: clamp(140px, 32vh, 320px); }
    .hand--left{  left:max(-3vw, -24px); }
    .hand--right{ right:max(-3vw, -24px); }
}
@media (max-width: 680px){
    /* در موبایل دست‌ها کمی کوچک‌تر و کمی پایین‌تر تا تیتر جا داشته باشد */
    .hand{ height: clamp(120px, 28vh, 240px); top:54%; }
    .hero-title{ font-size: clamp(26px, 8vw, 40px); }
    .hero-feats{ gap:.5rem .7rem; }
    .hero-feats li{ font-size:12px; padding:.45rem .7rem; }
    .hero-tagline{ font-size: 13.5px; }
}
/* ============ Impacts ============ */
.impacts-neo{
    background:#000; color:#fff;
    padding: clamp(48px, 10svh, 110px) 0;
}
.impacts-neo .container{ max-width:min(1100px, 92vw); margin:0 auto; }

.impact-title{
    text-align:center;
    font-size: clamp(22px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing:.02em;
    margin:0 0 clamp(18px, 3svh, 28px);
}


:root{ --impact-accent:#12d4a7; }
.impact-amount{
    text-align:center;
    font-size: clamp(44px, 9vw, 120px);
    font-weight: 900;
    color: #12d4a7;
    line-height: 1.05;
    letter-spacing: .5px;
    text-shadow: 0 2px 0 rgba(0,0,0,.35);
    margin-bottom: clamp(22px, 5svh, 36px);
}

.impact-figure{
    display:flex; justify-content:center;
    margin: 0 0 clamp(26px, 6svh, 48px);
}
.impact-figure img{
    width: clamp(140px, 22vw, 320px);
    height: auto;
    image-rendering:-webkit-optimize-contrast;
}

.impact-challenges{
    max-width:min(760px, 90vw);
    margin: 0 auto;
}
.impact-challenges h3{
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: 800;
    margin-bottom: clamp(10px, 1.6svh, 14px);
    text-align:center;
}
.impacts-neo .bullets{
    list-style: none;
    padding:0; margin:0;
}
.impacts-neo .bullets li{
    position:relative;
    padding-left: 1.2rem;
    line-height:1.6;
    font-size: clamp(14px, 1.9vw, 18px);
    opacity:.95;
}
.impacts-neo .bullets li + li{ margin-top:.35rem; }
.impacts-neo .bullets li::before{
    content:"•";
    position:absolute; left:0; top:0;
    transform:translateY(-.02em);
    font-size:1.2em;
    color:#d9d9d9;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .impact-amount, .impact-figure, .impact-challenges .bullets li{ animation:none !important; }
}
/* ============ WHY (Dual pill lists) ============ */
.learn-why{ background:#000; color:#fff; padding:clamp(44px,9svh,96px) 0; }
.learn-why .container{ max-width:min(1200px,92vw); margin:0 auto; }

.why-title{
    text-align:center; font-weight:900;
    font-size: clamp(22px, 3vw, 40px); letter-spacing:.02em; margin:0 0 2.2rem;
}

.why-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: min(4vw,28px);
    align-items:start; margin-bottom: clamp(22px,5svh,42px);
}
@media (max-width: 900px){
    .why-grid{ grid-template-columns:1fr; }
}

.why-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }

/* قرص‌ها */
:root{
    --pill-bg: rgba(20, 28, 32, .85);
    --pill-border: #0ea5b7;     /* تیل ـ نزدیک به رنگی که پسندیدی */
    --pill-glow: rgba(14,165,183,.45);
    --pill-active: linear-gradient(90deg, rgba(10,61,64,.7), rgba(6,34,40,.85));
}
.why-item{
    position:relative; display:flex; align-items:center; gap:.6rem;
    padding: 14px 18px; border-radius: 16px;
    background: var(--pill-bg);
    border:1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    font-size: clamp(14px,1.9vw,16px);
}
.why-item .dot{
    width:14px; height:14px; border-radius:999px;
    border:2px solid var(--pill-border);
    box-shadow: 0 0 0 2px rgba(14,165,183,.15), 0 0 18px 0 var(--pill-glow) inset;
    flex:0 0 14px;
}
.why-item:hover{
    transform: translateY(-1px);
    border-color: var(--pill-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 22px -6px var(--pill-glow);
}
.why-item.is-active{
    background: var(--pill-active);
    border-color: var(--pill-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 28px -8px var(--pill-glow);
}
.why-item.is-active .dot{
    background: var(--pill-border);
    box-shadow: 0 0 0 3px rgba(14,165,183,.18), 0 0 22px 2px var(--pill-glow);
}

/* KPI های کوتاه، اگر لازم نیست حذفشان کن */
.learn-why .why-kpis{
    display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.learn-why .kpi{
    display:flex; flex-direction:column; align-items:center;
    padding:10px 14px; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06); border-radius:12px;
    min-width:110px;
}
.learn-why .kpi span{ font-weight:800; font-size:clamp(18px,2.4vw,24px); }
.learn-why .kpi small{ opacity:.85; }
.learn-why .footnote.center{ text-align:center; margin-top:.6rem; opacity:.75; }

@media (prefers-reduced-motion: reduce){
    .why-item{ transition:none; }
}


/* ---------- ≤ 600px: compact, legible, battery-friendly ---------- */
@media (max-width: 600px){

    /* HERO */
    .hero { padding-top: 2svh; padding-bottom: 6svh; }
    .hero-title { font-size: clamp(28px, 7vw, 36px); line-height:1.1; text-align:center; }
    .hero__container { display:flex; justify-content:center; }

    .hero__stage .skull{
        border-radius: 16px;
        will-change: transform;
        top: 35%;
    }
    /* دست‌ها کوچکتر و مرتب در دو گوشه؛ ویدیو بین‌شان */
    .hero .hand{ width:auto;height: 100px; filter: drop-shadow(0 6px 20px rgba(0,0,0,.4)); }
    .hero .hand--left  { left:-4vw;  bottom:-2vw; transform:rotate(-2deg); z-index:1;}
    .hero .hand--right { right:-4vw; bottom:-2vw; transform:rotate( 2deg); z-index:1;}
    .hero .hand--left {
        left: -3vw;
        bottom: -2vw;
        transform: rotate(-2deg);
        z-index: 1;
    }
    .hero__stage {
        width: min(85vw, 420px);
        aspect-ratio: 1 / 1;
        isolation: isolate;
    }
    /* متن و بَج‌ها */
    .hero-feats{
        display:grid; gap:8px; grid-template-columns:1fr;
        font-size: .95rem; margin-top: 14px;
    }
    .hero-tagline{ font-size: .98rem; line-height:1.5; margin-top: 10px; text-align:center; }

    /* SHOWCASE */
    #showcase .showcase__head { margin-bottom: 12px; }
    #showcase .xl{ font-size: clamp(22px,5.2vw,28px); }
    #showcase .scribble{ height: 36px; }
    .showcase__grid{
        grid-template-columns: repeat(2, 1fr); /* 2×2 کارت */
        gap: 12px;
    }
    .showcase__grid img{
        border-radius: 14px;
    }
    .hand {
        height: clamp(120px, 28vh, 240px);
        top: 4%;
    }
    /* پارالاکس/اسکراب‌های سنگین را ملایم یا غیرفعال کن */
    [data-anim="parallax-speed"]{ --mob-speed: .4; }
}
/* ---------- Vertical Rhythm ---------- */
:root{
    /* پایه‌ی فاصله عمودی سایت */
    --stack: clamp(40px, 5vh, 96px);           /* فاصله بین سکشن‌ها */
    --padY:  clamp(56px, 8vh, 120px);          /* padding عمودی سکشن‌ها */
    --padY-hero: clamp(40px, 7vh, 100px);      /* خاص قهرمان */
    --padY-dense: clamp(28px, 5vh, 80px);      /* سکشن‌های فشرده */
    --screen-max: 1280px;                      /* کنترل عرض کانتینر */
}

/* کانتینر یکنواخت */
.container{
    max-width: var(--screen-max);
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

/* اسکلت سکشن‌ها */
.screen{
    padding-block: var(--padY);
}


.screen.tight   { padding-block: var(--padY-dense); }
.screen.flush   { padding-block: 0; margin-block: 0; }
.screen.dense + .screen.dense { margin-block-start: clamp(24px, 3vh, 60px); }

.showcase__grid,
.why-grid,
.persona-grid{ gap: clamp(16px, 2vw, 32px); }

.screen.full{
    min-block-size: clamp(560px, 86vh, 900px);
}
.hero{padding-top: 0}

h1,h2,h3{ margin-block: clamp(12px, 2.2vh, 28px); }
p,.lede,ul{ margin-block: clamp(8px, 1.8vh, 22px); }

@media (min-width: 1600px){
    :root{
        --screen-max: 1400px;
        --padY: clamp(56px, 7vh, 110px);
    }
}


@media (max-width: 992px){
    :root{ --stack: clamp(24px, 4vh, 56px); --padY: clamp(32px, 7vh, 80px); }
    .screen.full{ min-block-size: clamp(520px, 88vh, 820px); }
}
@media (max-width: 600px){
    :root{ --stack: clamp(20px, 4.5vh, 48px); --padY: clamp(24px, 8vh, 72px); }
}
/* ============ IP / REG NOTES ============ */
/* =========================================
   OSTEONE vs CONVENTIONAL — CLEAN REDESIGN
   ========================================= */

.screen.ipreg-neo {
    padding: clamp(3rem, 6vh, 5rem) 0;
    background: #000;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.ipreg-neo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 20% 80%, rgba(18,212,167,0.10) 0%, transparent 55%),
            radial-gradient(circle at 80% 20%, rgba(21,184,255,0.08) 0%, transparent 55%);
    z-index: 0;
}

/* ===== GRID STRUCTURE ===== */
.ipreg-grid {
    position: relative;
    z-index: 2;
    max-width: min(1200px, 92vw);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    align-items: center;
    gap: clamp(2rem, 3vw, 3rem);
}

/* ===== SIDE PANELS (LEFT + RIGHT) ===== */
.ipreg-left,
.ipreg-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.ipreg-image {
    width: 100%;
    max-width: 320px;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    filter: brightness(0.95) contrast(1.08);
    transition: 0.3s ease;
}
.ipreg-left:hover .ipreg-image,
.ipreg-right:hover .ipreg-image {
    transform: scale(1.03);
}

/* ===== CAPTION ===== */
.ipreg-caption {
    background: rgba(17,25,40,0.85);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-align: center;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.10);
}

.ipreg-caption.outdated {
    border-color: rgba(255,80,80,0.4);
    color: #fca5a5;
}
.ipreg-caption.innovative {
    border-color: rgba(16,185,129,0.45);
    color: #6ee7b7;
}

/* ===== CENTER AREA ===== */
.ipreg-center {
    text-align: center;
}

.ipreg-center h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.ipreg-center > p {
    font-size: 1rem;
    color: #b5b5b5;
    max-width: 580px;
    margin: 0 auto 1.75rem;
    line-height: 1.55;
}

/* ===== COMPARE BOXES ===== */
.ipreg-compare {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-top: 1rem;
}
.ipreg-title{text-align: center;    font-size: clamp(54px, 9vw, 50px);}
.compare-item {
    flex: 1;
    padding: .45rem;
    border-radius: 12px;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}

.compare-item.outdated {
    background: rgba(255, 80, 80, 0.08);
    border-color: rgba(255, 80, 80, 0.35);
    color: #fecaca;
}
.compare-item.innovative {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16,185,129,0.35);
    color: #6ee7b7;
}

.compare-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
}

/* BULLET LIST */
.compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.compare-list li {
    padding-left: 1rem;
    margin: 0.35rem 0;
    font-size: 0.7rem;
    position: relative;
}
.compare-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    position: absolute;
    left: 0;
    top: 0.55rem;
}

.compare-arrow {
    font-size: 2rem;
    color: #12d4a7;
    padding-inline: 0.5rem;
    align-self: center;
}

/* ===== FAST FIXATION BADGE ===== */
.ipreg-faster {
    background: rgba(18,212,167,0.07);
    border-left: 3px solid #12d4a7;
    margin-top: 1.75rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
}
.ipreg-faster p {
    color: #12d4a7;
    font-size: 1rem;
    margin: 0;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1020px) {
    .ipreg-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .ipreg-compare {
        flex-direction: column;
        gap: 1.5rem;
    }

    .compare-arrow {
        transform: rotate(90deg);
    }

    .ipreg-left,
    .ipreg-right {
        order: 2;
    }
    .ipreg-center {
        order: 1;
    }
}

@media (max-width: 600px) {
    .ipreg-image {
        max-width: 240px;
    }
    .compare-item {
        padding: 1rem;
    }
    .compare-list li {
        font-size: 0.85rem;
    }
    .ipreg-faster p {
        font-size: 0.9rem;
    }
}


/* ========== Mission / Vision Sections ========== */

.mv-section {
    position: relative;
    padding-block: clamp(4rem, 7vh, 7rem);
    color: #f5f5f5;
    overflow: hidden;
}

/* دو تُن متفاوت ولی هر دو دارک */
.mv-section--dark {
    background: radial-gradient(circle at top, #10141f 0, #050711 45%, #020308 100%);
}

.mv-section--darker {
    background: radial-gradient(circle at top, #050711 0, #020308 50%, #000000 100%);
}

.mv-container {
    max-width: 1120px;
    margin-inline: auto;
}

/* تگ کوچک بالای عنوان (Mission / Vision) */
.mv-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mv-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #43e5ff, #7b5cff);
}

.mv-tag--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}

/* گرید مینیمال: متن اصلی + ساید نوت */
.mv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: flex-start;
}

.mv-title {
    font-size: clamp(1.85rem, 2.3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.mv-text {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    color: rgba(240, 240, 240, 0.86);
    max-width: 38rem;
}

.mv-text strong {
    font-weight: 600;
}

.mv-accent {
    color: #45e4ff;
}

/* ستون راست: نوت کوتاه */
.mv-side {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: clamp(1.4rem, 2vw, 1.8rem);
}

.mv-note {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(220, 225, 235, 0.8);
}

/* لاین subtle زیر کل سکشن (حفظ مینیمالیسم) */
.mv-section::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(120, 200, 255, 0.18) 18%,
            rgba(120, 200, 255, 0.35) 50%,
            rgba(120, 200, 255, 0.18) 82%,
            transparent 100%
    );
    opacity: 0.8;
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .mv-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .mv-side {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 0.5rem;
    }

    .mv-title {
        letter-spacing: 0.06em;
    }
}
/* ===== IMPACTS — Challenges: centered & aligned list ===== */

.impacts-neo .impact-challenges {
    text-align: center;
    margin-top: clamp(2rem, 3vh, 2.8rem);
    list-style: none;
}

.impacts-neo .impact-challenges h3 {
    margin-bottom: 1.4rem;
}

/* UL خودش وسط سکشن + یک عرض کنترل‌شده */
.impacts-neo .impact-challenges .bullets {
    list-style: none;
    margin: 0 auto;
    padding: 0;

    max-width: 30rem;          /* این عرض مشترک همه آیتم‌ها است */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    /* مهم: اجازه بده آیتم‌ها کل عرض max-width رو پر کنن */
    align-items: stretch;
}

/* هر LI هم‌عرض، متن وسط‌چین */
.impacts-neo .impact-challenges .bullets li {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.4;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(240, 240, 240, 0.9);
}

.impacts-neo .impact-challenges .bullets li:before{display: none}

.impacts-neo .impact-challenges .bullets li strong {
    font-weight: 600;
}
/* ===== VALUE section — center layout ===== */

.value-neo .value-left {
    max-width: 48rem;              /* ستونی نسبتاً پهن ولی کنترل‌شده */
    margin: 0 auto;
    text-align: center;
}

/* تگ VALUE هم وسط قرار بگیره */
.value-neo .value-badge {
    margin-inline: auto;
    margin-bottom: 1.25rem;
}

/* تیتر اصلی وسط */
.value-neo .value-left .lg {
    margin-bottom: 1.75rem;
}

/* کارت متن (بولت‌ها) وسط ستون، ولی متن بولت‌ها خوانا بمونه */
.value-neo .value-card {
    margin-inline: auto;
}

/* خود لیست بولت‌ها وسط ستون قرار بگیره،
   ولی متن هر آیتم چپ‌چین بمونه که خوندنش راحت‌تره */
.value-neo .value-bullets {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 36rem;
    text-align: left;
}

.value-neo .value-bullets li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.6rem;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.6;
}



/* ===== VALUE metrics chips — better typography & responsive ===== */

.value-neo .value-metrics {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;       /* وسط چین شدن چیپ‌ها */
}

/* چیپ‌ها فقط در این سکشن، نه جهانی */
.value-neo .value-metrics .chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: radial-gradient(circle at top, rgba(115, 230, 255, 0.12), rgba(0, 0, 0, 0.8));

    min-width: clamp(7rem, 11vw, 10rem);
    text-align: center;

    /* فونت پایه چیپ */
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    line-height: 1.3;
    color: rgba(240, 245, 255, 0.9);
    gap: 0.2rem;
}

/* عدد بزرگ داخل چیپ */
.value-neo .value-metrics .chip span {
    font-weight: 600;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);  /* دسکتاپ بزرگ → فونت درشت‌تر، موبایل → کوچیک‌تر */
}

/* متن توضیحی کوچک‌تر */
.value-neo .value-metrics .chip small {
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    opacity: 0.85;
}

/* کمی فاصله عمودی در موبایل برای تنفس بیشتر */
@media (max-width: 600px) {
    .value-neo .value-metrics {
        gap: 0.6rem;
    }

    .value-neo .value-metrics .chip {
        min-width: 7.5rem;
        padding: 0.55rem 0.8rem;
    }
}
/* ============ CONTACT US (Contact-neo) ============ */

.contact-neo {
    padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(3.5rem, 8vh, 5rem);
    background: radial-gradient(circle at top, #07111f 0, #020308 55%, #000000 100%);
    border-top: 1px solid rgba(120, 200, 255, 0.15);
    color: #f4f6ff;
}
/* ===== CONTACT layout با flex برای دسکتاپ ===== */
.contact-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.contact-intro,
.contact-form-wrap {
    flex: 1 1 0;
    min-width: 0;
}

/* ===== ریسپانسیو زیر 900px ===== */
@media (max-width: 900px) {
    .contact-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 1.8rem;
    }

    .contact-intro {
        max-width: none;
    }

    .contact-form-wrap {
        width: 100%;
    }
}

/* اگه می‌خوای ردیف‌های دوتایی فرم هم زودتر استک بشن (زیر 900px) */
@media (max-width: 900px) {
    .contact-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }
}


.contact-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 0.8rem;
    letter-spacing: 0.02em;
}

.contact-lede {
    font-size: 0.98rem;
    color: rgba(220, 230, 255, 0.86);
    line-height: 1.7;
    margin-bottom: 1.3rem;
}

.contact-personas {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: rgba(210, 225, 255, 0.9);
}

.contact-personas li {
    position: relative;
    padding-left: 0.9rem;
}
.contact-personas li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #43e5ff, #7b5cff);
    opacity: 0.9;
}

.contact-note {
    font-size: 0.86rem;
    color: rgba(180, 195, 230, 0.86);
    line-height: 1.6;
}

/* Form wrapper */
.contact-form-wrap {
    background: rgba(6, 12, 24, 0.96);
    border-radius: 1rem;
    border: 1px solid rgba(120, 200, 255, 0.22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
    padding: clamp(1.5rem, 3vw, 2rem);
    backdrop-filter: blur(16px);
}

/* Status message */
.contact-status {
    display: none;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.contact-status.is-visible {
    display: block;
}
.contact-status--success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
}
.contact-status--error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.6);
    color: #fecaca;
}

/* Form layout */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

/* Fields */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(190, 205, 235, 0.9);
}
.field label span {
    color: #f97373;
}

.field input,
.field select,
.field textarea {
    border-radius: 0.65rem;
    border: 1px solid rgba(120, 150, 190, 0.6);
    background: rgba(3, 9, 20, 0.95);
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: #f4f6ff;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.field textarea {
    resize: vertical;
    min-height: 120px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #43e5ff;
    box-shadow: 0 0 0 1px rgba(67, 229, 255, 0.4);
    background: rgba(6, 14, 30, 0.98);
}

/* Choices (checkbox pills) */
.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.choice {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(80, 110, 155, 0.8);
    background: rgba(8, 16, 32, 0.9);
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.6rem !important;
}

.choice input {
    width: 14px;
    height: 14px;
    accent-color: #12d4a7;
}

.choice span {
    white-space: nowrap;
}

/* Inline consent */
.field--inline .choice--inline {
    border-radius: 0.6rem;
    padding-inline: 0;
    border: none;
    background: transparent;
    gap: 0.5rem;
}
.field--inline .choice--inline span {
    white-space: normal;
    font-size: 0.82rem;
}

/* Actions */
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.2rem;
    margin-top: 0.4rem;
}

.btn-primary {
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;

    background: linear-gradient(135deg, #12d4a7 0%, #15b8ff 100%);
    color: #020617;
    box-shadow: 0 8px 22px rgba(21, 184, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(21, 184, 255, 0.45);
    filter: brightness(1.05);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(21, 184, 255, 0.35);
}

.contact-disclaimer {
    font-size: 0.78rem;
    color: rgba(160, 180, 215, 0.9);
    max-width: 280px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 920px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-intro {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .choice span {
        white-space: normal;
    }

    .contact-form-wrap {
        padding: 1.25rem 1.1rem;
    }
}
/* EvoNexus badge در هدر */
.nav-evonexus {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .78rem 1.2rem;
    border-radius: 16px;
    border: 1px solid var(--card-b);
    background: var(--card);
    color: var(--ink);
    transition: transform .2s, box-shadow .2s;
}

.btn-outline{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .78rem 1.2rem;
}

.nav-evonexus-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.nav-evonexus-text {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(210, 230, 255, 0.88);
    white-space: nowrap;
}/* ===== FOOTER BASE ===== */

.ft {
    margin-top: 40px;
    padding-block: clamp(22px, 4vh, 34px);
    background: radial-gradient(circle at top, #050915 0, #020308 55%, #000 100%);
    border-top: 1px solid rgba(120,200,255,0.18);
    color: rgba(240,245,255,0.92);
    font-size: 0.9rem;
}

.ft-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
    gap: clamp(18px, 3vw, 28px);
    align-items: flex-start;
}

.ft-col {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.ft-title {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}

.ft-muted {
    opacity: 0.8;
    line-height: 1.6;
    max-width: 26rem;
}

.ft a {
    color: inherit;
    text-decoration: none;
    position: relative;
}

.ft a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #45e4ff, #7b5cff);
    transition: width 0.2s ease-out;
    opacity: 0.85;
}
.ft a:hover::after { width: 100%; }

.ft-logo-wordmark {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

/* Contact list */
.ft-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.ft-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    line-height: 1.5;
}

.ft-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.7;
}

.ft-contact a,
.ft-contact span {
    font-size: 0.9rem;
    word-break: break-word;
}


.ft-evonexus {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    background: rgba(6,12,24,0.9);
    border: 1px solid rgba(120,200,255,0.25);
}

.ft-evonexus-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.ft-evonexus-text {
    font-size: 0.82rem;
    line-height: 1.5;
    opacity: 0.9;
}

.ft-legal {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ft-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    opacity: 0.9;
}

.ft-list a {
    font-size: 0.82rem;
}


@media (max-width: 960px) {
    .ft-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
        row-gap: 20px;
    }


    .ft-col--brand {
        grid-column: 1 / span 2;
    }
}


@media (max-width: 640px) {
    .ft {
        padding-block: 20px;
        font-size: 0.88rem;
    }

    .ft-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .ft-col--brand,
    .ft-col--contact,
    .ft-col--ecosystem {
        border-top: 1px solid rgba(255,255,255,0.08);
        padding-top: 10px;
    }

    .ft-col--brand {
        border-top: none;
        padding-top: 0;
    }

    .ft-muted {
        max-width: none;
    }

    .ft-contact li {
        align-items: center;
    }

    .ft-evonexus {
        justify-content: flex-start;
    }
    .btn-outline{display: none}
    .brand img{height: 80px !important;}
    .compare-item{width: 100%}
    .ipreg-caption h3{font-size: 14px}
    #about .container .grid{
        grid-template-columns: unset !important;
    }
}

/* موبایل خیلی کوچک – وسط‌چین‌تر */
@media (max-width: 430px) {
    .ft {
        text-align: left;
    }

    .ft-evonexus {
        flex-direction: row;
        align-items: center;
    }
}