/* ============================================================ Poyvisor — Tasarım Sistemi / Design System Tek dosya. Her sayfaya ile bağla. Tema: :root değişkenlerini değiştir ya da kullan. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ --ink:#0A0E19; --ink-soft:#0E1424; --card:rgba(255,255,255,.045); --card-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --txt:#fff; --txt-2:rgba(255,255,255,.72); --txt-3:rgba(255,255,255,.5); --accent:#9A92FF; --grad:linear-gradient(115deg,#7A2FF2 0%,#5B54FF 48%,#2EA6FF 100%); --glow1:rgba(122,47,242,.36); --glow2:rgba(46,166,255,.30); --ok:#2BD07A; --warn:#F7A93B; --info:#38B6FF; --maxw:1200px; --pad:clamp(18px,5vw,40px); --font-display:'Space Grotesk',sans-serif; --font-body:'Manrope',system-ui,-apple-system,sans-serif; } /* İsteğe bağlı renk temaları: */ html[data-accent="okyanus"]{--grad:linear-gradient(115deg,#2E6BFF 0%,#22B7E6 55%,#1FE3BE 100%);--accent:#54D2F2;--glow1:rgba(46,107,255,.34);--glow2:rgba(31,227,190,.26)} html[data-accent="gunbatimi"]{--grad:linear-gradient(115deg,#8A2BE2 0%,#C43BD6 45%,#FF6B8B 100%);--accent:#F08AD2;--glow1:rgba(138,43,226,.36);--glow2:rgba(255,107,139,.26)} html[data-accent="zumrut"]{--grad:linear-gradient(115deg,#4F46E5 0%,#2E9DFF 50%,#1EE0A0 100%);--accent:#5FD9C2;--glow1:rgba(79,70,229,.32);--glow2:rgba(30,224,160,.28)} *{box-sizing:border-box;min-width:0} html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;max-width:100%} body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;max-width:100%} h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance} p{text-wrap:pretty} img{max-width:100%;display:block} a{color:var(--info);text-decoration:none} a:hover{color:var(--accent)} button{font-family:var(--font-body)} /* ---------- layout helpers ---------- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .section{padding:clamp(60px,9vw,110px) 0;position:relative;border-top:1px solid var(--line)} .section--tight{padding:clamp(48px,7vw,80px) 0} .section-head{max-width:760px} .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--grad)} .section h2,.h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;margin:16px 0 0} .lead{color:var(--txt-2);font-size:17px;line-height:1.6;margin:16px 0 0} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shift 6s linear infinite} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;padding:15px 24px;border-radius:13px;font-weight:700;font-size:15.5px;cursor:pointer;border:0;transition:filter .2s ease,transform .2s ease,background .2s ease;white-space:nowrap} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 16px 40px -14px rgba(91,84,255,.9)} .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff} .btn-sm{padding:10px 18px;border-radius:11px;font-size:14.5px} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,14,25,.72);border-bottom:1px solid var(--line)} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap} .logo{display:flex;align-items:center;gap:10px} .logo img{height:34px;width:auto} .logo-word{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--txt);letter-spacing:-.02em} .nav-links{display:flex;gap:18px;white-space:nowrap} .nav-links a{color:var(--txt-2);font-size:14.5px;font-weight:500} .nav-links a:hover{color:#fff} .nav-cta{display:flex;align-items:center;gap:11px;flex-shrink:0} .nav-cta .login{color:var(--txt);font-size:14.5px;font-weight:600;white-space:nowrap} .nav-cta .login:hover{color:var(--accent)} .hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);cursor:pointer;color:#fff;flex-shrink:0;padding:0} .hamburger svg{pointer-events:none} .hamburger .icon-close{display:none} .nav.open .hamburger .icon-close{display:block} .nav.open .hamburger .icon-open{display:none} .nav-menu{display:none;flex-direction:column;gap:2px;padding:8px var(--pad) 16px;border-top:1px solid var(--line);background:rgba(10,14,25,.97);backdrop-filter:blur(14px)} .nav-menu a{color:var(--txt);font-size:16px;font-weight:600;padding:13px 8px;border-radius:10px} .nav-menu a:hover{background:rgba(255,255,255,.06);color:#fff} .nav.open .nav-menu{display:flex} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,76px) 0 clamp(40px,5vw,56px)} .glows{position:absolute;inset:0;pointer-events:none} .glow{position:absolute;border-radius:50%} .glow.g1{top:-18%;left:-6%;width:620px;height:520px;background:radial-gradient(circle,var(--glow1),transparent 62%)} .glow.g2{bottom:-30%;right:-6%;width:680px;height:560px;background:radial-gradient(circle,var(--glow2),transparent 62%)} .hero-grid{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,60px);align-items:center;width:100%} .hero-grid > *{min-width:0} .badge-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--accent);font-size:13px;font-weight:600} .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dot.live{background:var(--ok);box-shadow:0 0 8px var(--ok)} .hero h1{font-size:clamp(36px,5.4vw,58px);line-height:1.03;letter-spacing:-.025em;margin:22px 0 0} .hero .lead{max-width:500px;font-size:clamp(16px,2vw,18.5px)} .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap} .microtrust{display:flex;gap:20px;margin-top:20px;color:var(--txt-3);font-size:13px;flex-wrap:wrap} /* ---------- call demo card ---------- */ .demo-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line-2);border-radius:22px;padding:20px;backdrop-filter:blur(14px);box-shadow:0 40px 80px -34px rgba(0,0,0,.8);animation:floaty 6s ease-in-out infinite;min-width:0;width:100%;max-width:100%;overflow:hidden} .demo-head{display:flex;align-items:center;gap:12px} .demo-avatar{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center} .demo-avatar img{height:24px} .demo-title{color:#fff;font-weight:700;font-size:15px} .demo-status{display:flex;align-items:center;gap:7px;color:var(--txt-3);font-size:12.5px} .demo-clock{font-variant-numeric:tabular-nums;color:#fff;font-weight:600;font-size:15px;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:10px} .phone-row{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:7px;margin-top:16px;min-width:0;max-width:100%} .phone-row .cc{flex-shrink:0} .phone-row .call{flex-shrink:0;white-space:nowrap} .phone-row .cc{padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.07);color:#fff;font-weight:700;font-size:13.5px} .phone-row input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-size:15px} .phone-row input::placeholder{color:rgba(255,255,255,.4)} .phone-row .call{padding:9px 16px;border-radius:9px;border:0;cursor:pointer;background:var(--grad);color:#fff;font-weight:700;font-size:13.5px} .phone-row .call:hover{filter:brightness(1.08)} .wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:44px;margin:18px 0 2px} .wave span{display:block;width:5px;height:40px;border-radius:6px;background:var(--grad);opacity:.85;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite} .transcript{min-height:172px;display:flex;flex-direction:column;gap:14px;margin-top:12px} .tline{display:flex;gap:12px;align-items:flex-start;animation:rise .45s ease both;min-width:0} .tline > div{min-width:0;overflow-wrap:break-word} .tline .t{font-variant-numeric:tabular-nums;color:var(--txt-3);font-size:12px;padding-top:4px;min-width:38px} .tline .tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;margin-bottom:6px} .tline p{margin:0;color:rgba(255,255,255,.9);font-size:14.5px;line-height:1.5} .ringing{display:flex;align-items:center;gap:10px;color:var(--txt-2);font-size:14px;animation:rise .4s ease both} .chips{display:flex;gap:10px;flex-wrap:wrap;animation:rise .5s ease both} .chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-weight:600;font-size:13px} .chip.ok{background:rgba(43,208,122,.14);border:1px solid rgba(43,208,122,.32);color:var(--ok)} .chip.info{background:rgba(46,166,255,.14);border:1px solid rgba(46,166,255,.32);color:var(--info)} /* ---------- marquee ---------- */ .trust{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(28px,4vw,44px) auto 0;padding:0 var(--pad)} .trust-label{color:var(--txt-3);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee-track{display:flex;gap:40px;width:max-content;animation:marquee 34s linear infinite} .marquee-track span{color:rgba(255,255,255,.55);font-weight:600;font-size:17px;font-family:var(--font-display);white-space:nowrap} /* ---------- generic cards & grids ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .25s ease,border-color .25s ease} .card:hover{transform:translateY(-4px);border-color:var(--line-2)} .grid{display:grid;gap:20px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .mt-44{margin-top:44px} .card h3{font-size:20px;color:var(--txt)} .card h4{font-size:18px;color:var(--txt)} .card p{color:var(--txt-2);font-size:14.5px;line-height:1.55;margin:10px 0 0} /* stat row (%39) */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,48px);align-items:center} .stat-huge{display:flex;align-items:flex-start;gap:18px;margin-top:18px} .stat-huge .num{font-family:var(--font-display);font-size:clamp(72px,12vw,120px);font-weight:700;line-height:.9} .stat-huge .cap{padding-top:10px;color:var(--txt);font-size:clamp(20px,2.6vw,26px);font-weight:600;font-family:var(--font-display);line-height:1.2} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px} .tile .n{font-family:var(--font-display);font-size:32px;font-weight:700} .tile .l{color:var(--txt-3);font-size:13.5px;margin-top:6px} /* memory / feature minis */ .kv{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13.5px} .kv .k{color:var(--txt-3)} .kv .v{color:var(--txt);font-weight:600} .bar-row .lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--txt-3);margin-bottom:5px} .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08)} .bar > i{display:block;height:6px;border-radius:6px;background:var(--grad)} .mini-list{margin-top:18px;display:flex;flex-direction:column;gap:9px} .mini-chip{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:10px;font-weight:600;font-size:13px} /* steps */ .step .no{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1} .step .tag{color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:14px} .step h4{margin:8px 0 0;font-size:18px} .step p{color:var(--txt-2);font-size:14px;line-height:1.55;margin:9px 0 0} .compare{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px} .compare-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .compare-row .name{width:150px;color:var(--txt-3);font-size:14px} .compare-row .name.hl{color:var(--txt);font-weight:600} .compare-track{flex:1;min-width:180px;height:16px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden} .compare-track > i{display:block;height:100%} .compare-row .val{font-family:var(--font-display);font-weight:700;font-size:16px;min-width:70px;text-align:right} /* cadence */ .cad-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px} .cad-step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;transition:box-shadow .35s ease} .cad-step.active{box-shadow:0 0 0 4px rgba(122,47,242,.22)} .cad-step .top{display:flex;align-items:center;gap:9px} .cad-step .cdot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14);flex-shrink:0} .cad-step.active .cdot{background:var(--grad)} .cad-step .day{color:var(--txt);font-weight:700;font-size:13px;font-family:var(--font-display)} .cad-step .time{color:var(--txt-3);font-size:12px} .cad-ch{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(255,255,255,.06)} .cad-step .st{color:var(--txt);font-weight:600;font-size:14.5px;margin-top:11px} .cad-step .ds{color:var(--txt-2);font-size:12.5px;line-height:1.5;margin:6px 0 0} .cad-support{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px} .golden{display:flex;align-items:flex-end;gap:8px;margin-top:18px;height:74px} .golden .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px} .golden .track{width:100%;height:60px;display:flex;align-items:flex-end} .golden .track > i{width:100%;border-radius:6px;background:var(--grad)} .golden .h{color:var(--txt-3);font-size:11px} /* sectors */ .sector-wrap{margin-top:44px;display:flex;gap:20px;flex-wrap:wrap;align-items:stretch} .sector-tabs{flex:1 1 220px;display:flex;flex-direction:column;gap:9px} .sector-tab{text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--txt-2);padding:14px 16px;border-radius:13px;display:flex;flex-direction:column;gap:2px;transition:filter .2s ease} .sector-tab:hover{filter:brightness(1.08)} .sector-tab.active{border:0;background:var(--grad);color:#fff} .sector-tab .nm{font-family:var(--font-display);font-weight:600;font-size:15.5px} .sector-tab .us{font-size:12.5px;opacity:.78} .sector-panel{flex:2 1 360px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column} .sector-panel .top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .sector-panel .use{color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .sector-panel h3{font-size:clamp(20px,2.6vw,25px);margin:8px 0 0;max-width:420px;line-height:1.2} .sector-panel .metric{flex-shrink:0;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--accent);font-weight:700;font-size:13px} .bubbles{margin-top:20px;display:flex;flex-direction:column;gap:10px} .bubble{display:flex} .bubble.ai{justify-content:flex-start} .bubble.user{justify-content:flex-end} .bubble div{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.45} .bubble.ai div{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid var(--line)} .bubble.user div{background:var(--grad);color:#fff} /* dashboard */ .dash{margin-top:44px;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 40px 90px -45px rgba(0,0,0,.8)} .dash-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap} .dash-bar .ttl{color:var(--txt);font-weight:700;font-size:14.5px;font-family:var(--font-display);display:flex;align-items:center;gap:10px} .range{display:inline-flex;gap:3px;padding:4px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .range button{padding:6px 13px;border-radius:7px;border:0;cursor:pointer;font-weight:700;font-size:12.5px;background:transparent;color:var(--txt-2);transition:background .2s ease} .range button.active{background:var(--grad);color:#fff} .dash-body{padding:clamp(16px,2.5vw,24px)} .dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px} .dtile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:18px} .dtile .l{color:var(--txt-3);font-size:12.5px;font-weight:600} .dtile .r{display:flex;align-items:baseline;gap:8px;margin-top:8px} .dtile .n{font-family:var(--font-display);font-size:28px;font-weight:700} .dtile .d{color:var(--ok);font-size:12.5px;font-weight:700} .dash-cols{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap} .dash-chart{flex:1.7 1 320px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:20px} .dash-chart .hd{display:flex;justify-content:space-between;align-items:center;color:var(--txt);font-weight:600;font-size:14.5px} .chart{display:flex;align-items:flex-end;gap:4px;height:132px;margin-top:20px} .chart > i{flex:1;border-radius:4px 4px 2px 2px;background:var(--grad);opacity:.85;transition:height .45s ease} .dash-side{flex:1 1 250px;display:flex;flex-direction:column;gap:14px} .dash-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:18px} .dash-card .cap{color:var(--txt);font-weight:600;font-size:14px;margin-bottom:14px} .hrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px} .hrow:last-child{margin-bottom:0} .hrow .k{color:var(--txt-2);font-size:13px;display:inline-flex;align-items:center;gap:8px} .hrow .v{color:var(--txt);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600} .act{display:flex;align-items:center;gap:10px;margin-bottom:12px} .act:last-child{margin-bottom:0} .act .a1{color:var(--txt);font-size:13px;font-weight:600} .act .a2{color:var(--txt-3);font-size:11.5px} /* integrations */ .integr-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px} .integr{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px} .integr .cat{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .integr .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .integr .tags span{padding:7px 12px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);font-weight:600;font-size:14px;font-family:var(--font-display)} .integr.api{background:linear-gradient(160deg,rgba(122,47,242,.16),rgba(46,166,255,.1));border-color:var(--line-2)} /* testimonials */ .tst{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px} .tst .q{color:var(--accent);font-family:var(--font-display);font-size:40px;line-height:.5;height:20px} .tst p{color:var(--txt);font-size:16.5px;line-height:1.6;margin:0;flex:1} .tst .who{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)} .tst .who .nm{color:var(--txt);font-weight:700;font-size:14.5px} .tst .who .rl{color:var(--txt-3);font-size:13px} .tst .m{padding:6px 11px;border-radius:999px;font-weight:700;font-size:12.5px} /* faq */ .faq-wrap{max-width:900px} .faq-head{text-align:center;max-width:640px;margin:0 auto} .faq-list{display:flex;flex-direction:column;gap:12px;margin-top:40px} .faq-item{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--txt);font-family:var(--font-display);font-weight:600;font-size:clamp(15px,2vw,17.5px)} .faq-q:hover{color:var(--accent)} .faq-q .pm{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);font-size:20px;line-height:1;transition:transform .25s ease} .faq-item.open .faq-q .pm{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq-a > div{padding:0 22px 22px;color:var(--txt-2);font-size:15.5px;line-height:1.6} /* pricing */ .price-head{text-align:center;max-width:660px;margin:0 auto} .billing{display:inline-flex;align-items:center;gap:4px;margin-top:26px;padding:5px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .billing button{padding:9px 18px;border-radius:9px;border:0;cursor:pointer;font-weight:700;font-size:14px;background:transparent;color:var(--txt-2)} .billing button.active{background:var(--grad);color:#fff} .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:40px;align-items:stretch} .plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column} .plan.popular{position:relative;background:linear-gradient(180deg,rgba(122,47,242,.14),rgba(46,166,255,.06));border:1.5px solid transparent;box-shadow:0 30px 70px -40px rgba(91,84,255,.9)} .plan.popular::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .plan .pname{color:var(--txt);font-family:var(--font-display);font-weight:600;font-size:19px} .plan .pdesc{color:var(--txt-3);font-size:13.5px;line-height:1.5;margin:8px 0 0;min-height:40px} .plan .price{margin:18px 0 4px;display:flex;align-items:baseline;gap:4px} .plan .price .amt{font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--txt)} .plan .price .per{color:var(--txt-3);font-size:15px} .plan .note{color:var(--txt-3);font-size:12.5px;min-height:18px} .plan .btn{margin:20px 0;justify-content:center} .plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--txt-2);font-size:13.5px} .plan ul li::before{content:"✓ ";color:var(--accent)} .badge-pop{padding:5px 11px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:11.5px} /* final cta */ .cta-band{position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--line-2);background:radial-gradient(700px 340px at 20% 0%,var(--glow1),transparent 60%),radial-gradient(700px 360px at 100% 120%,var(--glow2),transparent 60%),var(--ink);padding:clamp(40px,7vw,80px) clamp(24px,5vw,64px);text-align:center} .cta-wave{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:80px;opacity:.35} .cta-wave i{display:block;width:6px;height:70px;border-radius:6px;background:var(--grad);transform-origin:bottom;animation:eq 1.2s ease-in-out infinite} .cta-band h2{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.025em;max-width:720px;margin:0 auto} .cta-band .lead{max-width:560px;margin-left:auto;margin-right:auto} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} /* footer */ .footer{border-top:1px solid var(--line);padding:clamp(48px,7vw,60px) 0 40px} .footer-top{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap} .footer-brand{max-width:360px;flex:1 1 260px} .footer-brand p{color:var(--txt-2);font-size:14.5px;line-height:1.6;margin:16px 0 0} .footer-cols{display:flex;gap:clamp(40px,6vw,72px);flex-wrap:wrap} .footer-cols h5{color:var(--txt-3);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px} .footer-cols .col a{display:block;color:var(--txt-2);font-size:14px;margin-bottom:11px} .footer-cols .col a:hover{color:#fff} .footer-bottom{max-width:var(--maxw);margin:40px auto 0;padding:24px var(--pad) 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--txt-3);font-size:13px} .footer-bottom .social{display:flex;gap:18px} .footer-bottom .social a{color:var(--txt-2);font-size:13px} .footer-bottom .social a:hover{color:#fff} /* ---------- animations ---------- */ @keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}} @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,208,122,.5)}70%{box-shadow:0 0 0 11px rgba(43,208,122,0)}100%{box-shadow:0 0 0 0 rgba(43,208,122,0)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes shift{to{background-position:200% center}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .pulse{animation:pulse 2s infinite} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .nav-links{display:none} .hamburger{display:inline-flex} .logo{flex-direction:column;align-items:center;gap:4px;margin-right:auto} .logo-word{font-size:16px} .nav-cta{margin-left:16px;gap:10px} .nav-cta .login{font-size:13px} .nav-cta .btn-sm{padding:8px 12px;font-size:13px} } @media (max-width:860px){ .hero-grid{grid-template-columns:1fr} .demo-card{max-width:520px} } @media (prefers-reduced-motion:reduce){ *{animation:none !important} }