/* ============================================================ خودکسب — Stylesheet · RTL / Persian ============================================================ */ /* ============================================================ SELF-HOSTED FONTS (Iran national-net friendly — no Google CDN) فایل‌های فونت را در این پوشه بگذار (نامِ اصلی، بدونِ تغییر): /wp-content/uploads/khodkasb/fonts/ مسیرها «نسبی»‌اند (fonts/…) ⇒ هم در سایت هم در پیش‌نمایش کار می‌کنند، چون نسبت به محلِ همین فایلِ CSS حساب می‌شوند. ============================================================ */ /* —— Vazirmatn (متنِ بدنه) —— */ @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300;font-display:swap; src:url('fonts/Vazirmatn-Light.woff2') format('woff2');} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');} @font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');} /* —— IRANYekanX (هدر، فوتر، تیترها، تأکیدها) —— */ @font-face{font-family:'IRANYekan';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/IRANYekanX-Regular.woff2') format('woff2');} @font-face{font-family:'IRANYekan';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/IRANYekanX-Medium.woff2') format('woff2');} @font-face{font-family:'IRANYekan';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/IRANYekanX-DemiBold.woff2') format('woff2');} @font-face{font-family:'IRANYekan';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/IRANYekanX-Bold.woff2') format('woff2');} @font-face{font-family:'IRANYekan';font-style:normal;font-weight:800;font-display:swap; src:url('fonts/IRANYekanX-ExtraBold.woff2') format('woff2');} :root{ --bg:#fafaf7; --bg-card:#ffffff; --bg-soft:#f4f3ee; --line:rgba(20,22,40,0.08); --line-strong:rgba(20,22,40,0.14); --fg:#16182a; --fg-mute:#5c5f78; --fg-faint:#8c8fa4; --brand-deep:#293f8a; --brand-mid:#4d6df0; --brand-mint:#5dd3c9; --brand-mint-deep:#2ca99f; --warm:#ffb86b; --rose:#ff7a8a; --radius:12px; --radius-lg:22px; --radius-pill:999px; --wrap:1240px; --font:'Vazirmatn', ui-sans-serif, system-ui, sans-serif; --display:'IRANYekan', 'Vazirmatn', ui-sans-serif, system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace; --serif:'Cormorant', 'Cormorant Garamond', Georgia, serif; --aurora-1:rgba(93,211,201,.18); --aurora-2:rgba(104,134,255,.16); --grid-dot:rgba(20,22,40,.05); --ease:cubic-bezier(.22,1,.36,1); } html{color-scheme:light;} html[data-theme="dark"]{color-scheme:dark;} html[data-theme="dark"]{ --bg:#0a0c16; --bg-card:#12152a; --bg-soft:#191c33; --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.18); --fg:#eef0ff; --fg-mute:#9ca0c4; --fg-faint:#6c7099; --brand-deep:#8aa0ff; --brand-mid:#7e98ff; --aurora-1:rgba(93,211,201,.16); --aurora-2:rgba(104,134,255,.18); --grid-dot:rgba(255,255,255,.045); } *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.65; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease); } /* ============================================================ RTL LOCK — keep layout right-to-left even when the host theme's is LTR (e.g. pasted inside an Elementor HTML widget). These are all the top-level blocks we render across pages. ============================================================ */ .scroll-progress,.topbar,.nav,.drawer,.hero,.marquee-sec,.hooshyar-sec, .stats,.section,.feature-sec,.cta-sec,footer,.toast,.sticky-buy,main{ direction:rtl; text-align:right; } .hero,.hooshyar-sec{text-align:center;} /* ============================================================ TYPE ASSIGNMENT IRANYekan → header, footer, headings, buttons, emphasis Vazirmatn → body text (default on ) ============================================================ */ .topbar, .nav, footer, h1, h2, h3, h4, .hero h1, .section-head h2, .hy-title, .cta h2, .feature-text h3, .card h3, .tpl h4, .faq-q, .plan .name, .logo, .brand-fa, .btn, .dd-link .dt, .m-acc-head, .m-link, strong, b{ font-family: var(--display); } a{color:inherit; text-decoration:none;} button{font:inherit; color:inherit; border:none; background:none; cursor:pointer;} img{max-width:100%; display:block;} ::selection{background:var(--brand-mint); color:#06231f;} .num{font-feature-settings:"ss01";} /* ---- layout helpers ---- */ .wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px;} .serif{font-family:var(--serif); font-weight:600; letter-spacing:0;} .mono{font-family:var(--mono);} /* editorial section label: ۰۱ ——— محصولات */ .kicker{display:flex; align-items:center; gap:16px; margin-bottom:30px;} .kicker .idx{ font-family:var(--serif); font-weight:600; font-size:34px; line-height:1; color:var(--brand-mint-deep); font-feature-settings:"lnum"; } html[data-theme="dark"] .kicker .idx{color:var(--brand-mint);} .kicker .rule{height:1px; width:54px; background:var(--line-strong);} .kicker .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-faint); } /* ---- buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; height:54px; padding:0 28px; border-radius:var(--radius-pill); border:1px solid transparent; font-size:15.5px; font-weight:500; cursor:pointer; will-change:transform; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn .ar{transition:transform .3s var(--ease);} .btn:hover .ar{transform:translateX(-5px);} .btn-primary{background:var(--fg); color:var(--bg);} .btn-primary:hover{box-shadow:0 16px 40px -16px rgba(20,22,40,.55);} html[data-theme="dark"] .btn-primary{background:#eef0ff; color:#0a0c16;} .btn-ghost{background:transparent; color:var(--fg); border-color:var(--line-strong);} .btn-ghost:hover{background:var(--bg-soft); border-color:var(--fg-faint);} .btn-mint{ background:linear-gradient(135deg,var(--brand-mint) 0%,var(--brand-mint-deep) 100%); color:#052e2a; } .btn-mint:hover{box-shadow:0 18px 44px -16px rgba(45,169,159,.6);} .btn-sm{height:44px; padding:0 18px; font-size:14px;} .magnetic{position:relative;} /* ============================================================ TOP BANNER ============================================================ */ .topbar{ border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2)); } .topbar .wrap{ display:flex; justify-content:center; align-items:center; gap:14px; min-height:44px; font-size:13px; padding-top:8px; padding-bottom:8px; flex-wrap:nowrap; text-align:center; white-space:nowrap; } .topbar .wrap > span:nth-child(2){overflow:hidden; text-overflow:ellipsis; min-width:0;} @media(max-width:760px){.topbar .wrap > span:nth-child(2){display:none;}} .topbar .pill{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; background:var(--fg); color:var(--bg); padding:3px 9px; border-radius:var(--radius-pill); } .topbar a{font-weight:600; color:var(--brand-mint-deep); white-space:nowrap;} html[data-theme="dark"] .topbar a{color:var(--brand-mint);} /* ============================================================ NAV ============================================================ */ .scroll-progress{ position:fixed; top:0; right:0; height:2px; width:0; background:linear-gradient(90deg,var(--brand-mint),var(--brand-mid)); z-index:120; } .nav{ position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease); } .nav.scrolled{border-bottom-color:var(--line);} .nav-inner{display:flex; align-items:center; height:78px; gap:40px;} .logo{display:flex; align-items:center; gap:11px; font-weight:700; font-size:19px; letter-spacing:-.01em;} .logo-mark{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-mint) 130%); box-shadow:0 4px 14px -6px rgba(41,63,138,.6); } .nav-links{display:flex; align-items:center; gap:4px; flex:1;} .nav-links a{ padding:9px 14px; border-radius:9px; font-size:14.5px; color:var(--fg-mute); position:relative; transition:color .2s var(--ease); } .nav-links a::after{ content:""; position:absolute; right:14px; left:14px; bottom:5px; height:1.5px; background:var(--brand-mint-deep); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); } .nav-links a:hover{color:var(--fg);} .nav-links a:hover::after{transform:scaleX(1);} .nav-right{display:flex; align-items:center; gap:10px;} .icon-btn{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-strong); color:var(--fg); transition:background .2s var(--ease), border-color .2s; } .icon-btn:hover{background:var(--bg-soft);} .icon-btn svg{width:19px; height:19px;} /* smooth animated theme-toggle icon swap */ .theme-toggle{position:relative; overflow:hidden;} .theme-toggle svg{position:absolute; inset:0; margin:auto; transition:transform .5s var(--ease), opacity .35s var(--ease);} .theme-toggle .sun{transform:rotate(-90deg) scale(.4); opacity:0;} .theme-toggle .moon{transform:rotate(0) scale(1); opacity:1;} html[data-theme="dark"] .theme-toggle .sun{transform:rotate(0) scale(1); opacity:1;} html[data-theme="dark"] .theme-toggle .moon{transform:rotate(90deg) scale(.4); opacity:0;} .mobile-toggle{display:none;} /* logo monogram (خ) — replaces the n8n node mark */ .logo-mark{font-family:var(--font); color:#fff; font-weight:800; font-size:18px; line-height:1; padding-bottom:2px;} .logo .brand-fa{font-weight:700;} .logo-img{height:34px; width:auto; max-height:36px; max-width:170px; object-fit:contain; display:block;} .foot-brand .logo .logo-img{height:40px; max-height:44px;} .drawer-head .logo .logo-img{height:32px;} /* ============================================================ NAV DROPDOWN / MEGA-MENU ============================================================ */ .nav-item{position:relative; display:flex; align-items:center;} .nav-trigger{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:9px; font-size:14.5px; color:var(--fg-mute); transition:color .2s var(--ease); white-space:nowrap; } .nav-trigger .chev{width:14px; height:14px; transition:transform .3s var(--ease); opacity:.7;} .nav-item:hover .nav-trigger, .nav-item.open .nav-trigger{color:var(--fg);} .nav-item:hover .nav-trigger .chev, .nav-item.open .nav-trigger .chev{transform:rotate(180deg);} .dd{ position:absolute; top:calc(100% + 16px); right:0; z-index:90; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 32px 80px -42px rgba(20,22,40,.5), 0 2px 0 rgba(255,255,255,.03) inset; padding:14px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; pointer-events:none; } .dd::before{content:""; position:absolute; top:-18px; left:0; right:0; height:18px;} .nav-item:hover .dd, .nav-item.open .dd{opacity:1; visibility:visible; transform:none; pointer-events:auto;} /* features mega-menu */ .dd-features{width:600px;} .dd-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px;} .dd-link{ display:flex; align-items:flex-start; gap:14px; padding:14px; border-radius:14px; transition:background .2s var(--ease); } .dd-link:hover{background:var(--bg-soft);} .dd-link .di{ flex-shrink:0; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--brand-mint-deep); transition:border-color .2s, color .2s; } html[data-theme="dark"] .dd-link .di{color:var(--brand-mint);} .dd-link:hover .di{border-color:var(--brand-mint); color:var(--brand-mint-deep);} .dd-link .di.c-blue{color:var(--brand-mid);} .dd-link .di.c-warm{color:#c47d18;} html[data-theme="dark"] .dd-link .di.c-warm{color:var(--warm);} .dd-link .di.c-rose{color:#c44256;} html[data-theme="dark"] .dd-link .di.c-rose{color:var(--rose);} .dd-link .dt{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:3px;} .dd-link .ds{display:block; font-size:12.5px; color:var(--fg-faint); line-height:1.5;} .dd-foot{ margin-top:10px; padding:14px 14px 6px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; } .dd-foot .df-txt{font-size:13px; color:var(--fg-mute);} .dd-foot .df-txt b{color:var(--fg); font-weight:600;} /* industries dropdown (single column) */ .dd-industries{width:300px;} .dd-industries .dd-grid{grid-template-columns:1fr;} .dd-industries .dd-link{align-items:center; padding:11px 14px;} .dd-industries .dd-link .dt{margin-bottom:0;} .dd-tag{ margin-right:auto; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--brand-mint-deep); background:rgba(93,211,201,.14); padding:3px 8px; border-radius:var(--radius-pill); } html[data-theme="dark"] .dd-tag{color:var(--brand-mint);} /* ============================================================ DRAWER ACCORDION (mobile submenus) ============================================================ */ .m-acc{border-bottom:1px solid var(--line);} .m-acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font-size:17px; font-weight:500; text-align:right; } .m-acc-head .chev{width:18px; height:18px; color:var(--fg-faint); transition:transform .3s var(--ease);} .m-acc.open .m-acc-head .chev{transform:rotate(180deg);} .m-acc-body{overflow:hidden; height:0;} .m-acc-body-inner{padding:2px 4px 14px; display:flex; flex-direction:column; gap:2px;} .m-sub{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; font-size:15px; color:var(--fg-mute); transition:background .2s; } .m-sub:hover, .m-sub:active{background:var(--bg-soft); color:var(--fg);} .m-sub .ms-ico{width:20px; height:20px; flex-shrink:0; color:var(--brand-mint-deep);} html[data-theme="dark"] .m-sub .ms-ico{color:var(--brand-mint);} /* ============================================================ AURORA / GRID BACKDROP (shared) ============================================================ */ .aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;} .aurora .blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.9;} .aurora .b1{width:620px; height:620px; top:-220px; right:-120px; background:radial-gradient(circle, var(--aurora-2), transparent 68%);} .aurora .b2{width:560px; height:560px; top:60px; left:-180px; background:radial-gradient(circle, var(--aurora-1), transparent 68%);} .dotgrid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px); background-size:34px 34px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 78%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 78%); } /* ============================================================ HERO ============================================================ */ .hero{position:relative; padding:90px 0 60px; overflow:hidden;} .hero-net{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.9;} .hero-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;} .hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:34px; white-space:nowrap; padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--bg-card); font-size:13px; color:var(--fg-mute); font-family:var(--mono); letter-spacing:.04em; } .hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-mint); box-shadow:0 0 0 4px rgba(93,211,201,.22); } .hero h1{ margin:0 auto; font-weight:800; font-size:clamp(34px, 5vw, 66px); line-height:1.06; letter-spacing:-.03em; max-width:22ch; } .hero h1 .grad{ background:linear-gradient(108deg,var(--brand-deep) 0%,var(--brand-mid) 32%,var(--brand-mint-deep) 64%,var(--brand-mint) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* SplitText reveal scaffolding */ .reveal-line{display:block; overflow:hidden; padding:.12em 0 .2em; margin:-.12em 0 -.2em;} .reveal-line .line-in{display:inline-block; white-space:nowrap; will-change:transform;} .split-word{display:inline-block; will-change:transform;} .hero .lede{ font-size:clamp(18px,2vw,22px); color:var(--fg-mute); max-width:58ch; margin:36px auto 38px; line-height:1.6; } .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center;} .hero-meta{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:34px; font-size:13.5px; color:var(--fg-faint); } .hero-meta span{display:inline-flex; align-items:center; gap:8px;} .hero-meta .tick{color:var(--brand-mint-deep);} html[data-theme="dark"] .hero-meta .tick{color:var(--brand-mint);} /* hero workflow panel */ .hp{ position:relative; z-index:2; margin:78px auto 0; max-width:1120px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--line); box-shadow:0 40px 120px -50px rgba(20,22,40,.4), 0 2px 0 rgba(255,255,255,.04) inset; overflow:hidden; } .hp-bar{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--line); background:var(--bg-soft); } .hp-bar .dots{display:flex; gap:7px;} .hp-bar .dots span{width:11px; height:11px; border-radius:50%; background:var(--line-strong);} .hp-bar .dots span:nth-child(1){background:var(--rose);} .hp-bar .dots span:nth-child(2){background:var(--warm);} .hp-bar .dots span:nth-child(3){background:var(--brand-mint);} .hp-bar .addr{margin-right:auto; font-family:var(--mono); font-size:12.5px; color:var(--fg-faint);} .hp-bar .live{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--brand-mint-deep);} html[data-theme="dark"] .hp-bar .live{color:var(--brand-mint);} .hp-bar .live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand-mint); box-shadow:0 0 10px var(--brand-mint);} .hp-body{position:relative; padding:46px 40px 34px;} .hp-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;} .hp-svg path{fill:none; stroke:var(--brand-mint); stroke-width:2; opacity:.55;} .hp-pulse{fill:var(--brand-mint);} .hp-row{position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:60px; align-items:center;} .hp-node{ background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:22px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .hp-node:hover{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(20,22,40,.3);} .hp-node .ico{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--bg-card); border:1px solid var(--line); } .hp-node .nm{font-size:15px; font-weight:600;} .hp-node .sub{font-family:var(--mono); font-size:10px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.14em;} .hp-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:30px; padding-top:20px; border-top:1px dashed var(--line); font-family:var(--mono); font-size:11.5px; color:var(--fg-faint); flex-wrap:wrap; } /* ============================================================ MARQUEE / INTEGRATIONS ============================================================ */ .marquee-sec{padding:54px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;} .marquee-sec .lbl{text-align:center; font-size:13px; color:var(--fg-faint); margin-bottom:28px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;} .marquee{display:flex; width:100%; max-width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);} .marquee-track{display:flex; gap:64px; padding-left:64px; flex-shrink:0; will-change:transform;} .marquee-track span{font-size:26px; font-weight:600; color:var(--fg-faint); letter-spacing:-.01em; white-space:nowrap; transition:color .2s;} .marquee:hover .marquee-track span{color:var(--fg-mute);} /* ============================================================ هوش‌یار INTRO (typewriter) ============================================================ */ .hooshyar-sec{position:relative; overflow:hidden; text-align:center;} .hooshyar-inner{position:relative; z-index:2; max-width:940px; margin:0 auto; display:flex; flex-direction:column; align-items:center;} .hooshyar-sec .kicker{justify-content:center; margin-bottom:26px;} .hy-title{ margin:0; font-weight:800; letter-spacing:-.03em; font-size:clamp(34px,5.4vw,70px); line-height:1.08; } .tw-line{ display:inline-flex; align-items:center; justify-content:center; min-height:1.18em; margin-top:.12em; } .tw-line .grad{text-wrap:balance;} .tw-caret{ flex-shrink:0; display:inline-block; width:3px; height:.86em; border-radius:2px; margin-right:9px; background:var(--brand-mint-deep); animation:tw-blink 1.05s steps(1) infinite; } html[data-theme="dark"] .tw-caret{background:var(--brand-mint);} @keyframes tw-blink{50%{opacity:0;}} .hy-lede{margin:30px auto 38px; font-size:clamp(17px,2vw,20px); color:var(--fg-mute); max-width:58ch; line-height:1.68;} .hy-note{margin-top:20px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--fg-faint);} .h-orb{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:min(560px,72vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 36%, var(--brand-mint), var(--brand-mint-deep) 56%, transparent 72%); filter:blur(70px); opacity:.2; z-index:0; pointer-events:none; } html[data-theme="dark"] .h-orb{opacity:.26;} /* ============================================================ SECTIONS (generic) ============================================================ */ .section{position:relative; padding:130px 0;} .section-head{max-width:760px; margin-bottom:62px;} .section-head h2{ margin:0; font-weight:800; font-size:clamp(34px,5vw,64px); line-height:1.04; letter-spacing:-.03em; } .section-head h2 .grad{ background:linear-gradient(108deg,var(--brand-deep),var(--brand-mint-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .section-head p{margin:22px 0 0; font-size:19px; color:var(--fg-mute); max-width:60ch;} /* ============================================================ STATS BAND ============================================================ */ .stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .stats .grid{display:grid; grid-template-columns:repeat(4,1fr);} .stat{padding:64px 34px; border-left:1px solid var(--line);} .stat:last-child{border-left:none;} .stat .big{ font-family:var(--serif); font-weight:600; font-size:clamp(56px,7vw,92px); line-height:1; letter-spacing:-.01em; color:var(--fg); display:flex; align-items:baseline; gap:4px; font-feature-settings:"lnum"; } .stat .big .suf{font-size:.42em; color:var(--brand-mint-deep);} html[data-theme="dark"] .stat .big .suf{color:var(--brand-mint);} .stat .cap{margin-top:14px; font-size:15px; color:var(--fg-mute); line-height:1.5;} /* ============================================================ PRODUCTS ============================================================ */ .products{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;} .card{ position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; display:flex; flex-direction:column; gap:16px; min-height:300px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .card::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(420px 220px at 100% 0%, var(--card-glow,var(--aurora-1)), transparent 70%); pointer-events:none; } .card:hover{transform:translateY(-6px); box-shadow:0 30px 70px -34px rgba(20,22,40,.35); border-color:var(--line-strong);} .card:hover::before{opacity:1;} .card .num-idx{position:absolute; top:30px; left:34px; font-family:var(--mono); font-size:12px; color:var(--fg-faint); letter-spacing:.1em;} .card .ico{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line);} .card h3{margin:0; font-size:25px; font-weight:700; letter-spacing:-.02em;} .card p{margin:0; color:var(--fg-mute); font-size:15.5px; line-height:1.62;} .card .arrow{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--fg);} .card .arrow .ar{transition:transform .3s var(--ease);} .card:hover .arrow .ar{transform:translateX(-6px);} .card.span-3{grid-column:span 3;} .card.span-2{grid-column:span 2;} .card.span-6{grid-column:span 6;} /* hero product (dark feature card, stays dark in both themes) */ .card.feature{ grid-column:span 3; color:#eef0ff; background:linear-gradient(140deg,#0c1130 0%,#15205a 55%,#1c2f7a 100%); border-color:rgba(255,255,255,.08); } .card.feature h3, .card.feature .arrow{color:#fff;} .card.feature p{color:rgba(255,255,255,.72);} .card.feature .ico{background:rgba(93,211,201,.16); border-color:rgba(93,211,201,.25); color:var(--brand-mint);} .card.feature .num-idx{color:rgba(255,255,255,.4);} /* full-width flagship feature card */ .card.feature.span-6{grid-column:span 6; padding:52px 48px;} .card.feature.span-6 h3{font-size:clamp(30px,3.6vw,44px);} .card.feature.span-6 p{max-width:64ch; font-size:16.5px;} .card.feature.span-6 .tag{color:#ffce9b;} .card .ico.c-mint{color:var(--brand-mint-deep);} html[data-theme="dark"] .card .ico.c-mint{color:var(--brand-mint);} .card .ico.c-blue{color:var(--brand-mid);} .card .ico.c-warm{color:#c47d18;} html[data-theme="dark"] .card .ico.c-warm{color:var(--warm);} .card .ico.c-rose{color:#c44256;} html[data-theme="dark"] .card .ico.c-rose{color:var(--rose);} .card .tag{ position:absolute; top:30px; left:34px; display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--radius-pill); background:rgba(255,184,107,.18); color:#a85f0a; font-size:12px; font-weight:600; font-family:var(--mono); } html[data-theme="dark"] .card .tag{color:var(--warm);} /* ============================================================ هوش‌یار FEATURE ============================================================ */ .feature-sec{position:relative; overflow:hidden;} .feature-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:center;} .feature-text h3{margin:0 0 22px; font-size:clamp(30px,4vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.03em;} .feature-text h3 .grad{background:linear-gradient(108deg,var(--brand-deep),var(--brand-mint-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .feature-text>p{font-size:18px; color:var(--fg-mute); line-height:1.65; max-width:54ch;} .bullets{display:flex; flex-direction:column; gap:22px; margin:34px 0;} .bullets .b{display:flex; gap:14px; align-items:flex-start;} .bullets .b>div{display:flex; flex-direction:column; gap:4px;} .bullets .check{ flex-shrink:0; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-mint),var(--brand-mint-deep)); color:#052e2a; font-size:14px; font-weight:700; margin-top:2px; } .bullets b{font-size:16.5px; line-height:1.4;} .bullets span{color:var(--fg-mute); font-size:15px; line-height:1.55;} .feature-viz{ position:relative; min-height:420px; border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden; background: radial-gradient(ellipse at 30% 26%, var(--aurora-1), transparent 60%), radial-gradient(ellipse at 78% 78%, var(--aurora-2), transparent 60%), var(--bg-card); display:flex; flex-direction:column; justify-content:center; gap:18px; padding:40px; } .feature-viz .orb{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:230px; height:230px; border-radius:50%; background:radial-gradient(circle at 38% 34%, var(--brand-mint), var(--brand-mint-deep) 60%, transparent 72%); filter:blur(8px); opacity:.5; z-index:0; } .chat{ position:relative; z-index:2; max-width:82%; padding:18px 20px; border-radius:18px; background:var(--bg); border:1px solid var(--line); font-size:15.5px; line-height:1.55; box-shadow:0 18px 40px -26px rgba(20,22,40,.4); } .chat .who{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:7px;} .chat.me{align-self:flex-start;} .chat.ai{align-self:flex-end; background:linear-gradient(135deg,var(--brand-mint),var(--brand-mint-deep)); color:#052e2a; border-color:transparent;} .chat.ai .who{color:rgba(5,46,42,.6);} /* ============================================================ TEMPLATES ============================================================ */ .tpl-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .tpl{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .tpl:hover{transform:translateY(-6px); box-shadow:0 28px 60px -32px rgba(20,22,40,.34); border-color:var(--line-strong);} .tpl .preview{ position:relative; aspect-ratio:16/7; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:11px; background: radial-gradient(circle at 26% 24%, var(--aurora-1), transparent 56%), radial-gradient(circle at 80% 82%, var(--aurora-2), transparent 56%), var(--bg-soft); border-bottom:1px solid var(--line); } .tpl .preview .p{height:9px; border-radius:5px; background:var(--line-strong); opacity:.9;} .tpl .preview .p.l{width:84%;} .tpl .preview .p.m{width:62%;} .tpl .preview .p.s{width:40%;} .tpl .body{padding:24px;} .tpl h4{margin:0 0 10px; font-size:16.5px; font-weight:600; line-height:1.5; letter-spacing:-.01em; text-wrap:pretty;} .tpl .meta{font-family:var(--mono); font-size:11.5px; color:var(--fg-faint); letter-spacing:.02em;} /* ============================================================ PRICING ============================================================ */ .pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;} .plan{padding:46px 38px; border-left:1px solid var(--line); position:relative; display:flex; flex-direction:column;} .plan:last-child{border-left:none;} .plan.featured{background:var(--bg-card);} html[data-theme="dark"] .plan.featured{background:linear-gradient(160deg,var(--bg-card),#191529);} .plan .ribbon{position:absolute; top:20px; left:38px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-mint-deep);} html[data-theme="dark"] .plan .ribbon{color:var(--brand-mint);} .plan .name{font-size:16px; color:var(--fg-mute); margin-bottom:18px; font-weight:500;} .plan .price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-height:64px;} .plan .price .n{font-family:var(--serif); font-weight:600; font-size:52px; line-height:1; color:var(--fg); font-feature-settings:"lnum";} .plan .price .n.mint{color:var(--brand-mint-deep);} html[data-theme="dark"] .plan .price .n.mint{color:var(--brand-mint);} .plan .price .strike{font-family:var(--serif); font-size:26px; color:var(--fg-faint); text-decoration:line-through;} .plan .price .u{font-size:14px; color:var(--fg-faint);} .plan .save{display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--brand-mint-deep);} html[data-theme="dark"] .plan .save{color:var(--brand-mint);} .plan ul{list-style:none; padding:0; margin:26px 0 30px; display:flex; flex-direction:column; gap:13px;} .plan li{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--fg-mute);} .plan li::before{content:"✓"; color:var(--brand-mint-deep); font-weight:700; flex-shrink:0;} html[data-theme="dark"] .plan li::before{color:var(--brand-mint);} .plan li.off{color:var(--fg-faint); opacity:.6;} .plan li.off::before{content:"—"; color:var(--fg-faint);} .plan .btn{margin-top:auto; justify-content:center;} /* ============================================================ FAQ ============================================================ */ .faq{max-width:880px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4px; text-align:right; font-size:19px; font-weight:600; letter-spacing:-.01em; } .faq-q .ic{ flex-shrink:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong); font-size:18px; color:var(--fg-mute); transition:transform .35s var(--ease), background .25s, color .25s; } .faq-item.open .faq-q .ic{transform:rotate(45deg); background:var(--fg); color:var(--bg); border-color:var(--fg);} .faq-a{overflow:hidden; height:0;} .faq-a-inner{padding:0 4px 30px; color:var(--fg-mute); font-size:16.5px; line-height:1.7; max-width:70ch;} /* ============================================================ BIG CTA ============================================================ */ .cta-sec{padding:30px 0 130px;} .cta{ position:relative; overflow:hidden; border-radius:32px; text-align:center; padding:96px 40px; color:#eef0ff; background:linear-gradient(150deg,#0a0d28 0%,#152057 50%,#0c2e2b 120%); border:1px solid rgba(255,255,255,.08); } .cta .aurora .b1{background:radial-gradient(circle, rgba(104,134,255,.4), transparent 65%);} .cta .aurora .b2{background:radial-gradient(circle, rgba(93,211,201,.35), transparent 65%);} .cta .kicker{justify-content:center;} .cta .kicker .idx{color:var(--brand-mint);} .cta .kicker .lbl{color:rgba(255,255,255,.6);} .cta .kicker .rule{background:rgba(255,255,255,.2);} .cta h2{position:relative; z-index:2; margin:0 auto; font-size:clamp(34px,5.5vw,72px); font-weight:800; line-height:1.04; letter-spacing:-.03em; max-width:18ch;} .cta h2 .reveal-line{display:inline-block; overflow:hidden; vertical-align:top;} .cta p{position:relative; z-index:2; margin:24px auto 38px; font-size:19px; color:rgba(255,255,255,.74); max-width:54ch;} .cta .hero-ctas{position:relative; z-index:2; justify-content:center;} .cta .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18);} .cta .btn-ghost:hover{background:rgba(255,255,255,.14);} /* ============================================================ FOOTER ============================================================ */ footer{background:var(--bg-soft); border-top:1px solid var(--line); padding:80px 0 40px;} html[data-theme="dark"] footer{background:#06070f;} .foot{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.25fr; gap:40px; padding-bottom:54px; border-bottom:1px solid var(--line);} .foot-brand p{color:var(--fg-mute); font-size:15px; line-height:1.65; margin:18px 0 22px; max-width:38ch;} .enamad{display:inline-flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card);} .enamad .e-mark{width:40px; height:40px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-deep),var(--brand-mint)); color:#fff; font-family:var(--mono); font-size:9px; font-weight:700; text-align:center; line-height:1.1;} .enamad .e-t{display:block; font-size:13px; font-weight:600;} .enamad .e-sub{display:block; font-size:11.5px; color:var(--fg-faint);} .foot-col h5{margin:0 0 18px; font-size:13px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);} .foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;} .foot-col a{color:var(--fg-mute); font-size:15px; transition:color .2s;} .foot-col a:hover{color:var(--fg);} .foot-contact .row{margin-bottom:16px;} .foot-contact .lbl{font-size:12px; color:var(--fg-faint); margin-bottom:3px;} .foot-contact .val{font-size:15.5px; font-weight:500;} .foot-bot{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:30px; flex-wrap:wrap; font-size:13px; color:var(--fg-faint);} .foot-bot-links{display:flex; gap:22px;} .foot-bot-links a:hover{color:var(--fg);} /* ============================================================ MOBILE DRAWER ============================================================ */ .drawer{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none;} .drawer.open{visibility:visible; pointer-events:auto;} .drawer-bg{position:absolute; inset:0; background:rgba(6,7,15,.5); opacity:0; transition:opacity .3s;} .drawer.open .drawer-bg{opacity:1;} .drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(86vw,360px); background:var(--bg); border-left:1px solid var(--line); padding:24px; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column;} .drawer.open .drawer-panel{transform:translateX(0);} .drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;} .m-link{display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--line); font-size:17px; font-weight:500;} .m-link .ar{color:var(--fg-faint);} .m-ctas{display:flex; flex-direction:column; gap:10px; margin-top:24px;} .m-ctas .btn{justify-content:center;} /* ============================================================ REVEAL DEFAULTS (JS toggles .is-in) ============================================================ */ [data-reveal]{opacity:0;} .no-anim [data-reveal]{opacity:1 !important; transform:none !important;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .products{grid-template-columns:repeat(4,1fr);} .card.feature,.card.span-3{grid-column:span 4;} .card.feature.span-6{grid-column:span 4;} .card.span-2{grid-column:span 2;} .tpl-grid{grid-template-columns:repeat(2,1fr);} .feature-grid{grid-template-columns:1fr; gap:46px;} .stats .grid{grid-template-columns:repeat(2,1fr);} .stat:nth-child(2){border-left:none;} .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line);} .foot{grid-template-columns:2fr 1fr 1fr; gap:36px;} .foot-brand{grid-column:span 3;} .dd-features{width:min(560px, 78vw);} } /* collapse full nav into the hamburger before the links/CTAs run out of room */ @media (max-width:1024px){ .nav-links{display:none;} .nav-right .btn{display:none;} .mobile-toggle{display:grid;} } @media (max-width:860px){ .hp-row{grid-template-columns:1fr; gap:30px;} .hp-svg{display:none;} .foot{grid-template-columns:1fr 1fr; gap:36px;} .foot-brand{grid-column:span 2;} } @media (max-width:640px){ .wrap{padding:0 22px;} .section{padding:84px 0;} .marquee-track{gap:42px; padding-left:42px;} .marquee-track span{font-size:21px;} .products{grid-template-columns:1fr;} .card.feature,.card.span-3,.card.span-2,.card.span-6,.card.feature.span-6{grid-column:span 1;} .tpl-grid{grid-template-columns:1fr;} .pricing{grid-template-columns:1fr;} .plan{border-left:none; border-top:1px solid var(--line);} .plan:first-child{border-top:none;} .stats .grid{grid-template-columns:1fr;} .stat{border-left:none; border-top:1px solid var(--line);} .stat:first-child{border-top:none;} .foot{grid-template-columns:1fr;} .foot-brand{grid-column:span 1;} .cta{padding:64px 24px; border-radius:24px;} } /* reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition-duration:.01ms !important;} [data-reveal]{opacity:1 !important; transform:none !important;} } /* ============================================================ HOME PAGE — bespoke sections (khodkasb index) ============================================================ */ /* hero typed variable line */ .hero-typed{display:block; position:relative; z-index:2; margin-top:8px;} .hero-typed .tw-line{ font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(26px,4vw,50px); line-height:1.14; color:var(--fg-faint); } /* typed text keeps the hero's gradient — with a solid-color fallback so it is NEVER invisible if background-clip:text isn't honored */ #twText{ font-weight:800; color:var(--brand-mint-deep); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ #twText{ background:linear-gradient(108deg,var(--brand-deep) 0%,var(--brand-mid) 32%,var(--brand-mint-deep) 64%,var(--brand-mint) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } } html[data-theme="dark"] #twText{ color:var(--brand-mint); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ html[data-theme="dark"] #twText{ background:linear-gradient(108deg,var(--brand-mid),var(--brand-mint)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } } /* section background tints / rhythm */ .sec-warm{background:radial-gradient(ellipse 78% 56% at 50% 0%, rgba(255,122,138,.07), transparent 66%);} .sec-cool{background:radial-gradient(ellipse 86% 64% at 50% 100%, rgba(93,211,201,.08), transparent 68%);} .sec-soft{background:var(--bg-soft);} .section-head.center{margin-left:auto; margin-right:auto; text-align:center; max-width:820px;} .section-head.center .kicker{justify-content:center;} .section-head.center p{margin-left:auto; margin-right:auto;} .head-cta{display:flex; justify-content:center; margin-top:54px;} /* ---- TRUST BAR (social proof) ---- */ .trustbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft);} .trustbar .wrap{display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; padding-top:0; padding-bottom:0;} .trustbar .ti{position:relative; display:flex; align-items:center; gap:11px; padding:18px 30px; font-size:14.5px; color:var(--fg-mute); font-weight:500;} .trustbar .ti:not(:first-child)::before{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:22px; width:1px; background:var(--line-strong);} .trustbar .ti svg{width:20px; height:20px; flex-shrink:0; color:var(--brand-mint-deep);} html[data-theme="dark"] .trustbar .ti svg{color:var(--brand-mint);} /* ---- PROBLEM cards (warm tension) ---- */ .problem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .pcard{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:15px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .pcard:hover{transform:translateY(-5px); box-shadow:0 26px 56px -32px rgba(196,66,86,.3); border-color:rgba(255,122,138,.32);} .pcard .pico{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; color:#c44256; background:linear-gradient(140deg, rgba(255,184,107,.2), rgba(255,122,138,.18)); border:1px solid rgba(255,122,138,.22); } html[data-theme="dark"] .pcard .pico{color:var(--rose);} .pcard .pico svg{width:26px; height:26px;} .pcard h4{margin:0; font-size:18.5px; font-weight:700; letter-spacing:-.015em; line-height:1.4;} .pcard p{margin:0; font-size:14.5px; color:var(--fg-mute); line-height:1.6;} /* ---- generic UI dashboard mock ---- */ .mock{ border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card); border:1px solid var(--line); box-shadow:0 40px 110px -50px rgba(20,22,40,.42), 0 2px 0 rgba(255,255,255,.04) inset; } .mock-bar{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-soft);} .mock-bar .d{width:11px; height:11px; border-radius:50%; background:var(--line-strong);} .mock-bar .d.r{background:var(--rose);} .mock-bar .d.w{background:var(--warm);} .mock-bar .d.g{background:var(--brand-mint);} .mock-bar .addr{margin-right:auto; font-family:var(--mono); font-size:12px; color:var(--fg-faint);} .mock-body{display:grid; grid-template-columns:64px 1fr; min-height:300px;} .mock-side{border-left:1px solid var(--line); background:var(--bg-soft); display:flex; flex-direction:column; align-items:center; gap:16px; padding:18px 0;} .mock-side .ms-logo{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; background:linear-gradient(135deg,var(--brand-deep),var(--brand-mint));} .mock-side .ms-i{width:26px; height:26px; border-radius:8px; background:var(--line-strong); opacity:.5;} .mock-side .ms-i.act{background:var(--brand-mint-deep); opacity:.85;} .mock-main{padding:22px;} .mock-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;} .mtile{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px;} .mtile .mt-k{display:block; font-size:11.5px; color:var(--fg-faint); margin-bottom:8px;} .mtile .mt-v{display:block; font-family:var(--serif); font-weight:700; font-size:30px; line-height:1; color:var(--fg); font-feature-settings:"lnum";} .mtile .mt-v small{font-family:var(--font); font-size:14px; color:var(--fg-faint);} .mock-rows{display:flex; flex-direction:column; gap:10px;} .mrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;} .mrow .mr-t{font-size:13.5px; color:var(--fg); font-weight:500;} .mrow .mr-b{font-family:var(--mono); font-size:10.5px; padding:4px 9px; border-radius:99px; color:var(--fg-faint); background:var(--bg-card); border:1px solid var(--line);} .mrow .mr-b.ok{color:var(--brand-mint-deep); border-color:rgba(93,211,201,.4);} .mrow .mr-b.warn{color:#c47d18; border-color:rgba(255,184,107,.45);} html[data-theme="dark"] .mrow .mr-b.ok{color:var(--brand-mint);} html[data-theme="dark"] .mrow .mr-b.warn{color:var(--warm);} /* ---- FEATURES (6 cards + sample assistant prompt) ---- */ .feat6{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .fcard{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .fcard:hover{transform:translateY(-5px); box-shadow:0 28px 60px -34px rgba(20,22,40,.34); border-color:var(--line-strong);} .fcard .fico{width:56px; height:56px; border-radius:15px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--brand-mint-deep);} html[data-theme="dark"] .fcard .fico{color:var(--brand-mint);} .fcard .fico.c-blue{color:var(--brand-mid);} .fcard .fico.c-warm{color:#c47d18;} html[data-theme="dark"] .fcard .fico.c-warm{color:var(--warm);} .fcard .fico.c-rose{color:#c44256;} html[data-theme="dark"] .fcard .fico.c-rose{color:var(--rose);} .fcard .fico svg{width:26px; height:26px;} .fcard h4{margin:0; font-size:20px; font-weight:700; letter-spacing:-.015em;} .fcard p{margin:0; font-size:14.5px; color:var(--fg-mute); line-height:1.6;} .fchat{ margin-top:6px; display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:13px 13px 4px 13px; background:var(--bg-soft); border:1px solid var(--line); } .fchat .fq{font-size:13px; color:var(--fg); line-height:1.5;} .fchat .ftag{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-mint-deep); display:block; margin-bottom:4px;} html[data-theme="dark"] .fchat .ftag{color:var(--brand-mint);} /* ---- HOW IT WORKS steps ---- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative;} .steps::before{content:""; position:absolute; top:34px; right:14%; left:14%; height:1px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px, transparent 7px 15px); z-index:0;} .step{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; align-items:flex-start;} .step .sn{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:30px; color:#fff; background:linear-gradient(140deg,var(--brand-deep),var(--brand-mint-deep)); box-shadow:0 14px 34px -16px rgba(41,63,138,.6); font-feature-settings:"lnum"; } .step h4{margin:6px 0 0; font-size:21px; font-weight:700; letter-spacing:-.015em;} .step p{margin:0; font-size:15px; color:var(--fg-mute); line-height:1.62;} /* ---- INDUSTRIES ---- */ .ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} .ind{ position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; min-height:236px; display:flex; flex-direction:column; gap:13px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .ind::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); pointer-events:none; background:radial-gradient(360px 200px at 100% 0%, var(--aurora-1), transparent 70%);} .ind:hover{transform:translateY(-6px); box-shadow:0 30px 66px -36px rgba(20,22,40,.36); border-color:var(--line-strong);} .ind:hover::before{opacity:1;} .ind .iico{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--brand-mint-deep);} html[data-theme="dark"] .ind .iico{color:var(--brand-mint);} .ind .iico.c-rose{color:#c44256;} html[data-theme="dark"] .ind .iico.c-rose{color:var(--rose);} .ind .iico.c-blue{color:var(--brand-mid);} .ind .iico.c-warm{color:#c47d18;} html[data-theme="dark"] .ind .iico.c-warm{color:var(--warm);} .ind .iico svg{width:25px; height:25px;} .ind h4{margin:4px 0 0; font-size:19px; font-weight:700; letter-spacing:-.01em;} .ind p{margin:0; font-size:14px; color:var(--fg-mute); line-height:1.55;} .ind .ilink{margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--fg);} .ind .ilink .ar{transition:transform .3s var(--ease);} .ind:hover .ilink .ar{transform:translateX(-5px);} /* ---- LIVE DEMO ---- */ .demo-wrap{ position:relative; overflow:hidden; border-radius:32px; border:1px solid var(--line); padding:64px; background: radial-gradient(ellipse 60% 80% at 12% 20%, var(--aurora-1), transparent 60%), radial-gradient(ellipse 60% 80% at 88% 90%, var(--aurora-2), transparent 60%), var(--bg-card); } .demo-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;} .demo-text h2{margin:0; font-size:clamp(30px,4vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.03em;} .demo-text h2 .grad{background:linear-gradient(108deg,var(--brand-deep),var(--brand-mint-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .demo-text p{margin:22px 0 30px; font-size:17px; color:var(--fg-mute); line-height:1.66; max-width:50ch;} .phone{position:relative; width:300px; margin:0 auto; border-radius:42px; padding:13px; background:linear-gradient(160deg,#1a1d33,#0a0c16); box-shadow:0 50px 100px -40px rgba(20,22,40,.6); border:1px solid rgba(255,255,255,.08);} .phone-note{position:absolute; top:24px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0a0c16; border-radius:0 0 16px 16px; z-index:3;} .phone-scr{position:relative; border-radius:30px; overflow:hidden; background:var(--bg); height:540px; display:flex; flex-direction:column;} .ph-top{display:flex; align-items:center; gap:12px; padding:40px 18px 14px; border-bottom:1px solid var(--line); background:var(--bg-card);} .ph-top .ph-back{color:var(--fg-faint); font-size:18px;} .ph-top .ph-title{font-weight:700; font-size:15px;} .ph-top .ph-live{margin-right:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--brand-mint-deep);} .ph-top .ph-live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand-mint); box-shadow:0 0 8px var(--brand-mint);} html[data-theme="dark"] .ph-top .ph-live{color:var(--brand-mint);} .ph-chat{flex:1; padding:18px 16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; background: radial-gradient(circle at 80% 8%, var(--aurora-1), transparent 50%), var(--bg);} .pb{max-width:82%; padding:12px 15px; font-size:13.5px; line-height:1.55; border-radius:16px;} .pb.me{align-self:flex-start; background:var(--bg-card); border:1px solid var(--line); border-bottom-right-radius:5px; color:var(--fg);} .pb.ai{align-self:flex-end; background:linear-gradient(135deg,var(--brand-mint),var(--brand-mint-deep)); color:#052e2a; border-bottom-left-radius:5px;} /* ---- COMPARISON ---- */ .compare{max-width:940px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card);} .crow{display:grid; grid-template-columns:1.15fr 1fr 1fr;} .crow:not(:last-child){border-bottom:1px solid var(--line);} .crow>div{padding:20px 24px; display:flex; align-items:center; gap:11px; font-size:15px;} .crow .cl{font-weight:700; color:var(--fg); font-family:var(--display);} .crow .old{color:var(--fg-faint); background:var(--bg-soft);} .crow .neo{color:var(--fg); font-weight:600; background:linear-gradient(180deg, rgba(93,211,201,.1), rgba(93,211,201,.05));} .crow .old svg, .crow .neo svg{width:19px; height:19px; flex-shrink:0;} .crow .old svg{color:var(--fg-faint);} .crow .neo svg{color:var(--brand-mint-deep);} html[data-theme="dark"] .crow .neo svg{color:var(--brand-mint);} .crow.head>div{padding-top:22px; padding-bottom:22px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint);} .crow.head .neo{color:var(--brand-mint-deep); font-weight:700; border-bottom:2px solid var(--brand-mint);} html[data-theme="dark"] .crow.head .neo{color:var(--brand-mint);} /* ---- TESTIMONIALS ---- */ .tcards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .tcard{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; display:flex; flex-direction:column; gap:18px;} .tcard .stars{color:var(--warm); font-size:14px; letter-spacing:3px;} .tcard .qt{font-size:16px; line-height:1.74; color:var(--fg); flex:1; text-wrap:pretty;} .tcard .who{display:flex; align-items:center; gap:13px; padding-top:6px; border-top:1px solid var(--line);} .tcard .av{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:17px; color:#fff; background:linear-gradient(135deg,var(--brand-deep),var(--brand-mint)); flex-shrink:0;} .tcard .who .nm{font-weight:600; font-size:15px;} .tcard .who .rl{font-size:12.5px; color:var(--fg-faint);} /* pricing footnote + faq footer */ .price-note{text-align:center; margin-top:26px; font-size:13px; color:var(--fg-faint);} .faq-foot{text-align:center; margin-top:40px; font-size:15.5px; color:var(--fg-mute);} .faq-foot a{color:var(--brand-mint-deep); font-weight:600;} html[data-theme="dark"] .faq-foot a{color:var(--brand-mint);} /* ---- responsive for home sections ---- */ @media (max-width:1080px){ .problem-grid{grid-template-columns:repeat(2,1fr);} .feat6{grid-template-columns:repeat(2,1fr);} .ind-grid{grid-template-columns:repeat(2,1fr);} .tcards{grid-template-columns:1fr;} .demo-grid{grid-template-columns:1fr; gap:44px;} .steps{grid-template-columns:1fr; gap:26px;} .steps::before{display:none;} .crow{grid-template-columns:1fr 1fr;} .crow .cl{grid-column:span 2; background:var(--bg-soft); font-size:14px; padding-bottom:8px; padding-top:14px;} } @media (max-width:640px){ .problem-grid,.feat6,.ind-grid{grid-template-columns:1fr;} .demo-wrap{padding:32px 22px;} .trustbar .ti{padding:13px 18px; font-size:13.5px;} .trustbar .ti:not(:first-child)::before{display:none;} }