@font-face{font-family:'Cairo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Cairo-arabic-f8c8bb.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1} @font-face{font-family:'Cairo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Cairo-latin-ext-861f39.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cairo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Cairo-latin-c4b7a0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Outfit';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/Outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Outfit';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/Outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/Inter-latin-ext-749a30.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/Inter-latin-1ab1ad.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#15241F;--bg2:#101C18;--bg3:#1B3B36; --on-accent:#15241F;--brand-green:#1B3B36; --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M64 12 116 64 64 116 12 64Z' fill='none' stroke='%23D8BC5E' stroke-opacity='.05'/%3E%3C/svg%3E"); --card:rgba(255,255,255,0.04);--card-hover:rgba(255,255,255,0.07); --border:rgba(255,255,255,0.06);--border-hover:rgba(216,188,94,0.2); --accent:#D8BC5E;--accent-dim:rgba(216,188,94,0.1);--accent-glow:rgba(216,188,94,0.15); --text:#f6f2e7;--text2:#9aa8a2;--text3:#4a5c56; --font:'IBM Plex Sans Arabic','Inter',-apple-system,sans-serif; --ease:cubic-bezier(.25,.1,.25,1);--spring:cubic-bezier(.34,1.56,.64,1); --r-sm:14px;--r-md:22px;--r-lg:30px;--r-full:980px; } [data-theme="light"]{ --bg:#FBF8F1;--bg2:#fff;--bg3:#f5f1e6; --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M64 12 116 64 64 116 12 64Z' fill='none' stroke='%231B3B36' stroke-opacity='.06'/%3E%3C/svg%3E"); --card:rgba(0,0,0,0.02);--card-hover:rgba(0,0,0,0.04); --border:rgba(0,0,0,0.06);--border-hover:rgba(216,188,94,0.25); --text:#15241F;--text2:#5c6b66;--text3:#d6d2c4; --accent:#A68520;--accent-dim:rgba(166,133,32,0.1); --accent-glow:rgba(216,188,94,0.08); } html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden; line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s} body::before{content:'';position:fixed;inset:0;background:var(--pattern) center top/128px 128px;pointer-events:none;z-index:-1} ::selection{background:rgba(216,188,94,.25);color:var(--text)} ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px} [data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)} a{text-decoration:none;color:inherit} button{font-family:inherit;cursor:pointer;border:none;background:none} img{max-width:100%;height:auto;display:block} .ambient-glow{ position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0; overflow:hidden;opacity:.4;transition:opacity .5s; } [data-theme="light"] .ambient-glow{opacity:.15} .ambient-orb{ position:absolute;border-radius:50%;filter:blur(120px); animation:orbFloat 20s ease-in-out infinite;will-change:transform; } .ambient-orb:nth-child(1){ width:600px;height:600px;top:-200px;right:-200px; background:radial-gradient(circle,rgba(216,188,94,.3),transparent 70%); animation-duration:25s; } .ambient-orb:nth-child(2){ width:500px;height:500px;bottom:-150px;left:-150px; background:radial-gradient(circle,rgba(46,110,96,.45),transparent 70%); animation-duration:30s;animation-delay:-5s; } .ambient-orb:nth-child(3){ width:400px;height:400px;top:40%;left:30%; background:radial-gradient(circle,rgba(216,188,94,.15),transparent 70%); animation-duration:22s;animation-delay:-10s; } @keyframes orbFloat{ 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(30px,-40px) scale(1.1)} 50%{transform:translate(-20px,30px) scale(.9)} 75%{transform:translate(40px,20px) scale(1.05)} } .loader{position:fixed;inset:0;background:var(--bg);z-index:9999; display:flex;align-items:center;justify-content:center; transition:opacity .6s,visibility .6s} [data-theme="light"] .loader{background:#FBF8F1} .loader.hidden{opacity:0;visibility:hidden;pointer-events:none} .loader-logo{width:150px;border-radius:50%;opacity:0;transform:scale(.85);animation:loaderIn .8s var(--ease) forwards} @keyframes loaderIn{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}} .nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 clamp(16px,4vw,48px);transition:all .4s var(--ease)} .nav.scrolled{background:rgba(21,36,31,.78);backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);border-bottom:.5px solid var(--border)} [data-theme="light"] .nav.scrolled{background:rgba(250,250,250,.8)} .nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:48px} .nav-logo{display:flex;align-items:center;gap:8px;transition:opacity .3s} .nav-logo:hover{opacity:.7} .nav-logo img{height:36px;width:auto} .logo-dark-mode{display:block} .logo-light-mode{display:none} [data-theme="light"] .logo-dark-mode{display:none} [data-theme="light"] .logo-light-mode{display:block} .nav-links{display:flex;gap:24px;list-style:none} .nav-links a{color:var(--text2);font-size:12px;font-weight:400;transition:color .3s;position:relative;padding:4px 0} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links a.active::after{content:'';position:absolute;bottom:-1px;right:0;left:0;height:1px;background:var(--accent);border-radius:1px} .nav-actions{display:flex;align-items:center;gap:8px} .icon-btn{width:34px;height:34px;border-radius:50%;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:color .3s} .icon-btn:hover{color:var(--text)} .icon-btn svg{width:15px;height:15px} .lang-btn{padding:5px 10px;border-radius:var(--r-full);color:var(--text2);font-size:11px;font-weight:500;transition:color .3s} .lang-btn:hover{color:var(--text)} .btn-order{padding:7px 16px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:600; display:inline-flex;align-items:center;gap:4px;transition:all .3s} .btn-order:hover{transform:scale(1.03);box-shadow:0 4px 20px var(--accent-glow)} .btn-order svg{width:12px;height:12px} [data-theme="light"] .btn-order{background:#15241F;color:#fff} .mobile-menu-btn{display:none;width:34px;height:34px;flex-direction:column;align-items:center;justify-content:center;gap:5px} .mobile-menu-btn span{width:16px;height:1.5px;background:var(--text);border-radius:2px;transition:all .3s} .mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)} .mobile-menu-btn.active span:nth-child(2){opacity:0} .mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)} .mobile-menu{position:fixed;top:0;right:-100%;width:100%;max-width:340px;height:100dvh; background:rgba(21,36,31,.97);backdrop-filter:blur(60px);z-index:1100; padding:90px 28px 40px;transition:right .5s var(--ease);border-left:.5px solid var(--border);overflow-y:auto} [data-theme="light"] .mobile-menu{background:rgba(255,255,255,.97)} .mobile-menu.active{right:0} .mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1050; opacity:0;visibility:hidden;transition:all .4s} .mobile-menu-overlay.active{opacity:1;visibility:visible} .mobile-menu a{display:flex;align-items:center;gap:12px;color:var(--text);font-size:16px; font-weight:600;padding:14px 0;border-bottom:.5px solid var(--border);transition:color .3s} .mobile-menu a:hover{color:var(--accent)} .mobile-menu a svg{width:16px;height:16px;color:var(--accent)} .page{display:none;min-height:100vh;position:relative;z-index:1} .page.active{display:block;animation:pageIn .7s var(--ease)} @keyframes pageIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} section{padding:clamp(70px,10vw,140px) clamp(16px,5vw,56px);position:relative} .container{max-width:1240px;margin:0 auto;position:relative} .section-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-full); border:.5px solid var(--border);background:var(--card);font-size:11px;font-weight:600; color:var(--accent);margin-bottom:16px;backdrop-filter:blur(10px)} .section-badge svg{width:11px;height:11px} [data-theme="light"] .section-badge{color:#8a6a12;background:rgba(216,188,94,.06)} .section-title{font-size:clamp(32px,5.5vw,60px);font-weight:700;line-height:1.06; margin-bottom:14px;letter-spacing:-.04em} .gradient-text{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important} [data-theme="light"] .gradient-text{color:#8a6a12!important;-webkit-text-fill-color:#8a6a12!important} .section-desc{font-size:clamp(15px,1.8vw,19px);color:var(--text2);max-width:560px;line-height:1.5} .text-center{text-align:center} .text-center .section-desc{margin:0 auto} .hero{min-height:calc(100dvh / var(--z,1));display:flex;align-items:center;padding-top:90px;padding-bottom:50px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} .hero-badges{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap} .hero-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-full); border:.5px solid var(--border);background:var(--card);font-size:11px;font-weight:500; backdrop-filter:blur(10px);opacity:0;animation:fadeUp .7s var(--ease) .2s forwards} .hero-badge .pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite} .hero-badge.fast{color:var(--accent)} .hero-badge svg{width:11px;height:11px} .hero-title{font-size:clamp(36px,6vw,68px);font-weight:700;line-height:1.04;margin-bottom:16px; letter-spacing:-.04em;opacity:0;animation:fadeUp .7s var(--ease) .3s forwards} .hero-subtitle{font-size:clamp(16px,1.8vw,19px);color:var(--accent);font-weight:600;margin-bottom:10px; opacity:0;animation:fadeUp .7s var(--ease) .4s forwards} [data-theme="light"] .hero-subtitle{color:#8a6a12} .hero-desc{font-size:clamp(14px,1.5vw,16px);color:var(--text2);line-height:1.55;margin-bottom:28px; max-width:460px;opacity:0;animation:fadeUp .7s var(--ease) .5s forwards} .hero-buttons{display:flex;gap:10px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s var(--ease) .6s forwards} .btn-primary{padding:13px 26px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent); font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px; transition:all .35s var(--ease);border:none;position:relative;overflow:hidden} .btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.15),transparent); opacity:0;transition:opacity .3s} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow)} .btn-primary:hover::after{opacity:1} .btn-primary svg{width:15px;height:15px} [data-theme="light"] .btn-primary{background:#15241F;color:#fff} [data-theme="light"] .btn-primary:hover{background:var(--accent);color:var(--on-accent)} .btn-secondary{padding:13px 26px;border-radius:var(--r-full);background:transparent;color:var(--accent); font-size:14px;font-weight:600;border:.5px solid var(--border);display:inline-flex;align-items:center;gap:6px; transition:all .35s var(--ease)} .btn-secondary:hover{border-color:var(--accent);background:var(--accent-dim);transform:translateY(-2px)} .btn-secondary svg{width:15px;height:15px} .hero-visual{position:relative;opacity:0;animation:fadeUp .9s var(--ease) .7s forwards} .mockup-container{position:relative;width:100%;height:520px;display:flex;justify-content:center;align-items:center; perspective:1200px} .phone-mockup{position:absolute;width:230px;height:470px;background:#000;border-radius:38px; border:2px solid rgba(255,255,255,.08);overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.05),0 0 60px var(--accent-glow); transition:all .6s var(--ease);will-change:transform} .phone-mockup:hover{z-index:10!important} .phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%); width:85px;height:24px;background:#000;border-radius:12px;z-index:10} .phone-screen{width:100%;height:100%;background:#0a0a0a;overflow:hidden} .phone-screen img{width:100%;height:100%;object-fit:cover} .phone-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center; justify-content:center;padding:50px 16px 16px;text-align:center} .phone-placeholder-icon{width:50px;height:50px;border-radius:14px;background:var(--accent); display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--on-accent)} .phone-placeholder-icon svg{width:24px;height:24px} .phone-placeholder h4{font-size:13px;font-weight:700;color:#f5f1e6;margin-bottom:5px} .phone-placeholder p{font-size:10px;color:#86868b;line-height:1.4} .phone-mockup.phone-left{z-index:2;transform:translateX(140px) translateY(36px) scale(.87) rotateY(8deg) rotate(-5deg)} .phone-mockup.phone-center{z-index:3;transform:translateY(0) scale(1) rotateY(0)} .phone-mockup.phone-right{z-index:2;transform:translateX(-140px) translateY(36px) scale(.87) rotateY(-8deg) rotate(5deg)} .phone-mockup.phone-left:hover{transform:translateX(140px) translateY(26px) scale(.92) rotateY(4deg) rotate(-2deg)!important} .phone-mockup.phone-center:hover{transform:translateY(-10px) scale(1.04) rotateY(0)!important; box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 80px var(--accent-glow)!important} .phone-mockup.phone-right:hover{transform:translateX(-140px) translateY(26px) scale(.92) rotateY(-4deg) rotate(2deg)!important} [data-theme="light"] .phone-mockup{border-color:rgba(0,0,0,.08);box-shadow:0 30px 60px rgba(0,0,0,.1),0 0 40px rgba(216,188,94,.05)} [data-theme="light"] .phone-screen{background:#f5f1e6} [data-theme="light"] .phone-placeholder h4{color:#15241F} .fast-banner{padding:36px clamp(16px,5vw,48px);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)} .fast-banner-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:center; gap:16px;flex-wrap:wrap;text-align:center} .fast-banner-icon{width:50px;height:50px;border-radius:14px;background:var(--accent); display:flex;align-items:center;justify-content:center;color:var(--on-accent);flex-shrink:0; box-shadow:0 6px 20px var(--accent-glow)} .fast-banner-icon svg{width:24px;height:24px} .fast-banner-content h3{font-size:17px;font-weight:700;margin-bottom:2px} .fast-banner-content p{font-size:13px;color:var(--text2)} .partners-strip{padding:40px 0;border-top:.5px solid var(--border);border-bottom:.5px solid var(--border);overflow:hidden} .partners-strip-title{text-align:center;font-size:11px;font-weight:600;color:var(--text2); text-transform:uppercase;letter-spacing:2px;margin-bottom:24px} .partners-track{display:flex;gap:32px;animation:scrollP 25s linear infinite;width:max-content} [dir="rtl"] .partners-track{animation-name:scrollPRTL} .partner-item{display:flex;align-items:center;gap:8px;padding:14px 22px;border:1px dashed var(--border); border-radius:var(--r-md);color:var(--text2);font-size:13px;font-weight:500;min-width:180px;transition:all .3s} .partner-item:hover{border-color:var(--accent);color:var(--accent);border-style:solid} .partner-item svg{width:18px;height:18px} @keyframes scrollP{0%{transform:translateX(0)}100%{transform:translateX(50%)}} @keyframes scrollPRTL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .features-header{text-align:center;margin-bottom:50px} .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .feature-card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg); padding:28px 22px;position:relative;overflow:hidden;transition:all .45s var(--ease); transform:translateZ(0);will-change:transform,box-shadow} .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:var(--accent);opacity:0;transition:opacity .4s} .feature-card::after{content:'';position:absolute;inset:0;border-radius:var(--r-lg); background:radial-gradient(ellipse at 50% 0%,var(--accent-glow),transparent 70%); opacity:0;transition:opacity .5s;pointer-events:none} .feature-card:hover{transform:translateY(-6px) scale(1.01);border-color:var(--border-hover); box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 40px var(--accent-glow)} .feature-card:hover::before{opacity:1} .feature-card:hover::after{opacity:1} [data-theme="light"] .feature-card{background:#fff;border-color:rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.03)} [data-theme="light"] .feature-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.08);background:#fff} .feature-icon{width:44px;height:44px;border-radius:13px;background:var(--accent-dim); display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent); transition:all .4s var(--ease)} .feature-card:hover .feature-icon{background:var(--accent);color:var(--on-accent);transform:scale(1.08); box-shadow:0 4px 16px var(--accent-glow)} [data-theme="light"] .feature-icon{background:rgba(216,188,94,.08);color:#8a6a12} [data-theme="light"] .feature-card:hover .feature-icon{background:var(--accent);color:var(--on-accent)} .feature-icon svg{width:22px;height:22px} .feature-card h3{font-size:16px;font-weight:700;margin-bottom:7px;letter-spacing:-.02em} .feature-card p{font-size:13px;color:var(--text2);line-height:1.55} .feature-card.highlighted{background:rgba(216,188,94,.02);border-color:rgba(216,188,94,.12)} .feature-card.highlighted::before{opacity:1} .feature-badge-new{position:absolute;top:12px;left:12px;padding:3px 7px;background:var(--accent);color:var(--on-accent); font-size:9px;font-weight:700;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.5px} [dir="rtl"] .feature-badge-new{left:auto;right:12px} .how-header{text-align:center;margin-bottom:60px} .steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative} .steps-grid::before{content:'';position:absolute;top:42px;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(216,188,94,.15),transparent)} .step-card{text-align:center;position:relative;z-index:2;padding:14px 6px;transition:all .4s} .step-circle{width:84px;height:84px;border-radius:50%;background:var(--card);border:1.5px solid var(--border); display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative; transition:all .45s var(--ease);color:var(--accent)} .step-card:hover .step-circle{border-color:var(--accent);background:var(--accent);color:var(--on-accent); transform:scale(1.08);box-shadow:0 0 36px var(--accent-glow)} [data-theme="light"] .step-circle{background:#fff;border-color:rgba(0,0,0,.06);color:#8a6a12;box-shadow:0 2px 8px rgba(0,0,0,.03)} [data-theme="light"] .step-card:hover .step-circle{background:var(--accent);color:var(--on-accent)} .step-circle svg{width:32px;height:32px} .step-number{position:absolute;top:-5px;right:-5px;width:26px;height:26px;border-radius:50%; background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800; display:flex;align-items:center;justify-content:center} [dir="rtl"] .step-number{right:auto;left:-5px} .step-card h3{font-size:13px;font-weight:700;margin-bottom:6px} .step-card p{font-size:11px;color:var(--text2);line-height:1.45;max-width:160px;margin:0 auto} .step-time{display:inline-block;margin-top:8px;padding:3px 7px;background:var(--accent-dim); border:.5px solid rgba(216,188,94,.15);border-radius:var(--r-full);font-size:9px;font-weight:600;color:var(--accent)} .why-header{text-align:center;margin-bottom:50px} .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto} .comparison-card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg); padding:32px 24px;position:relative;overflow:hidden;transition:all .4s} .comparison-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.2)} .comparison-card.traditional{opacity:.75} .comparison-card.dawah{background:rgba(216,188,94,.02);border-color:rgba(216,188,94,.12)} .comparison-card.dawah::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)} [data-theme="light"] .comparison-card{background:#fff;border-color:rgba(0,0,0,.05)} [data-theme="light"] .comparison-card.traditional{background:#FBF8F1;opacity:1} [data-theme="light"] .comparison-card.dawah{background:rgba(216,188,94,.02);border-color:rgba(216,188,94,.15)} .comparison-header{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding-bottom:14px;border-bottom:.5px solid var(--border)} .comparison-header h3{font-size:18px;font-weight:700} .comparison-card.traditional .comparison-icon,.comparison-card.dawah .comparison-icon{ width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center} .comparison-card.traditional .comparison-icon{background:rgba(239,68,68,.08);color:#ef4444} .comparison-card.dawah .comparison-icon{background:var(--accent);color:var(--on-accent)} .comparison-icon svg{width:18px;height:18px} .comparison-list{list-style:none;display:flex;flex-direction:column;gap:10px} .comparison-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5} .check-icon{width:18px;height:18px;border-radius:50%;display:flex;align-items:center; justify-content:center;flex-shrink:0;margin-top:2px} .traditional .check-icon{background:rgba(239,68,68,.1);color:#ef4444} .dawah .check-icon{background:var(--accent-dim);color:var(--accent)} .check-icon svg{width:11px;height:11px} .traditional .comparison-list li{color:var(--text2)} .dawah .comparison-list li{color:var(--text)} .events-header{text-align:center;margin-bottom:50px} .events-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .event-card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-md); padding:28px 14px;text-align:center;transition:all .4s var(--ease);cursor:pointer;overflow:hidden} .event-card:hover{transform:translateY(-5px);border-color:var(--border-hover); box-shadow:0 16px 40px rgba(0,0,0,.25),0 0 30px var(--accent-glow)} [data-theme="light"] .event-card{background:#fff;border-color:rgba(0,0,0,.05)} [data-theme="light"] .event-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.06)} .event-icon{width:50px;height:50px;border-radius:14px;background:var(--accent-dim); display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--accent);transition:all .4s} .event-card:hover .event-icon{background:var(--accent);color:var(--on-accent);transform:scale(1.1); box-shadow:0 4px 16px var(--accent-glow)} .event-icon svg{width:24px;height:24px} .event-card h3{font-size:14px;font-weight:700;margin-bottom:3px} .event-card p{font-size:11px;color:var(--text2)} .security-inner{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg); padding:clamp(36px,5vw,56px);overflow:hidden;position:relative} [data-theme="light"] .security-inner{background:#fff;border-color:rgba(0,0,0,.05);box-shadow:0 2px 12px rgba(0,0,0,.03)} .security-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .security-features{display:flex;flex-direction:column;gap:10px;margin-top:24px} .security-feature{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-sm);transition:background .3s} .security-feature:hover{background:var(--card-hover)} .sf-icon{width:40px;height:40px;border-radius:11px;background:var(--accent-dim); display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)} .sf-icon svg{width:18px;height:18px} .security-feature h4{font-size:14px;font-weight:700;margin-bottom:3px} .security-feature p{font-size:12px;color:var(--text2);line-height:1.5} .security-visual{display:flex;justify-content:center;align-items:center} .shield-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center} .shield-icon-big{width:110px;height:110px;border-radius:32px;background:var(--accent); display:flex;align-items:center;justify-content:center;color:var(--on-accent);z-index:3; box-shadow:0 16px 50px rgba(216,188,94,.3)} .shield-icon-big svg{width:54px;height:54px} .shield-ring{position:absolute;border:1px solid rgba(216,188,94,.08);border-radius:50%;animation:ringPulse 3s ease-in-out infinite} .shield-ring:nth-child(1){width:160px;height:160px} .shield-ring:nth-child(2){width:190px;height:190px;animation-delay:.4s} .shield-ring:nth-child(3){width:220px;height:220px;animation-delay:.8s} @keyframes ringPulse{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.35;transform:scale(1.04)}} .partners-inner{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg); padding:clamp(40px,6vw,70px) clamp(20px,4vw,50px);text-align:center;overflow:hidden} [data-theme="light"] .partners-inner{background:#fff;border-color:rgba(0,0,0,.05)} .partners-icon-big{width:72px;height:72px;border-radius:22px;background:var(--accent); display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--on-accent); box-shadow:0 10px 32px rgba(216,188,94,.25)} .partners-icon-big svg{width:36px;height:36px} .partners-title{font-size:clamp(24px,3.5vw,40px);font-weight:700;margin-bottom:14px;letter-spacing:-.03em;line-height:1.12} .partners-desc{font-size:15px;color:var(--text2);max-width:540px;margin:0 auto 28px;line-height:1.55} .partner-types{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap} .partner-type-chip{display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:var(--r-full); border:.5px solid var(--border);background:var(--card);font-size:12px;color:var(--text2);font-weight:500;transition:all .3s} .partner-type-chip:hover{border-color:var(--accent);color:var(--accent)} .partner-type-chip svg{width:13px;height:13px} .faq-header{text-align:center;margin-bottom:42px} .faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:7px} .faq-item{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;transition:all .3s} .faq-item:hover{border-color:rgba(216,188,94,.12)} .faq-item.active{border-color:rgba(216,188,94,.25);background:rgba(216,188,94,.015)} [data-theme="light"] .faq-item{background:#fff;border-color:rgba(0,0,0,.05)} .faq-question{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;cursor:pointer;user-select:none} .faq-question h3{font-size:14px;font-weight:600;flex:1} .faq-toggle{width:26px;height:26px;border-radius:50%;background:var(--accent-dim); display:flex;align-items:center;justify-content:center;color:var(--accent);transition:all .3s;flex-shrink:0;margin-right:10px} [dir="rtl"] .faq-toggle{margin-right:0;margin-left:10px} .faq-toggle svg{width:13px;height:13px;transition:transform .3s} .faq-item.active .faq-toggle{background:var(--accent);color:var(--on-accent)} .faq-item.active .faq-toggle svg{transform:rotate(180deg)} .faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .faq-answer-inner{padding:0 20px 18px;font-size:13px;color:var(--text2);line-height:1.65} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start} .contact-info h2{font-size:clamp(28px,3.5vw,44px);font-weight:700;margin-bottom:14px;letter-spacing:-.03em} .contact-info>p{font-size:15px;color:var(--text2);line-height:1.55;margin-bottom:28px} .social-links{display:flex;flex-direction:column;gap:9px} .social-link{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--card); border:.5px solid var(--border);border-radius:var(--r-sm);transition:all .35s} .social-link:hover{border-color:var(--accent);transform:translateX(-3px);box-shadow:0 4px 16px rgba(0,0,0,.15)} [dir="ltr"] .social-link:hover{transform:translateX(3px)} [data-theme="light"] .social-link{background:#fff;border-color:rgba(0,0,0,.05)} [data-theme="light"] .social-link:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)} .sl-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} .sl-icon.whatsapp{background:#25D366}.sl-icon.instagram{background:#E4405F} .sl-icon.tiktok{background:#000}.sl-icon.x{background:#000}.sl-icon.snapchat{background:#FFFC00;color:#000} .sl-icon.email{background:var(--accent);color:var(--on-accent)} .sl-icon svg{width:20px;height:20px} .sl-info h4{font-size:14px;font-weight:600;margin-bottom:1px} .sl-info p{font-size:11px;color:var(--text2)} .contact-card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg); padding:36px 28px;overflow:hidden;position:relative} [data-theme="light"] .contact-card{background:#fff;border-color:rgba(0,0,0,.05)} .contact-card-icon{width:58px;height:58px;border-radius:16px;background:var(--accent); display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--on-accent);z-index:2;position:relative} .contact-card-icon svg{width:28px;height:28px} .contact-card h3{font-size:20px;font-weight:700;margin-bottom:8px;z-index:2;position:relative} .contact-card p{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:22px;z-index:2;position:relative} .contact-card .btn-primary{z-index:2;position:relative;width:100%;justify-content:center} .cta-section{text-align:center;overflow:hidden} .cta-content{position:relative;z-index:2} .cta-title{font-size:clamp(30px,4.5vw,52px);font-weight:700;margin-bottom:14px;letter-spacing:-.03em;line-height:1.08} .cta-desc{font-size:16px;color:var(--text2);max-width:480px;margin:0 auto 28px} .footer{padding:52px clamp(16px,5vw,48px) 28px;border-top:.5px solid var(--border)} [data-theme="light"] .footer{background:#f5f1e6} .footer-inner{max-width:1240px;margin:0 auto} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:36px;margin-bottom:36px} .footer-brand img{height:46px;width:auto;margin-bottom:12px} .footer-brand p{font-size:12px;color:var(--text2);line-height:1.55;max-width:260px;margin-bottom:18px} .footer-social{display:flex;gap:7px} .footer-social a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center; justify-content:center;color:#fff;transition:all .3s;border:none} .footer-social a:hover{transform:translateY(-2px);opacity:.85} .footer-social a.social-whatsapp{background:#25D366} .footer-social a.social-instagram{background:#E4405F} .footer-social a.social-tiktok{background:#000;border:1px solid rgba(255,255,255,.08)} .footer-social a.social-x{background:#000;border:1px solid rgba(255,255,255,.08)} .footer-social a.social-snapchat{background:#FFFC00;color:#000} .footer-social a.social-email{background:var(--accent);color:var(--on-accent)} .footer-social a svg{width:15px;height:15px} .footer-col h4{font-size:12px;font-weight:700;margin-bottom:14px} .footer-col a,.footer-col li{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2); margin-bottom:9px;transition:color .3s;cursor:pointer} .footer-col a:hover{color:var(--accent)} .footer-col svg{width:11px;height:11px;color:var(--accent);flex-shrink:0} .footer-col ul{list-style:none} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:18px; border-top:.5px solid var(--border);flex-wrap:wrap;gap:10px} .footer-bottom p{font-size:11px;color:var(--text2)} .footer-bottom-links{display:flex;gap:14px} .footer-bottom-links a{font-size:11px;color:var(--text2);transition:color .3s} .footer-bottom-links a:hover{color:var(--accent)} .whatsapp-float{position:fixed;bottom:20px;left:20px;width:52px;height:52px;background:#25D366; border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:900; box-shadow:0 5px 18px rgba(37,211,102,.3);transition:all .3s} .whatsapp-float:hover{transform:scale(1.08) translateY(-2px)} .whatsapp-float svg{width:26px;height:26px;position:relative;z-index:2} .whatsapp-float::before,.whatsapp-float::after{content:'';position:absolute;inset:0;border-radius:50%; background:#25D366;opacity:.3;animation:waPulse 2.5s ease-out infinite} .whatsapp-float::after{animation-delay:1s} @keyframes waPulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.5);opacity:0}} .back-to-top{position:fixed;bottom:20px;right:20px;width:40px;height:40px;border-radius:50%; background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center; z-index:900;opacity:0;visibility:hidden;transition:all .3s} .back-to-top.visible{opacity:1;visibility:visible} .back-to-top:hover{transform:translateY(-2px)} .back-to-top svg{width:16px;height:16px} [data-theme="light"] .back-to-top{background:#15241F;color:#fff} .legal-page{padding-top:110px} .legal-content{max-width:740px;margin:0 auto} .legal-content h1{font-size:clamp(28px,4vw,44px);font-weight:700;margin-bottom:8px;letter-spacing:-.03em} .legal-date{font-size:12px;color:var(--text2);margin-bottom:32px} .legal-section{margin-bottom:28px} .legal-section h2{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--accent)} [data-theme="light"] .legal-section h2{color:#8a6a12} .legal-section p,.legal-section li{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:7px} .legal-section ul{list-style:none} .legal-section ul li{padding-right:16px;position:relative} .legal-section ul li::before{content:'';position:absolute;right:0;top:11px;width:4px;height:4px;background:var(--accent);border-radius:50%} [dir="ltr"] .legal-section ul li{padding-right:0;padding-left:16px} [dir="ltr"] .legal-section ul li::before{right:auto;left:0} @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} .animate-on-scroll{opacity:0;transform:translateY(36px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .animate-on-scroll.visible{opacity:1;transform:translateY(0)} @media(max-width:1100px){ .hero-grid{grid-template-columns:1fr;gap:42px;text-align:center} .hero-content{display:flex;flex-direction:column;align-items:center} .hero-badges{justify-content:center}.hero-buttons{justify-content:center} .hero-desc{margin-left:auto;margin-right:auto} .features-grid{grid-template-columns:repeat(2,1fr)} .events-grid{grid-template-columns:repeat(3,1fr)} .steps-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px} .steps-grid::before{display:none} .security-grid{grid-template-columns:1fr;gap:36px} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:768px){ section{padding:55px 18px} .nav{padding:0 14px}.nav-inner{height:46px} .nav-links,.nav-actions .lang-btn,.nav-actions .btn-order{display:none} .mobile-menu-btn{display:flex} .hero{padding-top:85px;min-height:auto} .hero-title{font-size:clamp(28px,7.5vw,40px)} .hero-buttons{flex-direction:column;width:100%} .btn-primary,.btn-secondary{width:100%;justify-content:center} .mockup-container{height:380px;transform:scale(.8)} .phone-mockup{width:195px;height:400px;border-radius:32px} .phone-mockup.phone-left{transform:translateX(105px) translateY(28px) scale(.76) rotateY(6deg) rotate(-7deg)} .phone-mockup.phone-right{transform:translateX(-105px) translateY(28px) scale(.76) rotateY(-6deg) rotate(7deg)} .phone-mockup.phone-center{transform:translateY(-6px) scale(1)} .phone-notch{width:76px;height:20px;top:7px} .features-grid{grid-template-columns:1fr} .events-grid{grid-template-columns:repeat(2,1fr)} .steps-grid{grid-template-columns:repeat(2,1fr);gap:20px 10px} .comparison-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:24px} .footer-bottom{flex-direction:column;text-align:center} .whatsapp-float{bottom:14px;left:14px;width:48px;height:48px} .whatsapp-float svg{width:22px;height:22px} .back-to-top{bottom:14px;right:14px;width:38px;height:38px} .mobile-menu{width:100%;max-width:300px;padding:85px 22px 30px} .fast-banner{padding:24px 18px}.fast-banner-inner{flex-direction:column} .partners-inner{padding:36px 18px}.contact-card{padding:26px 18px} } @media(max-width:480px){ section{padding:45px 14px}.nav{padding:0 12px}.nav-logo img{height:30px} .events-grid{grid-template-columns:1fr} .steps-grid{grid-template-columns:1fr;gap:16px} .step-circle{width:72px;height:72px}.step-circle svg{width:28px;height:28px} } @media(max-width:380px){ .hero-title{font-size:24px} .phone-mockup.phone-left,.phone-mockup.phone-right{display:none} .phone-mockup.phone-center{width:200px;height:410px} .mockup-container{height:440px;transform:scale(1)} } @media(max-width:900px) and (orientation:landscape){ .hero{padding-top:75px}.mockup-container{height:340px;transform:scale(.68)} } :root{--z:1} [hidden]{display:none!important} @media(min-width:1920px){:root{--z:1.1}html{zoom:1.1}} @media(min-width:2400px){:root{--z:1.3}html{zoom:1.3}} @media(min-width:3000px){:root{--z:1.6}html{zoom:1.6}} .r-section{padding:clamp(60px,8vw,120px) clamp(16px,5vw,56px);position:relative} .r-section.soft{background:var(--card);border-block:.5px solid var(--border)} .page-hero{padding:clamp(110px,12vw,160px) clamp(16px,5vw,56px) 30px;text-align:center} .page-hero .section-desc{margin-inline:auto} .section-title.center{text-align:center;margin-bottom:36px} .shot-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-full); background:var(--accent-dim);border:.5px solid var(--border);color:var(--accent);font-size:11px;font-weight:600} [data-theme="light"] .shot-tag{color:#8a6a12} .hero-phones{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:34px} .hp{height:clamp(380px,44vw,640px);width:auto;max-width:50%;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))} .hp-a{margin-inline-end:-9%;transform:rotate(-2deg) scale(.95)} .hp-b{position:relative;z-index:2} .hp-tag{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap} .feat-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(24px,4vw,56px);align-items:center} .feat-layout .features-grid{grid-template-columns:repeat(2,1fr)} .feat-side,.fs-shot,.w-shot,.aud-visual{display:flex;flex-direction:column;align-items:center;gap:12px} .feat-side img,.fs-shot img,.aud-visual img{max-height:min(620px,70vh);width:auto;max-width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.3))} .dev-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:34px auto 0;max-width:640px; text-align:center;font-size:13px;color:var(--text2)} .dev-note svg{width:15px;height:15px;color:var(--accent);flex-shrink:0} .w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .w-step{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 22px;background:var(--card); border:.5px solid var(--border);border-radius:var(--r-lg);transition:all .4s var(--ease)} .w-step:hover{border-color:var(--border-hover);transform:translateY(-4px)} [data-theme="light"] .w-step{background:#fff;border-color:rgba(0,0,0,.05)} .w-num{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800; display:flex;align-items:center;justify-content:center;font-size:16px} .w-body h3{font-size:18px;font-weight:700;margin-bottom:6px} .w-body p{font-size:14px;color:var(--text2);line-height:1.6} .w-chip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:var(--r-full); background:var(--accent-dim);color:var(--accent);font-size:12px;font-weight:600} [data-theme="light"] .w-chip{color:#8a6a12} .w-chip.link:hover{background:var(--accent);color:var(--on-accent)} .w-chip svg{width:13px;height:13px} .w-shot{margin-top:auto} .w-shot img{height:clamp(240px,20vw,330px);width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.3))} .w-illus{margin-top:auto;align-self:center;width:84px;height:84px;border-radius:24px;background:var(--accent-dim);color:var(--accent); display:flex;align-items:center;justify-content:center} [data-theme="light"] .w-illus{color:#8a6a12} .w-illus svg{width:38px;height:38px} .aud-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,64px);align-items:center} .aud-main .section-title{margin-bottom:28px} .aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .aud-card{padding:24px 22px;background:var(--card);border:.5px solid var(--border);border-radius:var(--r-lg);transition:all .4s var(--ease)} .aud-card:hover{border-color:var(--border-hover);transform:translateY(-4px)} [data-theme="light"] .aud-card{background:#fff;border-color:rgba(0,0,0,.05)} .aud-card h3{font-size:16px;font-weight:700;margin-bottom:6px} .aud-card p{font-size:13px;color:var(--text2);line-height:1.6} .r-demo{padding:clamp(60px,8vw,110px) clamp(16px,5vw,56px)} .demo-head{text-align:center;margin-bottom:10px}.demo-head .section-desc{margin-inline:auto} .demo-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,6vw,90px);align-items:center;max-width:980px;margin:36px auto} .demo-controls{display:flex;flex-direction:column;gap:12px} .demo-pick{font-size:13px;font-weight:700;color:var(--text2)} .demo-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:var(--r-md);background:var(--card); border:.5px solid var(--border);color:var(--text);text-align:start;transition:all .3s var(--ease)} .demo-btn:hover{border-color:var(--accent);transform:translateY(-2px)} [data-theme="light"] .demo-btn{background:#fff;border-color:rgba(0,0,0,.06)} .d-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .d-ic svg{width:20px;height:20px} .d-ic.ok{background:rgba(34,197,94,.12);color:#22c55e}.d-ic.dup{background:rgba(245,158,11,.12);color:#f59e0b}.d-ic.err{background:rgba(239,68,68,.12);color:#ef4444} .d-t{flex:1;display:flex;flex-direction:column}.d-t b{font-size:14px;font-weight:700}.d-t small{font-size:12px;color:var(--text2)} .d-go{padding:5px 14px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700} .demo-reset{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--text2);font-size:13px;padding:6px 2px} .demo-reset:hover{color:var(--accent)}.demo-reset svg{width:14px;height:14px} .demo-note{font-size:12px;color:var(--text2);line-height:1.6} .phone-frame{position:relative;width:clamp(230px,22vw,310px);aspect-ratio:720/1468} .pf-screen{position:absolute;left:3.4%;top:1.5%;width:93.2%;height:97%;object-fit:cover;border-radius:12%/5.6%} .pf-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .pf-result{position:absolute;left:3.4%;top:1.5%;width:93.2%;height:97%;border-radius:12%/5.6%;display:flex;align-items:center;justify-content:center; text-align:center;transition:background .35s;color:#fff} .pf-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px} .pf-ic{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);display:none;align-items:center;justify-content:center;font-size:32px;font-weight:800} .pf-title{font-size:20px;font-weight:800}.pf-sub{font-size:12px;opacity:.85;line-height:1.5} .pf-result[data-state="idle"] .pf-card{margin-top:52%;background:rgba(0,0,0,.45);border-radius:14px;padding:10px 14px} .pf-result[data-state="idle"] .pf-title{font-size:12px;font-weight:600} .pf-result[data-state="busy"]{background:rgba(10,18,15,.78)}.pf-result[data-state="busy"] .pf-title{font-size:13px;font-weight:600} .pf-result[data-state="ok"]{background:#14532d}.pf-result[data-state="dup"]{background:#92400e}.pf-result[data-state="err"]{background:#7f1d1d} .pf-result[data-state="ok"] .pf-ic,.pf-result[data-state="dup"] .pf-ic,.pf-result[data-state="err"] .pf-ic{display:flex} .demo-results{max-width:980px;margin:10px auto 0} .demo-results h3{font-size:18px;font-weight:700;margin-bottom:16px;text-align:center} .dr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .dr{display:flex;gap:12px;padding:18px;border-radius:var(--r-md);background:var(--card);border:.5px solid var(--border)} [data-theme="light"] .dr{background:#fff;border-color:rgba(0,0,0,.05)} .dr>svg{width:22px;height:22px;flex-shrink:0;margin-top:2px} .dr.ok>svg{color:#22c55e}.dr.dup>svg{color:#f59e0b}.dr.err>svg{color:#ef4444} .dr b{font-size:15px}.dr p{font-size:13px;color:var(--text2);line-height:1.6;margin-top:4px} .r-cta{padding-top:40px} .r-cta .container{padding:clamp(32px,5vw,64px) clamp(18px,4vw,48px);border:.5px solid var(--border);border-radius:var(--r-lg); background:radial-gradient(ellipse at 50% 0%,var(--accent-glow),transparent 70%),var(--card)} .cta-shots{display:flex;justify-content:center;align-items:flex-end;margin-bottom:26px} .cs{height:clamp(150px,18vw,260px);width:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.3))} .cs-b{height:clamp(190px,23vw,330px);margin-inline:-2%;position:relative;z-index:2} .cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .cta-desc{max-width:560px} .feat-split.deep{background:var(--card);border-block:.5px solid var(--border)} .fs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center} .fs-grid.flipped .fs-text{order:2} .fs-text h2{font-size:clamp(26px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px;line-height:1.15} .fs-text>p{font-size:16px;color:var(--text2);line-height:1.65;margin-bottom:20px;max-width:520px} .bullets{list-style:none;display:flex;flex-direction:column;gap:10px} .bullets li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5} .bullets li svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:3px} [data-theme="light"] .bullets li svg{color:#8a6a12} .band{display:flex;gap:18px;align-items:center;padding:28px;border:.5px solid var(--border);border-radius:var(--r-lg);background:var(--card)} [data-theme="light"] .band{background:#fff} .band>svg{width:44px;height:44px;color:var(--accent);flex-shrink:0} .band h2{font-size:22px;font-weight:700;margin-bottom:4px}.band p{color:var(--text2);font-size:14px}.band .b-sub{color:var(--text);margin-top:8px;font-weight:600} .real-box{max-width:900px;margin:0 auto} .info-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:10px} .info-list li{display:flex;gap:12px;font-size:15px;line-height:1.65;color:var(--text2)} .info-list li svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:3px} .g-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px} .g-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);border:.5px solid var(--border); background:var(--card);color:var(--text2);font-size:13px;font-weight:600;transition:all .3s} .g-chip em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:var(--r-full);background:var(--accent-dim);color:var(--accent)} [data-theme="light"] .g-chip em{color:#8a6a12} .g-chip:hover{color:var(--text);border-color:var(--accent)} .g-chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.g-chip.active em{background:rgba(0,0,0,.14);color:inherit} .g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px;max-width:900px;margin:0 auto} .g-card{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:.5px solid var(--border);transition:all .4s var(--ease)} .g-card:hover{transform:translateY(-6px);border-color:var(--border-hover);box-shadow:0 24px 50px rgba(0,0,0,.3)} .g-card img{width:100%;height:auto;display:block} .g-card figcaption{display:flex;flex-direction:column;gap:2px;padding:14px 18px}.g-card figcaption b{font-size:15px}.g-card figcaption span{font-size:12px;color:var(--text2)} .g-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:56px 20px;border:.5px dashed var(--border);border-radius:var(--r-lg);max-width:640px;margin:0 auto} .g-empty>svg{width:34px;height:34px;color:var(--accent)}.g-empty h2{font-size:22px}.g-empty p{color:var(--text2);font-size:14px} .g-note{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:30px;font-size:13px;color:var(--text2)}.g-note svg{width:15px;height:15px;color:var(--accent)} .part-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ps{padding:26px;border-radius:var(--r-lg);background:var(--card);border:.5px solid var(--border)} [data-theme="light"] .ps{background:#fff} .ps-n{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;align-items:center;justify-content:center;margin-bottom:12px} .ps h3{font-size:17px;margin-bottom:6px}.ps p{font-size:14px;color:var(--text2);line-height:1.6} .pform-box{max-width:780px;margin:0 auto;padding:clamp(24px,4vw,44px);border:.5px solid var(--border);border-radius:var(--r-lg);background:var(--card)} [data-theme="light"] .pform-box{background:#fff} .pf-lead{color:var(--text2);font-size:14px;margin-bottom:10px} .pf-privacy{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text2);line-height:1.6;padding:12px 14px;border-radius:var(--r-sm);background:var(--accent-dim);margin-bottom:22px} .pf-privacy svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px} #partnerForm{display:flex;flex-direction:column;gap:16px} #partnerForm label,#partnerForm fieldset{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;border:none} #partnerForm legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0} #partnerForm input[type=text],#partnerForm select,#partnerForm textarea{width:100%;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg); border:.5px solid var(--border);color:var(--text);font:inherit;font-size:14px;font-weight:400} #partnerForm input:focus,#partnerForm select:focus,#partnerForm textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)} #partnerForm small{font-weight:400;color:var(--text2);font-size:12px} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .f-radios{display:flex;gap:14px;flex-wrap:wrap} #partnerForm label.rd{flex-direction:row;align-items:center;gap:6px;font-weight:500} .f-err{color:#ef4444;font-style:normal;font-size:12px;font-weight:500} .f-ok{color:#22c55e;font-size:13px;line-height:1.6}.f-fail{color:#f59e0b;font-size:13px;line-height:1.6}.f-fail a{color:var(--accent);text-decoration:underline} #partnerForm .btn-primary{align-self:flex-start} .c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1000px;margin:0 auto} .c-card{display:flex;gap:16px;align-items:center;padding:24px;border:.5px solid var(--border);border-radius:var(--r-lg);background:var(--card);transition:all .35s var(--ease)} .c-card:hover{border-color:var(--accent);transform:translateY(-3px)} [data-theme="light"] .c-card{background:#fff;border-color:rgba(0,0,0,.05)} .c-card h3{font-size:17px;margin-bottom:3px}.c-card p{font-size:13px;color:var(--text2);line-height:1.55} .c-num{display:inline-block;margin-top:6px;font-weight:700;color:var(--accent);font-size:15px} [data-theme="light"] .c-num{color:#8a6a12} .c-social{text-align:center;margin-top:40px}.c-social h2{font-size:20px;margin-bottom:6px}.c-social p{color:var(--text2);font-size:14px} .mobile-menu a.mm-order{margin-top:20px;color:var(--accent)} .footer-social a svg{width:17px;height:17px}.footer-col .soon{font-size:11px;color:var(--text2);margin-top:10px} .page-hero .section-title{margin-bottom:12px} .pform-box .section-title{font-size:clamp(24px,3vw,34px);margin-bottom:8px} #partner-form,#workflow,#qr-demo,#qr-demo-how{scroll-margin-top:70px} section{padding:clamp(56px,6vw,96px) clamp(16px,5vw,56px)} .hero{padding-top:104px;padding-bottom:64px} .hero-grid{gap:clamp(32px,5vw,80px)} .hero-title{font-size:clamp(34px,4.4vw,60px);line-height:1.14;letter-spacing:-.03em;margin-bottom:18px} .hero-desc{font-size:clamp(15px,1.2vw,17px);max-width:470px;margin-bottom:30px} .hero-badges{margin-bottom:22px} .section-title{font-size:clamp(28px,3.3vw,44px);line-height:1.16;letter-spacing:-.03em;margin-bottom:14px} .section-desc{font-size:clamp(14px,1.15vw,17px);line-height:1.65;max-width:540px} .section-badge{margin-bottom:18px} .features-header,.how-header,.demo-head{margin-bottom:44px} .r-section{padding:clamp(56px,6vw,96px) clamp(16px,5vw,56px)} .r-demo{padding:clamp(56px,6vw,96px) clamp(16px,5vw,56px)} .page-hero{padding:clamp(104px,9vw,136px) clamp(16px,5vw,56px) 24px} .hp{height:clamp(320px,33vw,480px);max-width:46%} .hero-phones{padding-bottom:30px} .feat-layout{grid-template-columns:1.9fr 1fr;gap:clamp(24px,3.5vw,48px)} .features-grid{gap:16px} .feature-card{padding:24px 22px;border-radius:22px} .feature-card h3{font-size:16px;margin-bottom:8px}.feature-card p{font-size:13.5px;line-height:1.65} .feat-side img,.fs-shot img,.aud-visual img{max-height:min(460px,60vh)} .w-grid{gap:18px} .w-step{padding:24px 22px 20px;border-radius:22px;gap:12px} .w-num{width:34px;height:34px;font-size:15px} .w-body h3{font-size:17px}.w-body p{font-size:13.5px;line-height:1.65} .w-shot img{height:clamp(200px,15vw,250px)} .w-illus{width:72px;height:72px;border-radius:20px}.w-illus svg{width:32px;height:32px} .aud-layout{grid-template-columns:1.9fr 1fr;gap:clamp(24px,3.5vw,48px)} .aud-main .section-title{margin-bottom:24px} .aud-card{padding:22px 20px;border-radius:22px}.aud-card h3{font-size:15.5px}.aud-card p{font-size:13.5px} .phone-frame{width:clamp(200px,16vw,240px)} .demo-grid{max-width:860px;gap:clamp(28px,5vw,70px);margin:30px auto} .demo-btn{padding:12px 14px;border-radius:18px} .demo-results{max-width:860px} .fs-grid{gap:clamp(28px,5vw,72px)} .fs-text h2{font-size:clamp(24px,2.7vw,36px)} .fs-text>p{font-size:15px;max-width:460px;margin-bottom:18px} .bullets li{font-size:14.5px} .band{padding:24px 26px;border-radius:22px} .real-box{max-width:780px}.info-list li{font-size:14.5px} .g-grid{max-width:720px;gap:20px} .g-chips{margin-bottom:28px} .part-grid{gap:16px} .pform-box{max-width:680px;border-radius:24px} .ps{padding:22px;border-radius:22px} .c-grid{max-width:860px} .c-card{padding:22px;border-radius:22px} .r-cta{padding-top:24px} .r-cta .container{padding:clamp(28px,4vw,52px) clamp(18px,4vw,44px);border-radius:28px} .cta-title{font-size:clamp(26px,3vw,38px);margin-bottom:12px} .cta-desc{font-size:15px;margin-bottom:24px} .cs{height:clamp(120px,12vw,185px)}.cs-b{height:clamp(155px,16vw,235px)} .cta-shots{margin-bottom:22px} .faq-list{max-width:760px} .nav-inner{height:56px} .nav-logo img{height:34px} .footer{padding:56px clamp(16px,5vw,56px) 28px} .dev-note{margin-top:28px} @media(max-width:768px){ section,.r-section,.r-demo{padding:48px 18px} .hero{padding-top:92px;padding-bottom:40px} .hero-title{font-size:clamp(28px,8vw,36px)} .hp{height:clamp(280px,70vw,380px);max-width:54%} .feat-side img,.fs-shot img,.aud-visual img{max-height:420px} } .nav{padding-top:12px;padding-bottom:0} .nav.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none} .nav-inner{height:68px;gap:16px} .nav-logo{gap:12px} .nav-logo:hover{opacity:.85} .nl-badge{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px rgba(216,188,94,.28),0 6px 18px rgba(0,0,0,.25)} .nl-text{font-size:25px;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1} .nav-links{gap:2px;padding:6px;border:1px solid rgba(216,188,94,.16);border-radius:var(--r-full); background:rgba(14,28,24,.62);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:0 10px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)} .nav-links li:first-child{display:none} .nav-links a{display:block;padding:10px 17px;font-size:14px;font-weight:500;color:var(--text);border-radius:var(--r-full);transition:all .3s var(--ease)} .nav-links a:hover{background:rgba(216,188,94,.1);color:var(--accent)} .nav-links a.active{background:rgba(216,188,94,.15);color:var(--accent)} .nav-links a.active::after{display:none} .nav-actions{gap:12px} .icon-btn{width:44px;height:44px;border:1px solid rgba(216,188,94,.2);background:rgba(14,28,24,.62); backdrop-filter:blur(14px);color:var(--accent);transition:all .3s var(--ease)} .icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .icon-btn svg{width:18px;height:18px} .lang-btn{padding:8px 6px;font-size:14px;font-weight:600;color:var(--text)} .lang-btn:hover{color:var(--accent)} .btn-order{gap:9px;padding:13px 24px;font-size:14.5px;font-weight:700;color:var(--on-accent); background:linear-gradient(135deg,#F3E1A0 0%,#D8BC5E 52%,#B8942E 100%); box-shadow:0 10px 26px rgba(216,188,94,.28),inset 0 1px 0 rgba(255,255,255,.45)} .btn-order:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(216,188,94,.38),inset 0 1px 0 rgba(255,255,255,.5)} .btn-order svg{width:18px;height:18px;flex-shrink:0} [data-theme="light"] .btn-order{background:linear-gradient(135deg,#F3E1A0 0%,#D8BC5E 52%,#B8942E 100%);color:var(--on-accent)} [data-theme="light"] .nav-links{background:rgba(255,255,255,.78);border-color:rgba(27,59,54,.12);box-shadow:0 10px 30px rgba(27,59,54,.08)} [data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{background:rgba(168,134,32,.12);color:#8a6a12} [data-theme="light"] .icon-btn{background:rgba(255,255,255,.78);border-color:rgba(27,59,54,.14);color:#8a6a12} [data-theme="light"] .nl-badge{box-shadow:0 0 0 1px rgba(27,59,54,.12),0 6px 16px rgba(27,59,54,.12)} @media(max-width:1100px){.nav-links a{padding:9px 12px;font-size:13px}.btn-order{padding:12px 18px}} @media(max-width:900px){.nav-links{display:none}} @media(max-width:768px){.nav{padding-top:6px}.nav-inner{height:58px}.nl-badge{width:38px;height:38px}.nl-text{font-size:22px}.icon-btn{width:40px;height:40px}} @media(max-width:1100px){ .feat-layout,.aud-layout{grid-template-columns:1fr} .w-grid{grid-template-columns:repeat(2,1fr)} .part-grid{grid-template-columns:repeat(2,1fr)} .demo-grid{grid-template-columns:1fr;justify-items:center}.demo-controls{width:100%;max-width:520px} .hp{height:clamp(320px,60vw,520px)} .hero-visual{width:100%} } @media(max-width:768px){ .w-grid,.ps-grid,.part-grid,.dr-grid,.f-row,.fs-grid,.aud-grid,.c-grid,.feat-layout .features-grid{grid-template-columns:1fr} .fs-grid.flipped .fs-text{order:0} .band{flex-direction:column;align-items:flex-start} #partnerForm .btn-primary{align-self:stretch} .hp{max-width:56%} } .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;overflow:visible;vertical-align:middle} .ic.g{stroke:none;fill:currentColor} [dir="ltr"] .ic.flip{transform:scaleX(-1)} .feature-icon,.event-icon,.sf-icon{position:relative} .feature-icon::after{content:'';position:absolute;top:-3px;inset-inline-end:-3px;width:8px;height:8px;background:var(--accent); transform:rotate(45deg) scale(.85);opacity:.9;transition:transform .45s cubic-bezier(.34,1.56,.64,1)} .feature-card:hover .feature-icon::after,.aud-card:hover .feature-icon::after{transform:rotate(225deg) scale(1.15)} [data-theme="light"] .feature-icon::after{background:#A68520} .phone-mockup{padding:4px;border:0;border-radius:36px;overflow:visible; background:linear-gradient(155deg,#738680 0%,#2a3732 24%,#0b110f 55%,#3a4a43 100%); box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 .6px rgba(255,255,255,.2),inset 0 0 0 .6px rgba(255,255,255,.14),inset 0 1.5px 1px rgba(255,255,255,.2)} .phone-screen{position:relative;border-radius:32px;background:#000;overflow:hidden} .phone-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.65);pointer-events:none} .phone-notch{top:12px;width:58px;height:16px;border-radius:10px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.05)} .phone-mockup::before{content:'';position:absolute;top:96px;inset-inline-end:-2.5px;width:2.5px;height:46px;border-radius:2px;background:linear-gradient(#5d6d66,#27312d)} .phone-mockup::after{content:'';position:absolute;top:74px;inset-inline-start:-2.5px;width:2.5px;height:26px;border-radius:2px;background:linear-gradient(#5d6d66,#27312d);box-shadow:0 38px 0 #313e39} [data-theme="light"] .phone-mockup{border:0;box-shadow:0 34px 60px rgba(27,59,54,.28),0 0 0 .6px rgba(0,0,0,.25),inset 0 0 0 .6px rgba(255,255,255,.14),inset 0 1.5px 1px rgba(255,255,255,.2)} [data-theme="light"] .phone-screen{background:#000} .sp{position:relative;padding:5px;border-radius:36px; background:linear-gradient(155deg,#738680 0%,#2a3732 24%,#0b110f 55%,#3a4a43 100%); box-shadow:0 28px 56px rgba(0,0,0,.4),0 0 0 .6px rgba(255,255,255,.2),inset 0 1.5px 1px rgba(255,255,255,.2);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s} .sp::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:62px;height:17px;border-radius:10px;background:#000;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.05)} .sp img{display:block;width:100%;height:auto;border-radius:31px;background:#000} .g-card{background:transparent;border:0;border-radius:0;overflow:visible} .g-card:hover{transform:translateY(-8px);box-shadow:none;border-color:transparent} .g-card:hover .sp{box-shadow:0 40px 70px rgba(0,0,0,.5),0 0 0 .6px rgba(216,188,94,.5),0 0 40px var(--accent-glow),inset 0 1.5px 1px rgba(255,255,255,.2)} .g-card figcaption{align-items:center;text-align:center;padding:18px 6px 0} .g-grid{max-width:640px;gap:34px} .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1250;pointer-events:none; background:linear-gradient(90deg,#B8942E,#F3E1A0,#D8BC5E);transform:scaleX(var(--p,0));transform-origin:100% 50%;transition:transform .12s linear} [dir="ltr"] .scroll-progress{transform-origin:0 50%} .nav{transition:transform .6s cubic-bezier(.22,1,.36,1)} .nav.nav-hide{transform:translateY(-130%)} .nav-inner{transition:height .5s cubic-bezier(.22,1,.36,1);animation:navIn 1s cubic-bezier(.22,1,.36,1) .25s backwards} @keyframes navIn{from{opacity:0;transform:translateY(-28px) scale(.98)}} .nav .nl-badge{transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1)} .nav.scrolled .nav-inner{height:60px} .nav.scrolled .nl-badge{width:38px;height:38px} .nav.scrolled .nav-links{background:rgba(14,28,24,.84);box-shadow:0 16px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)} [data-theme="light"] .nav.scrolled .nav-links{background:rgba(255,255,255,.9);box-shadow:0 14px 36px rgba(27,59,54,.14)} .nav-links{position:relative} .nav-links a{position:relative;z-index:1} .nav-links a:hover,.nav-links a.active,[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{background:transparent} .nav-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;list-style:none;pointer-events:none;opacity:0; background:linear-gradient(135deg,rgba(216,188,94,.2),rgba(216,188,94,.08));border:1px solid rgba(216,188,94,.34); transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),opacity .3s} [data-theme="light"] .nav-ind{background:rgba(168,134,32,.12);border-color:rgba(168,134,32,.35)} .nav-links:not(:hover) a.active{color:var(--accent)} .nav-links:hover a.active:not(:hover){color:var(--text)} [data-theme="light"] .page.leaving{opacity:0;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.nav{transform:none!important}} .soc{display:flex;gap:10px;flex-wrap:wrap} .soc a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0; border:1px solid rgba(216,188,94,.38);color:var(--accent);background:rgba(216,188,94,.05);transition:all .4s cubic-bezier(.22,1,.36,1)} .soc a:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent);transform:translateY(-4px) rotate(-6deg);box-shadow:0 12px 24px rgba(216,188,94,.3)} .soc .ic{width:18px;height:18px} .soc-lg a{width:52px;height:52px}.soc-lg .ic{width:22px;height:22px} .c-social .soc{justify-content:center;margin-top:20px} [data-theme="light"] .soc a{color:#8a6a12;border-color:rgba(138,106,18,.4);background:rgba(168,134,32,.06)} [data-theme="light"] .soc a:hover{background:#A68520;color:#fff;border-color:#A68520} .footer-col .soc a{margin:0} .toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:1300;padding:11px 20px;border-radius:999px; background:#15241f;color:#f6f2e7;border:1px solid rgba(216,188,94,.45);font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.4);transition:all .45s cubic-bezier(.22,1,.36,1);white-space:nowrap} .toast.show{opacity:1;transform:translate(-50%,0)} .dial{position:fixed;bottom:22px;left:22px;z-index:900;display:flex;flex-direction:column;align-items:center;gap:12px} .dial-main{position:relative;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent); background:radial-gradient(circle at 30% 25%,#2d5f54,#1b3b36 55%,#12231f);border:1.5px solid rgba(216,188,94,.6); box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 0 rgba(216,188,94,.4);animation:dialPulse 3.4s ease-out infinite;transition:transform .4s cubic-bezier(.34,1.56,.64,1)} .dial-main:hover{transform:scale(1.07)} .dm-wa{width:27px;height:27px;transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)} .dm-x{position:absolute;width:20px;height:20px;opacity:0;transform:rotate(-90deg) scale(.5);transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)} .dm-x::before,.dm-x::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:currentColor;transform:rotate(45deg)} .dm-x::after{transform:rotate(-45deg)} .dial.open .dm-wa{opacity:0;transform:rotate(90deg) scale(.5)} .dial.open .dm-x{opacity:1;transform:none} .dm-dot{position:absolute;top:1px;right:1px;width:13px;height:13px;border-radius:50%;background:#25D366;border:2.5px solid #15241f} @keyframes dialPulse{0%{box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 0 rgba(216,188,94,.38)}70%,100%{box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 18px rgba(216,188,94,0)}} .dial-list{list-style:none;display:flex;flex-direction:column;gap:10px;pointer-events:none} .dial-list li{opacity:0;transform:translateY(22px) scale(.55);transition:opacity .25s,transform .4s cubic-bezier(.34,1.56,.64,1)} .dial:hover .dial-list,.dial.open .dial-list{pointer-events:auto} .dial:hover .dial-list li,.dial.open .dial-list li{opacity:1;transform:none;transition-delay:calc((4 - var(--i))*.055s)} .dial-item{position:relative;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent); background:#1b3b36;border:1px solid rgba(216,188,94,.45);box-shadow:0 10px 22px rgba(0,0,0,.35);transition:background .3s,color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)} .dial-item:hover{background:var(--accent);color:#15241F;transform:scale(1.12)} .dial-item .ic{width:20px;height:20px} .tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-8px);white-space:nowrap;padding:6px 12px;border-radius:999px; background:#15241f;border:1px solid rgba(216,188,94,.32);color:#f6f2e7;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1)} .dial-item:hover .tip{opacity:1;transform:translateY(-50%)} html.menu-open .dial{opacity:0;pointer-events:none} .back-to-top{border:1px solid rgba(216,188,94,.5);background:#1b3b36;color:var(--accent)} .back-to-top:hover{background:var(--accent);color:#15241F} [data-theme="light"] .back-to-top{background:#1b3b36;color:#F3E1A0} .mobile-menu-overlay{display:none} .mobile-menu-btn{width:44px;height:44px;border:1px solid rgba(216,188,94,.22);border-radius:50%;background:rgba(14,28,24,.62);backdrop-filter:blur(14px)} [data-theme="light"] .mobile-menu-btn{background:rgba(255,255,255,.8);border-color:rgba(27,59,54,.14)} .mobile-menu-btn span{width:18px;height:1.8px;border-radius:2px} @media(max-width:900px){.mobile-menu-btn{display:flex}} #mobileMenu.mobile-menu{--ox:38px;position:fixed;inset:0;right:auto;top:0;left:0;width:100%;max-width:none;height:100dvh;padding:0 26px max(26px,env(safe-area-inset-bottom)); display:flex;flex-direction:column;overflow-y:auto;border:0;backdrop-filter:none;z-index:1100;visibility:hidden; background:radial-gradient(120% 70% at 100% 0%,rgba(216,188,94,.14),transparent 62%),radial-gradient(90% 60% at 0% 100%,rgba(46,110,96,.4),transparent 65%),linear-gradient(165deg,#1d4039 0%,#15241f 60%,#0e1a16 100%); clip-path:circle(0 at var(--ox) 36px);transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s .8s} [dir="ltr"] #mobileMenu.mobile-menu{--ox:calc(100% - 38px)} #mobileMenu.mobile-menu.active{clip-path:circle(150% at var(--ox) 36px);visibility:visible;transition:clip-path .85s cubic-bezier(.77,0,.18,1),visibility 0s} #mobileMenu::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.9; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M64 12 116 64 64 116 12 64Z' fill='none' stroke='%23D8BC5E' stroke-opacity='.06'/%3E%3C/svg%3E") center top/128px 128px} .mm-top,.mm-list,.mm-foot{position:relative;z-index:1} .mm-top{display:flex;align-items:center;justify-content:space-between;height:74px;flex-shrink:0;opacity:0;transform:translateY(-12px);transition:opacity .5s .35s,transform .6s .35s cubic-bezier(.22,1,.36,1)} .mobile-menu.active .mm-top{opacity:1;transform:none} .mm-top .nl-text{color:#f6f2e7} .mm-close{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(216,188,94,.4);background:rgba(216,188,94,.08);transition:transform .5s cubic-bezier(.34,1.56,.64,1)} .mm-close:active{transform:scale(.9)} .mm-close span{position:absolute;top:50%;left:50%;width:18px;height:1.8px;background:#F3E1A0;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)} .mm-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)} .mm-list{display:flex;flex-direction:column;margin-top:10px} #mobileMenu a.mm-link{display:flex;align-items:center;gap:16px;padding:17px 2px;font-size:25px;font-weight:600;color:#f6f2e7;border-bottom:1px solid rgba(216,188,94,.15); opacity:0;transform:translateY(26px);transition:opacity .5s,transform .7s cubic-bezier(.22,1,.36,1),color .3s;transition-delay:calc(.28s + var(--i)*.06s)} #mobileMenu.active a.mm-link{opacity:1;transform:none} #mobileMenu a.mm-link:active{color:var(--accent)} .mm-num{width:26px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent);opacity:.75;font-variant-numeric:tabular-nums} #mobileMenu a.mm-link .ic{margin-inline-start:auto;width:20px;height:20px;color:var(--accent);opacity:.85} #mobileMenu a.mm-link.active{color:var(--accent)} #mobileMenu a.mm-link.active .mm-num{opacity:1} .mm-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:20px;opacity:0;transform:translateY(24px);transition:opacity .6s .75s,transform .7s .75s cubic-bezier(.22,1,.36,1)} .mobile-menu.active .mm-foot{opacity:1;transform:none} .mm-foot .btn-order{width:100%;justify-content:center;padding:16px 24px;font-size:16px;margin:0} .mm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .mm-row .soc a{width:40px;height:40px} .mm-ctl{display:flex;gap:8px} .mm-pill{min-width:44px;height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(216,188,94,.3);background:rgba(216,188,94,.06);color:#f6f2e7;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center} .mm-pill .ic{width:19px;height:19px;color:var(--accent)} .mm-pill:active{background:rgba(216,188,94,.2)} @media(max-width:768px){.mm-foot .soc a{width:40px;height:40px}} @media(max-width:380px){#mobileMenu a.mm-link{font-size:22px;padding:14px 2px}} #mobileMenu a.btn-order{color:var(--on-accent);border:0;padding:16px 24px;gap:10px;font-weight:700} #mobileMenu a.btn-order svg{width:19px;height:19px;color:inherit} #mobileMenu .soc a{padding:0;border:1px solid rgba(216,188,94,.38)} #mobileMenu .soc a svg{width:18px;height:18px;color:inherit} :root{--font:'Cairo','Tajawal',-apple-system,sans-serif;--display:'Cairo','Tajawal',-apple-system,sans-serif} html[lang="en"]{--font:'Inter','Cairo',-apple-system,sans-serif;--display:'Outfit','Cairo',sans-serif} body{font-family:var(--font);font-size:16px;line-height:1.85;font-weight:400;font-feature-settings:"kern","liga"} *{letter-spacing:0!important} h1,h2,h3,h4,.hero-title,.section-title,.cta-title,.fs-text h2,.nl-text,.w-body h3,.feature-card h3,.aud-card h3,.ps h3,.c-card h3, .faq-q,.band h2,.g-empty h2,.demo-results h3,.pf-title,#mobileMenu a.mm-link,.w-num,.ps-n,.mm-num,.d-t b,.g-card figcaption b, .pform-box .section-title,.dr b,.legal-content h1,.legal-section h2,.footer-col h4,.c-social h2{font-family:var(--display)} h1,h2,h3,h4,.hero-title,.section-title,.cta-title{font-weight:700} .hero-title{font-size:clamp(34px,4.2vw,58px);line-height:1.32;margin-bottom:20px} .section-title{font-size:clamp(28px,3.1vw,42px);line-height:1.38;margin-bottom:14px} .hero-desc{font-size:clamp(16px,1.3vw,18.5px);line-height:1.95;max-width:480px;color:var(--text2)} .section-desc{font-size:clamp(15px,1.25vw,17.5px);line-height:1.9} .fs-text h2{font-size:clamp(25px,2.7vw,36px);line-height:1.4} .fs-text>p{font-size:16px;line-height:1.9} .bullets li{font-size:15.5px;line-height:1.75} .cta-title{font-size:clamp(26px,3vw,38px);line-height:1.4} .cta-desc{font-size:16px;line-height:1.9} .feature-card h3,.aud-card h3{font-size:18px;line-height:1.5;margin-bottom:8px;font-weight:600} .feature-card p,.aud-card p,.w-body p,.ps p,.c-card p,.dr p{font-size:15px;line-height:1.9} .w-body h3{font-size:19px;line-height:1.5} .ps h3,.c-card h3{font-size:18px} .faq-q{font-size:17px;line-height:1.6;font-weight:500} .faq-answer-inner{font-size:15px;line-height:1.95} .nav-links a{font-size:15px;font-weight:500} .btn-primary,.btn-secondary,.btn-order{font-family:var(--font);font-weight:700;font-size:15px} .btn-order{font-size:15px} .lang-btn{font-size:14.5px} .info-list li,.band p,.pf-lead,.g-note,.dev-note,.demo-note{font-size:14.5px;line-height:1.9} .footer-col a,.footer-col li{font-size:14px} .footer-brand p{font-size:14px;line-height:1.9} .footer-bottom p,.footer-bottom-links a{font-size:13px} .w-chip,.shot-tag,.g-chip{font-size:13px} .d-t b{font-size:15px;font-weight:500}.d-t small{font-size:13px} .legal-section p,.legal-section li{font-size:14.5px;line-height:1.95} #partnerForm label,#partnerForm legend{font-size:14px;font-weight:500} #partnerForm input[type=text],#partnerForm select,#partnerForm textarea{font-size:15px} .mm-num{font-weight:500} html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] .hero-title,html[lang="en"] .section-title{line-height:1.2} html[lang="en"] body{line-height:1.7} .ambient-glow{display:none} .section-badge,.hero-badges{display:none} .hero-badge .pulse-dot{animation:none} .feature-card::before,.feature-card::after,.btn-primary::after{display:none} .feature-card,.w-step,.aud-card,.c-card,.ps,.dr,.demo-btn,.comparison-card{transition:border-color .3s ease,background-color .3s ease} .feature-card:hover,.w-step:hover,.aud-card:hover,.c-card:hover,.comparison-card:hover,.demo-btn:hover,.g-card:hover{transform:none;box-shadow:none;border-color:rgba(216,188,94,.42)} .feature-card:hover .feature-icon{transform:none;box-shadow:none} .feature-icon::after{transition:none} .feature-card:hover .feature-icon::after,.aud-card:hover .feature-icon::after{transform:rotate(45deg) scale(.85)} .btn-primary:hover,.btn-order:hover,.btn-secondary:hover{transform:none;box-shadow:none} .btn-primary,.btn-order{background:var(--accent);box-shadow:none} .btn-primary:hover,.btn-order:hover{background:#E6CE7D} [data-theme="light"] .btn-primary{background:#15241F;color:#fff} [data-theme="light"] .btn-primary:hover{background:#1b3b36;color:#fff} [data-theme="light"] .btn-order{background:var(--accent)} [data-theme="light"] .btn-order:hover{background:#B8942E} .btn-secondary:hover{background:var(--accent-dim)} .dial-main{animation:none;box-shadow:0 8px 20px rgba(0,0,0,.35)} .soc a:hover{transform:none;box-shadow:none} .nav-links{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;background:rgba(17,31,27,.72)} .nav.scrolled .nav-links{box-shadow:0 8px 24px rgba(0,0,0,.28);background:rgba(17,31,27,.9)} [data-theme="light"] .nav-links{background:rgba(255,255,255,.82);box-shadow:none} [data-theme="light"] .nav.scrolled .nav-links{box-shadow:0 8px 24px rgba(27,59,54,.1);background:rgba(255,255,255,.94)} .nav-ind{display:none} .nav-links a{position:relative;transition:color .3s ease} .nav-links a::after{content:'';position:absolute;left:16px;right:16px;bottom:6px;height:1.5px;background:var(--accent);display:block; transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1)} .nav-links a:hover,.nav-links a:hover,[data-theme="light"] .nav-links a:hover{background:transparent;color:var(--accent)} .nav-links a.active,[data-theme="light"] .nav-links a.active{background:transparent;color:var(--accent)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} .nav-links:not(:hover) a.active,.nav-links:hover a.active:not(:hover){color:var(--accent)} [data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active,[data-theme="light"] .nav-links:not(:hover) a.active,[data-theme="light"] .nav-links:hover a.active:not(:hover){color:#8a6a12} [data-theme="light"] .nav-links a::after{background:#A68520} .animate-on-scroll{transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)} .r-cta .container{background:var(--card)} .shot-tag{background:none;border:0;padding:0;color:var(--text2);font-weight:500} [data-theme="light"] .shot-tag{color:var(--text2)} .g-card:hover{transform:none} .g-card:hover .sp{box-shadow:0 28px 56px rgba(0,0,0,.4),0 0 0 .6px rgba(216,188,94,.55),inset 0 1.5px 1px rgba(255,255,255,.2)} .phone-mockup{box-shadow:0 30px 56px rgba(0,0,0,.42),0 0 0 .6px rgba(255,255,255,.2),inset 0 0 0 .6px rgba(255,255,255,.14),inset 0 1.5px 1px rgba(255,255,255,.2)} .feature-card.highlighted{background:var(--card)} .dp{--w:230px;position:relative;width:var(--w);flex-shrink:0;padding:4px;border-radius:calc(var(--w)*.16); background:linear-gradient(155deg,#738680 0%,#2a3732 24%,#0b110f 55%,#3a4a43 100%); box-shadow:0 26px 48px rgba(0,0,0,.38),0 0 0 .6px rgba(255,255,255,.2),inset 0 1.5px 1px rgba(255,255,255,.2)} .dp::before{content:'';position:absolute;top:calc(4px + var(--w)*.032);left:50%;transform:translateX(-50%);width:calc(var(--w)*.25);height:calc(var(--w)*.068); border-radius:99px;background:#000;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.05)} .dp::after{content:'';position:absolute;top:calc(var(--w)*.42);inset-inline-end:-2.5px;width:2.5px;height:calc(var(--w)*.2);border-radius:2px;background:linear-gradient(#5d6d66,#27312d)} .dp .dp-screen{position:relative;aspect-ratio:1080/2150;border-radius:calc(var(--w)*.16 - 4px);overflow:hidden;background:#000} .dp .dp-screen>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:top center;filter:none;border-radius:0} .dp .dp-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);pointer-events:none;z-index:2} .dp.dp-wa .dp-screen{background:#141d1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 6 58 32 32 58 6 32Z' fill='none' stroke='%23D8BC5E' stroke-opacity='.1'/%3E%3C/svg%3E") center/64px} .dp.dp-wa .dp-screen>img{object-fit:contain;object-position:center bottom} .dp.dp-sm{--w:158px} .dgroup{display:flex;align-items:center;justify-content:center} .dgroup.duo .dp{--w:200px} .dgroup.duo .d1{margin-inline-end:-58px;transform:translateY(26px) rotate(-4deg)} .dgroup.duo .d2{position:relative;z-index:2;transform:rotate(3deg)} .dgroup.trio .dp{--w:132px} .dgroup.trio .d2{--w:156px;position:relative;z-index:2;margin-inline:-22px} .dgroup.trio .d1{transform:translateY(14px) rotate(-5deg)} .dgroup.trio .d3{transform:translateY(14px) rotate(5deg)} .feat-side,.fs-shot,.w-shot,.aud-visual{gap:16px} .feat-side .dp,.fs-shot>.dp{--w:236px} .w-shot img{height:auto} .dp-demo{--w:clamp(220px,18vw,250px)} .dp-demo .pf-result{inset:0;width:auto;height:auto;border-radius:0;left:0;top:0} .dp-demo .dp-screen>img{object-position:top center} .cs{display:none} [data-theme="light"] .dp{box-shadow:0 26px 44px rgba(27,59,54,.26),0 0 0 .6px rgba(0,0,0,.25),inset 0 1.5px 1px rgba(255,255,255,.2)} @media(max-width:768px){ .feat-side .dp,.fs-shot>.dp{--w:210px} .dgroup.duo .dp{--w:168px}.dgroup.duo .d1{margin-inline-end:-46px} .dgroup.trio .dp{--w:104px}.dgroup.trio .d2{--w:124px;margin-inline:-16px} .dp.dp-sm{--w:150px} } .skip-link{position:fixed;top:-80px;inset-inline-start:16px;z-index:2000;padding:10px 18px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;transition:top .2s} .skip-link:focus{top:12px} a.lang-btn{display:inline-flex;align-items:center;cursor:pointer} .about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,72px);align-items:start} .about-text p{font-size:16.5px;line-height:2;color:var(--text2);margin-bottom:14px;max-width:640px} .about-points{list-style:none;display:flex;flex-direction:column;gap:14px;padding:26px 24px;border:.5px solid var(--border);border-radius:22px;background:var(--card)} [data-theme="light"] .about-points{background:#fff;border-color:rgba(0,0,0,.05)} .about-points li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.8} .about-points li svg{width:19px;height:19px;color:var(--accent);margin-top:5px} [data-theme="light"] .about-points li svg{color:#8a6a12} @media(max-width:900px){.about-grid{grid-template-columns:1fr}} [dir="ltr"] .nav-links a::after{left:16px;right:16px} [dir="ltr"] .mm-num{margin-inline-end:0} .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .dial:focus-within .dial-list{pointer-events:auto} .dial:focus-within .dial-list li{opacity:1;transform:none} .footer-col .fh{font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:14px} .crumbs{margin-bottom:20px} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--text2)} .crumbs li{display:inline-flex;align-items:center;max-width:100%} .crumbs li+li::before{content:'\203A';margin-inline:9px;opacity:.55} [dir="rtl"] .crumbs li+li::before{content:'\2039'} .crumbs a{transition:color .3s}.crumbs a:hover{color:var(--accent)} .crumbs [aria-current] span{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(62vw,440px)} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .post-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:.5px solid var(--border);border-radius:22px;background:var(--card);transition:border-color .3s ease} [data-theme="light"] .post-card{background:#fff;border-color:rgba(0,0,0,.05)} .post-card:hover{border-color:rgba(216,188,94,.42)} .post-card h2{font-family:var(--display);font-size:19px;line-height:1.65;font-weight:600} .post-card p{font-size:14.5px;line-height:1.9;color:var(--text2)} .pc-meta,.post-meta{font-size:13px;color:var(--text2)} .pc-more{margin-top:auto;display:inline-flex;gap:6px;align-items:center;color:var(--accent);font-weight:700;font-size:14.5px} [data-theme="light"] .pc-more{color:#8a6a12} .article-body{max-width:760px;margin:0 auto;font-size:17px;line-height:2.05} .article-body h2{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);line-height:1.55;font-weight:600;margin:42px 0 14px} .article-body h3{font-family:var(--display);font-size:19px;line-height:1.6;font-weight:600;margin:26px 0 8px} .article-body p{margin-bottom:16px} .article-body ul,.article-body ol{margin:0 0 20px;padding-inline-start:26px} .article-body li{margin-bottom:9px} .article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:5px} [data-theme="light"] .article-body a{color:#8a6a12} .article-body blockquote{margin:18px 0;padding:18px 22px;border-inline-start:3px solid var(--accent);background:var(--card);border-radius:14px;color:var(--text2);line-height:2.05} .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;max-width:960px;margin:0 auto} .price-card{display:flex;flex-direction:column;gap:12px;padding:30px 26px;border:.5px solid var(--border);border-radius:22px;background:var(--card)} .price-card h3{font-family:var(--display);font-size:20px} .price-amount{font-family:var(--display);font-size:38px;font-weight:600;color:var(--accent)} .price-amount small{font-size:16px;color:var(--text2)} .price-unit{color:var(--text2);font-size:14px;margin-top:-8px} .price-card .btn-primary{margin-top:auto;justify-content:center} @media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.post-grid{grid-template-columns:1fr}.article-body{font-size:16px}} #quoteForm{display:flex;flex-direction:column} #quoteForm label,#quoteForm fieldset{display:flex;flex-direction:column;border:none} #quoteForm label.rd{flex-direction:row;align-items:center} .post-card h2,.article-body h2,.article-body h3,[id^="page-post-"] h1{font-family:var(--font);font-weight:700} [id^="page-post-"] h1{font-size:clamp(26px,3.2vw,40px);line-height:1.6} .post-card h2{font-size:18.5px} :root{color-scheme:dark} [data-theme="light"]{color-scheme:light} :is(#quoteForm,#partnerForm){gap:20px} :is(#quoteForm,#partnerForm) label,:is(#quoteForm,#partnerForm) legend{font-size:15px;font-weight:600;color:var(--text);gap:8px} :is(#quoteForm,#partnerForm) :is(input[type=text],input[type=number],select,textarea){ width:100%;min-height:52px;padding:13px 16px;border-radius:14px;font:inherit;font-size:16px;font-weight:500;line-height:1.5;color:var(--text); background-color:rgba(255,255,255,.05);border:1px solid rgba(216,188,94,.24);box-shadow:none;transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease} [data-theme="light"] :is(#quoteForm,#partnerForm) :is(input[type=text],input[type=number],select,textarea){background-color:#fff;border-color:rgba(27,59,54,.2)} :is(#quoteForm,#partnerForm) :is(input[type=text],input[type=number],select,textarea):hover{border-color:rgba(216,188,94,.5)} :is(#quoteForm,#partnerForm) :is(input[type=text],input[type=number],select,textarea):focus{outline:none;border-color:var(--accent);background-color:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(216,188,94,.18)} [data-theme="light"] :is(#quoteForm,#partnerForm) :is(input[type=text],input[type=number],select,textarea):focus{background-color:#fff;box-shadow:0 0 0 3px rgba(168,134,32,.2)} :is(#quoteForm,#partnerForm) textarea{min-height:120px;resize:vertical} :is(#quoteForm,#partnerForm) input[type=number]{-moz-appearance:textfield;appearance:textfield} :is(#quoteForm,#partnerForm) input[type=number]::-webkit-outer-spin-button,:is(#quoteForm,#partnerForm) input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} :is(#quoteForm,#partnerForm) select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:46px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D8BC5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:left 16px center;background-size:20px} [dir="ltr"] :is(#quoteForm,#partnerForm) select{background-position:right 16px center} :is(#quoteForm,#partnerForm) select:has(option[value=""]:checked){color:var(--text2)} :is(#quoteForm,#partnerForm) select option{background:#15241f;color:#f6f2e7;font-weight:500} :is(#quoteForm,#partnerForm) select option[value=""]{color:#9aa8a2} [data-theme="light"] :is(#quoteForm,#partnerForm) select option{background:#fff;color:#15241f} :is(#quoteForm,#partnerForm) input:-webkit-autofill,:is(#quoteForm,#partnerForm) textarea:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px #1b2d28 inset;border-color:rgba(216,188,94,.4)} [data-theme="light"] :is(#quoteForm,#partnerForm) input:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset} :is(#quoteForm,#partnerForm) ::placeholder{color:var(--text2);opacity:.75} :is(#quoteForm,#partnerForm) label:has(.f-err:not([hidden])) :is(input,select,textarea){border-color:#ef4444;background-color:rgba(239,68,68,.07)} :is(#quoteForm,#partnerForm) .f-err{color:#f87171;font-size:13px;font-weight:600} [data-theme="light"] :is(#quoteForm,#partnerForm) .f-err{color:#dc2626} :is(#quoteForm,#partnerForm) small{font-size:13px;color:var(--text2)} :is(#quoteForm,#partnerForm) input[type=radio]{accent-color:var(--accent);width:18px;height:18px} :is(#quoteForm,#partnerForm) label.rd{padding:11px 16px;border:1px solid rgba(216,188,94,.24);border-radius:999px;background:rgba(255,255,255,.04);cursor:pointer;font-weight:500;transition:border-color .25s,background-color .25s} [data-theme="light"] :is(#quoteForm,#partnerForm) label.rd{background:#fff;border-color:rgba(27,59,54,.2)} :is(#quoteForm,#partnerForm) label.rd:hover{border-color:rgba(216,188,94,.55)} :is(#quoteForm,#partnerForm) label.rd:has(input:checked){border-color:var(--accent);background:rgba(216,188,94,.12)} :is(#quoteForm,#partnerForm) .f-radios{gap:10px} :is(#quoteForm,#partnerForm) .btn-primary{min-height:54px;font-size:16px;justify-content:center;align-self:stretch} .pform-box{padding:clamp(24px,4vw,44px)} .page.active{animation:none} .hero-badge,.hero-title,.hero-subtitle,.hero-desc,.hero-buttons,.hero-visual{opacity:1;animation:none} .faq-q{margin:0;font-weight:500} .faq-question{width:100%;background:none;border:0;color:inherit;font:inherit;text-align:start;gap:12px} .faq-qtext{flex:1} .faq-question:focus-visible{outline-offset:-3px} .faq-answer{visibility:hidden;transition:max-height .4s var(--ease),visibility 0s .4s} .faq-item.active .faq-answer{visibility:visible;transition:max-height .4s var(--ease),visibility 0s 0s} .nav-logo,.lang-btn,.w-chip,.demo-reset{min-height:44px} .icon-btn{width:44px;height:44px} .footer-col a,.footer-col li{min-height:44px} .footer-bottom-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px} .soc a{width:44px;height:44px} .soc-lg a{width:52px;height:52px} .mm-row .soc a,.mm-foot .soc a,#mobileMenu .soc a{width:44px;height:44px} .nav-logo{min-height:44px} .back-to-top,.mobile-menu-btn{width:44px;height:44px} .crumbs a{display:inline-flex;align-items:center;min-height:44px} .page-hero .animate-on-scroll{opacity:1;transform:none;transition:none} .hero-note{font-size:14px;color:var(--text2);margin-top:16px;line-height:1.8} .demo-cta{padding-top:8px;padding-bottom:8px} .demo-cta .container,.g-cta{text-align:center;display:flex;justify-content:center} .g-cta{margin-top:30px} #about .features-header{max-width:760px;margin:0 auto 34px;text-align:center} .features-header .section-desc{margin-left:auto;margin-right:auto} #about .features-grid{grid-template-columns:repeat(3,1fr)} .price-note{max-width:760px;margin:34px auto 0;padding:28px clamp(20px,3vw,34px);border:.5px solid var(--border);border-radius:22px;background:var(--card);text-align:center} [data-theme="light"] .price-note{background:#fff} .price-note h3{font-family:var(--display);font-size:20px;margin-bottom:8px} .price-note p{color:var(--text2);font-size:15px;line-height:1.9;margin-bottom:18px} .price-note-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .dial-label{display:none} .dm-wa{color:#25D366} @media(max-width:900px){#about .features-grid{grid-template-columns:1fr}} @media(max-width:768px){ .dial-main{width:auto;height:48px;padding:0 16px 0 12px;gap:8px;border-radius:999px} .dial-main .dm-wa{width:24px;height:24px} .dial-label{display:inline;font-size:13.5px;font-weight:700;white-space:nowrap} footer.footer{padding-bottom:92px} .dm-dot{top:-2px} .dial.open .dm-wa{opacity:1;transform:none} .dial.open .dm-x{opacity:0} } @media(max-width:768px){ .r-demo{padding-top:44px;padding-bottom:36px} .demo-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:18px auto 24px;justify-items:stretch;align-items:start} .demo-controls{display:contents} .demo-pick{grid-column:1/-1;text-align:center} .demo-btn{flex-direction:column;justify-content:flex-start;gap:6px;padding:10px 6px;text-align:center;border-radius:14px;min-width:0} .d-ic{width:30px;height:30px;border-radius:9px} .d-ic svg{width:16px;height:16px} .d-t{align-items:center;flex:0 1 auto} .d-t b{font-size:13px;line-height:1.4} .d-t small,.d-go{display:none} .demo-reset{grid-column:1/-1;justify-self:center;align-self:center} .demo-phone{grid-column:1/-1;justify-self:center;order:1} .dp-demo{--w:150px} .demo-note{grid-column:1/-1;order:2;font-size:13.5px;text-align:center} .hero-price{justify-content:center} } .hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:16px;color:var(--text2);margin:0 0 18px} .hero-price b{color:var(--accent);font-size:20px;font-weight:700} .hero-price-link{color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:4px;margin-inline-start:8px} .demo-note,.demo-pick,.demo-reset,.aud-card p,.dr p,.c-card p,.g-note,.pf-privacy,#partnerForm label,#partnerForm legend,#partnerForm small,.f-ok,.f-fail,.pc-meta,.post-meta,.footer-bottom p,.footer-bottom-links a,.footer-col .soon{font-size:14px} :is(#quoteForm,#partnerForm) small{font-size:14px} .w-chip,.shot-tag,.g-chip,.d-t small{font-size:13.5px} .g-grid{grid-template-columns:repeat(2,1fr)} .price-card{position:relative} .price-card.featured{border-color:rgba(216,188,94,.55);background:linear-gradient(180deg,rgba(216,188,94,.08),transparent 60%),var(--card)} [data-theme="light"] .price-card.featured{background:linear-gradient(180deg,rgba(176,138,26,.08),transparent 60%),#fff;border-color:rgba(138,106,18,.45)} .price-badge{position:absolute;top:-12px;inset-inline-start:24px;padding:4px 14px;border-radius:999px;background:var(--accent);color:var(--on-accent,#15241F);font-size:13px;font-weight:700;line-height:1.6} .fs-more>summary{display:none;list-style:none;cursor:pointer;align-items:center;gap:6px;color:var(--accent);font-size:14.5px;font-weight:700;padding:6px 0;min-height:44px} .fs-more>summary::-webkit-details-marker{display:none} .fs-more>summary .ic{width:18px;height:18px;transition:transform .25s} .fs-more[open]>summary .ic{transform:rotate(180deg)} .dial{transition:transform .3s,opacity .3s} @media(min-width:769px){.fs-more>.bullets{display:flex!important}} @media(max-width:768px){ .fs-more>summary{display:inline-flex} .fs-more>.bullets{margin-top:8px} .hero{padding-bottom:20px} .hero-note{margin-top:12px} .mockup-container{height:300px;transform:none} .phone-mockup.phone-left,.phone-mockup.phone-right{display:none} .phone-mockup.phone-center{width:150px;height:300px;transform:none;border-radius:28px} .phone-mockup.phone-center .phone-screen{border-radius:24px} .g-grid{gap:14px} .g-card figcaption{padding:12px 2px 0} .g-card figcaption b{font-size:13.5px;line-height:1.5} .g-card figcaption span{font-size:13px} .price-card.featured{margin-top:8px} .dial{bottom:calc(16px + env(safe-area-inset-bottom,0px))} .dial.compact .dial-label{display:none} .dial.compact .dial-main{width:48px;padding:0;justify-content:center} } .trust-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:960px;margin:0 auto} .trust-row li{display:flex;align-items:center;gap:10px;padding:14px 16px;border:.5px solid var(--border);border-radius:16px;background:var(--card);font-size:14px;line-height:1.6;color:var(--text2)} [data-theme="light"] .trust-row li{background:#fff} .trust-row .ic{width:22px;height:22px;flex-shrink:0;color:var(--accent)} .calc-box{max-width:640px;margin:0 auto;padding:clamp(24px,4vw,40px);border:.5px solid var(--border);border-radius:24px;background:var(--card);text-align:center} [data-theme="light"] .calc-box{background:#fff} .calc-box .section-title{font-family:var(--display);font-size:clamp(22px,3vw,30px);margin-bottom:8px} .calc-in{display:flex;flex-direction:column;gap:8px;max-width:260px;margin:18px auto 20px;font-size:14.5px;color:var(--text2);text-align:center} .calc-in input{height:52px;text-align:center;font-size:22px;font-weight:700;border-radius:14px;border:.5px solid var(--border);background:var(--bg,transparent);color:var(--text)} .calc-res{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .calc-res>div{display:flex;flex-direction:column;gap:6px;padding:16px 10px;border:.5px solid var(--border);border-radius:16px} .calc-res>div span:first-child{font-size:14px;color:var(--text2)} .calc-res b{font-family:var(--display);font-size:26px;color:var(--text)} .calc-res small{font-size:14px;font-weight:600;color:var(--text2)} .calc-res .calc-hi{border-color:rgba(216,188,94,.55);background:rgba(216,188,94,.07)} .calc-res .calc-hi b{color:var(--accent)} .calc-note{display:flex;gap:8px;align-items:flex-start;justify-content:center;font-size:14px;line-height:1.8;color:var(--text2);margin-bottom:18px;text-align:start} .calc-note .ic{width:18px;height:18px;flex-shrink:0;margin-top:4px;color:var(--accent)} .calc-go{justify-content:center} .q-more{margin-top:6px} .q-more>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--accent);font-size:14.5px;font-weight:700;min-height:44px} .q-more>summary::-webkit-details-marker{display:none} .q-more>summary .ic{width:18px;height:18px;transition:transform .25s} .q-more[open]>summary .ic{transform:rotate(180deg)} .q-more>*:not(summary){margin-top:12px} @media(max-width:768px){ .trust-row{grid-template-columns:1fr 1fr;gap:10px} .trust-row li{padding:12px;font-size:13.5px;align-items:flex-start} .calc-res b{font-size:22px} } .dial-main,[data-theme="light"] .dial-main{background:#25D366;border:0;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.3);animation:none} .dial-main:hover{background:#20bd5a} .dial-main .dm-wa,.dm-wa{color:#fff} .dial-label{color:#fff} .dm-dot{display:none} .demo-more{margin:26px auto 0;max-width:820px} .demo-more>summary{display:flex;align-items:center;justify-content:center;gap:8px;list-style:none;cursor:pointer;color:var(--accent);font-size:15px;font-weight:700;min-height:44px} .demo-more>summary::-webkit-details-marker{display:none} .demo-more>summary .ic{width:18px;height:18px;transition:transform .25s} .demo-more[open]>summary .ic{transform:rotate(180deg)} .demo-more .dr-grid{margin-top:14px} @media(max-width:640px){ .r-section{padding-top:44px;padding-bottom:44px} .features-header{margin-bottom:22px} .features-grid{gap:10px} .features-grid .feature-card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:16px;text-align:start} .features-grid .feature-card .feature-icon{grid-row:1/3;margin:0;width:44px;height:44px} .features-grid .feature-card h3{margin:0;font-size:17px} .features-grid .feature-card p{margin:0;font-size:15px} .ps-grid{gap:10px} .ps-grid .ps{display:grid;grid-template-columns:36px 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:16px;text-align:start} .ps-grid .ps .ps-n{grid-row:1/3;margin:0} .ps-grid .ps h3{margin:0;font-size:17px} .ps-grid .ps p{margin:0;font-size:15px} } .mi{fill:currentColor;stroke:none} .d-ic.ok,.dr.ok>svg{color:#4CC38A}.d-ic.dup,.dr.dup>svg{color:#FBBF24}.d-ic.err,.dr.err>svg{color:#F87171} .d-ic.ok{background:rgba(76,195,138,.12)}.d-ic.dup{background:rgba(251,191,36,.12)}.d-ic.err{background:rgba(248,113,113,.12)} .dp-demo .pf-result{position:absolute;inset:0 0 12.5% 0;width:auto;height:auto;left:0;top:0;border-radius:0;display:flex;align-items:flex-end;justify-content:center;padding:0;background:transparent;font-size:calc(var(--w,260px)*.0372);overflow:hidden} .dp-demo .pf-result[data-state="idle"]{display:none} .dp-demo .pf-result:not([data-state="idle"]){background:rgba(4,8,18,.9)} .pf-sheet{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.9em;padding:.7em 1.7em 1.4em;border-radius:1.9em 1.9em 0 0;overflow:hidden;color:#fff;text-align:center;animation:pfUp .38s cubic-bezier(.22,1,.36,1)} @keyframes pfUp{from{transform:translateY(40%);opacity:0}} @media(prefers-reduced-motion:reduce){.pf-sheet{animation:none}} .pf-result[data-state="busy"] .pf-sheet{display:none} .pf-glow{position:absolute;top:0;left:0;right:0;height:2px;opacity:.6;background:var(--pf-c)} .pf-handle{width:2.4em;height:.25em;border-radius:.2em;background:rgba(255,255,255,.18);margin-bottom:.2em} .pf-label{padding:.25em .9em;border-radius:2em;border:1px solid var(--pf-b);background:color-mix(in srgb,var(--pf-c) 8%,transparent);color:var(--pf-c);font-size:.85em;font-weight:700} .pf-ring{width:7.7em;height:7.7em;border-radius:50%;border:1px solid var(--pf-b);background:color-mix(in srgb,var(--pf-c) 6%,transparent);display:flex;align-items:center;justify-content:center;color:var(--pf-c)} .pf-ring .ic{width:4.5em;height:4.5em} .pf-title{font-size:1.5em;font-weight:800;line-height:1.35;white-space:pre-line} .pf-sub{font-size:.95em;color:rgba(255,255,255,.62);line-height:1.5;min-height:1.4em} .pf-btn{margin-top:.2em;width:100%;padding:.8em 0;border-radius:1.2em;background:var(--pf-c);color:var(--pf-t);font-weight:800;font-size:1.05em} .pf-result[data-state="ok"]{--pf-c:#4CC38A;--pf-b:rgba(76,195,138,.28);--pf-t:#0B2418}.pf-result[data-state="ok"] .pf-sheet{background:#0E2A20} .pf-result[data-state="dup"]{--pf-c:#FBBF24;--pf-b:rgba(251,191,36,.28);--pf-t:#1c0900}.pf-result[data-state="dup"] .pf-sheet{background:#2A1302} .pf-result[data-state="err"]{--pf-c:#F87171;--pf-b:rgba(248,113,113,.28);--pf-t:#1a0000}.pf-result[data-state="err"] .pf-sheet{background:#2A0707} .pf-btn{border:0;font-family:inherit;cursor:pointer} :root{--bz:#0D1613;--bz-ring:rgba(255,255,255,.12);--bz-shadow:0 22px 44px rgba(0,0,0,.34);--bz-r:.17;--bz-p:.026} [data-theme="light"]{--bz:#10201B;--bz-ring:rgba(27,59,54,.22);--bz-shadow:0 18px 36px rgba(27,59,54,.2)} .dp,.phone-mockup{--w:230px;width:var(--w);padding:calc(var(--w)*var(--bz-p));border:0;border-radius:calc(var(--w)*var(--bz-r));background:var(--bz);box-shadow:0 0 0 1.5px var(--bz-ring),var(--bz-shadow)} [data-theme="light"] .dp,[data-theme="light"] .phone-mockup{background:var(--bz);box-shadow:0 0 0 1.5px var(--bz-ring),var(--bz-shadow)} .phone-mockup{height:calc(var(--w)*2.04);overflow:hidden} .dp::after,.phone-mockup::before,.phone-mockup::after{display:none} .dp::before,.phone-notch{position:absolute;top:calc(var(--w)*(var(--bz-p) + .026));left:50%;right:auto;transform:translateX(-50%);width:calc(var(--w)*.26);height:calc(var(--w)*.07);border-radius:99px;background:#000;z-index:3;box-shadow:none} .dp .dp-screen,.phone-screen{border-radius:calc(var(--w)*(var(--bz-r) - var(--bz-p)));background:#000} .phone-screen{height:100%} .dp .dp-screen::after,.phone-screen::after{box-shadow:none} .dp.dp-sm{--w:158px} .dp-demo{--w:clamp(220px,18vw,250px)} @media(max-width:768px){ .mockup-container{height:410px;transform:none} .phone-mockup.phone-center{--w:190px;width:var(--w);height:calc(var(--w)*2.04);border-radius:calc(var(--w)*var(--bz-r));transform:none} .phone-mockup.phone-center .phone-screen{border-radius:calc(var(--w)*(var(--bz-r) - var(--bz-p)))} } @media(max-width:380px){.phone-mockup.phone-center{--w:180px}.mockup-container{height:390px}} .hero-title{font-size:clamp(30px,3.5vw,50px);line-height:1.6;margin-bottom:18px} html[lang="en"] .hero-title{line-height:1.4} @media(max-width:768px){.hero-title{font-size:clamp(26px,7vw,34px);line-height:1.55}} @media(max-width:380px){.hero-title{font-size:26px}}