:root{
  --bg1:#2d3748;--bg2:#4a5568;--bg3:#2b6cb0;--txt:#fff;--dim:rgba(255,255,255,.9);
  --pri1:#4299e1;--pri2:#63b3ed;--glass:rgba(255,255,255,.1);--glass2:rgba(255,255,255,.2);
  --rad:20px;--shadow:0 14px 30px rgba(0,0,0,.25);--maxw:1200px;--pad:20px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));color:var(--txt);
  line-height:1.5;scroll-behavior:smooth; overflow-x:hidden;
}
a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--pri2);outline-offset:2px}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--glass),transparent 30%);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08);
  padding-top:max(12px,var(--safe-top));
}
nav{display:flex;align-items:center;justify-content:space-between;padding-block:14px;position:relative}
.nav-left{display:flex;align-items:center;gap:28px}
.logo{font-weight:800;font-size:clamp(20px,3vw,28px);background:linear-gradient(45deg,#63b3ed,#90cdf4,#bee3f8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:10px}
.logo img{height:28px;width:28px;border-radius:8px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links>li{list-style:none;position:relative}
.nav-links>li>a{display:inline-flex;gap:6px;align-items:center;font-weight:700;opacity:.95;padding:8px 10px;border-radius:10px}
.nav-links>li>a:is(:hover,:focus-visible){color:#90cdf4;background:rgba(255,255,255,.06)}
.submenu{position:absolute;left:0;top:100%;margin-top:8px;min-width:230px;background:rgba(18,24,40,.85);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;z-index:100}
.submenu li{list-style:none}
.submenu a{display:block;padding:10px 12px;border-radius:10px;font-weight:600}
.submenu a:is(:hover,:focus-visible){background:rgba(255,255,255,.08);color:#90cdf4}
.nav-links>li:focus-within .submenu,.nav-links>li:hover .submenu{display:block}
.nav-right{display:flex;align-items:center;gap:10px}
.btn{--p:12px 22px;display:inline-flex;align-items:center;justify-content:center;padding:var(--p);border-radius:999px;
  font-weight:800;font-size:14px;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn-primary{background:linear-gradient(45deg,var(--pri1),var(--pri2));color:#fff}
.btn-outline{background:transparent;border-color:#fff;color:#fff}
.btn:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:var(--shadow)}
.language-switcher,.nav-toggle{padding:8px 14px;border:0;border-radius:999px;background:var(--glass2);font-weight:800;color:#fff}
.nav-toggle{display:none}

.hero{padding-block:clamp(56px,8vw,96px);text-align:center}
.hero h1{font-weight:900;font-size:clamp(32px,6vw,64px);margin:0 0 12px;background:linear-gradient(45deg,#fff,#90cdf4,#63b3ed);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{max-width:720px;margin:0 auto 28px;font-size:clamp(16px,2.2vw,20px);opacity:.92}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
section{content-visibility:auto;contain-intrinsic-size:1000px 400px}
.samples,.features,.pricing{padding-block:56px}
h2{font-size:clamp(24px,3.4vw,40px);text-align:center;margin:0 0 32px;background:linear-gradient(45deg,#fff,#90cdf4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.samples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:var(--glass);border-radius:var(--rad);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.card:is(:hover,:focus-within){transform:translateY(-6px);box-shadow:var(--shadow)}
.sample-image{aspect-ratio:4/3;display:grid;place-items:center;font-weight:800;background:linear-gradient(45deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);color:#fff}
.sample-info{padding:16px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(45deg,#ff6b6b,#feca57);font-size:12px;font-weight:800;margin-bottom:8px}
.prompt{font-size:14px;opacity:.9}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.feature{padding:28px 18px;text-align:center;background:var(--glass);border-radius:var(--rad)}
.feature .ico{font-size:32px;display:block;margin-bottom:10px}
.feature h3{color:#90cdf4;margin:6px 0 10px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.price{background:var(--glass);border-radius:var(--rad);padding:24px}
.price h3{margin:0 0 8px}.price .num{font-size:28px;font-weight:900;margin:6px 0 14px}.price ul{margin:0;padding-left:18px}

footer{padding:48px 0 36px;border-top:1px solid rgba(255,255,255,.08);text-align:center;padding-bottom:max(24px,calc(var(--safe-bottom) + 12px))}
.footer-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.social{display:flex;gap:16px}.social a{font-size:22px}

@media (max-width: 768px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;
    background:rgba(18,24,40,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 16px 14px}
  .nav-links.open{display:block}
  .nav-links>li{display:block;margin:6px 0}
  .nav-links>li>a{display:block;padding:12px;border-radius:10px}
  .submenu{position:static;display:block;padding:0;background:transparent;border:0;box-shadow:none;margin-top:0}
  .submenu a{padding:10px 12px}
  .hero{ padding-block: 44px; }
  .hero h1{ font-size: clamp(28px, 9vw, 40px); }
  .sub{ font-size: 15px; }
  .btn{ --p: 10px 16px; font-size: 13px; }
  .samples-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media(hover:none){.btn{box-shadow:none!important}}