* { box-sizing: border-box; }
:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-soft:#fbfbfd;
  --text:#111827;
  --muted:#5f6675;
  --line:#e5e7eb;
  --primary:#2563eb;
  --primary-dark:#0f2b6b;
  --violet:#8b5cf6;
  --shadow:0 12px 40px rgba(15, 23, 42, 0.08);
  --radius:20px;
}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1180px, calc(100% - 40px)); margin:0 auto;}
.site-header{position:sticky; top:0; z-index:50; background:rgba(245,245,247,0.88); backdrop-filter: blur(14px); border-bottom:1px solid rgba(229,231,235,0.9);}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:24px;}
.brand-logo{height:38px; width:auto}
.nav{display:flex; gap:28px; align-items:center;}
.nav a{color:#343c4c; font-weight:500; font-size:15px;}
.button{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:14px; font-weight:600; transition:.2s ease; border:1px solid transparent;}
.button-primary{color:#fff; background:linear-gradient(135deg, var(--primary) 0%, var(--violet) 100%); box-shadow:0 10px 24px rgba(59,130,246,.2);}
.button-primary:hover{transform:translateY(-1px); opacity:.96}
.button-secondary{background:#fff; border-color:var(--line); color:var(--text);}
.button-secondary:hover{border-color:#cfd4dc; transform:translateY(-1px)}
.desktop-cta{min-width:140px}
.menu-toggle{display:none; border:none; background:#fff; width:44px; height:44px; border-radius:12px; box-shadow:var(--shadow); font-size:20px; cursor:pointer;}
.mobile-menu{display:none; padding:0 20px 20px; gap:14px; flex-direction:column;}
.mobile-menu a{padding:10px 4px; color:#334155; font-weight:500;}
.mobile-menu.open{display:flex}
.mobile-menu-cta{margin-top:6px}
.hero{position:relative; padding:52px 0 24px;}
.hero::before{content:""; position:absolute; inset:24px 0 auto; height:620px; background: radial-gradient(circle at 18% 78%, rgba(236,72,153,.22), transparent 22%), radial-gradient(circle at 28% 24%, rgba(59,130,246,.4), transparent 28%), radial-gradient(circle at 75% 20%, rgba(56,189,248,.35), transparent 30%), radial-gradient(circle at 74% 80%, rgba(139,92,246,.18), transparent 22%); z-index:0;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center;}
.hero-copy{padding:26px 0}
.eyebrow{display:inline-flex; padding:8px 12px; border-radius:999px; background:#eef3ff; color:#4561d7; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
h1{margin:18px 0 18px; font-size:clamp(42px, 6vw, 44px); line-height:.98; letter-spacing:-0.04em;}
.hero-text{font-size:21px; color:#4b5563; max-width:720px; margin:0 0 20px}
.hero-points{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px;}
.hero-points li{position:relative; padding-left:28px; color:#273142; font-weight:500;}
.hero-points li::before{content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--violet)); box-shadow:0 0 0 4px rgba(59,130,246,.12);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.hero-trust{display:flex; gap:10px; flex-wrap:wrap}
.trust-badge{background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.7); color:#445065; padding:10px 12px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:var(--shadow);}
.hero-visual{display:flex; justify-content:flex-end}
.visual-card{width:100%; display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:center;}
.device-frame{margin:0 auto; width:min(100%, 420px); background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.65); border-radius:34px; padding:18px; box-shadow:0 30px 60px rgba(37,99,235,.12); backdrop-filter: blur(10px);}
.device-content{background:#ffffffee; border-radius:28px; padding:18px; box-shadow:var(--shadow); min-height:520px;}
.device-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.pill{background:#f3f4f6; padding:8px 14px; border-radius:999px; font-weight:600}
.dots{color:#6b7280; font-size:22px; letter-spacing:2px}
.device-title{font-size:18px; font-weight:700; margin-bottom:16px}
.product-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;}
.mini-product,.mock-card{background:#fff; border:1px solid #eceef2; border-radius:16px; padding:10px;}
.mini-thumb,.mock-thumb{height:92px; border-radius:12px; margin-bottom:10px; background-size:cover; background-position:center;}
.t1{background:linear-gradient(145deg,#ebedf0,#cfd6df)}
.t2{background:linear-gradient(145deg,#615a5a,#b88f67)}
.t3{background:linear-gradient(145deg,#dfe9dc,#9db091)}
.mini-name,.mock-name{font-size:13px; font-weight:700; line-height:1.25; margin-bottom:4px}
.mini-price,.mock-price{font-size:13px; color:#5b6473}
.spec-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; font-size:12px; color:#4b5563; padding:10px 0; border-top:1px solid #eceef2;}
.hero-side-text{background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.7); border-radius:24px; padding:18px 18px 22px; box-shadow:var(--shadow);}
.accordion-item{display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid #e5e7eb;}
.accordion-title{font-size:18px; font-weight:500}
.accordion-icon{font-size:26px; color:#202938}
.accordion-text{padding:18px 0 24px; color:#6b7280; font-size:15px}
.disclaimer-box{background:#f7f8ff; border:1px solid #dbe3ff; color:#425170; border-radius:16px; padding:16px; font-size:14px; line-height:1.45;}
.feature-strip{padding:12px 0 0;}
.feature-strip-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow);}
.strip-item{display:flex; gap:14px; align-items:flex-start}
.strip-icon{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#eef3ff; color:#3457e5; font-weight:800;}
.strip-item h3{margin:2px 0 4px; font-size:17px}
.strip-item p{margin:0; color:var(--muted); font-size:14px}
.section{padding:88px 0}
.section-soft{background:#fafafc; border-top:1px solid #eef0f3; border-bottom:1px solid #eef0f3}
.section-header{max-width:760px; margin:0 auto 34px; text-align:center}
.section-header.left{text-align:left; margin:0 0 24px}
.section-header h2{margin:0 0 10px; font-size:clamp(32px, 4vw, 48px); line-height:1.05; letter-spacing:-.03em}
.section-header p, .lead, .check-card p, .info-card p, .tech-box span, .faq-list p, .mini-note{color:var(--muted)}
.two-col,.openai-grid,.technical-grid,.lead-grid,.faq-grid{display:grid; gap:28px; align-items:start;}
.two-col{grid-template-columns:1.15fr .85fr}
.check-card,.info-card,.tech-box,.lead-form{background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow);}
.check-list,.tech-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.check-list li,.tech-list li{padding-left:28px; position:relative}
.check-list li::before,.tech-list li::before{content:"✓"; position:absolute; left:0; top:0; color:#3155e7; font-weight:800;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--shadow)}
.step-num{width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background:#eef3ff; color:#3155e7; font-weight:800; margin-bottom:18px;}
.step-card h3{margin:0 0 8px}
.openai-grid{grid-template-columns:1.08fr .92fr}
.openai-mockup{background:#fff; border:1px solid var(--line); border-radius:28px; padding:22px; box-shadow:var(--shadow);}
.mock-search{display:inline-flex; background:#f3f4f6; border-radius:999px; padding:8px 14px; color:#495364; font-size:13px; margin-bottom:16px;}
.mock-heading{font-weight:600; margin-bottom:16px}
.mock-products{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.technical-grid{grid-template-columns:1.1fr .9fr}
.deliverable{display:grid; gap:4px; padding:16px 0; border-top:1px solid var(--line);}
.deliverable:first-of-type{border-top:none; padding-top:0}
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.price-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--shadow);}
.price-card.featured{border-color:#b7c5ff; box-shadow:0 22px 48px rgba(99,102,241,.12);}
.ribbon{position:absolute; top:-11px; left:24px; background:linear-gradient(135deg,var(--primary),var(--violet)); color:#fff; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;}
.plan{font-size:18px; font-weight:700}
.price{font-size:42px; font-weight:800; margin:12px 0 4px; letter-spacing:-.04em}
.price span{font-size:18px; font-weight:700}
.plan-sub{color:var(--muted); margin-bottom:16px}
.price-card ul{padding-left:18px; margin:0 0 20px; color:#394355}
.price-card li{margin-bottom:10px}
.full{width:100%}
.lead-grid{grid-template-columns:1fr 520px}
.mini-note{margin-top:18px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--line); max-width:680px;}
.lead-form{display:grid; gap:14px;}
.lead-form label{display:grid; gap:8px; font-weight:600; color:#374151}
input, select, textarea{width:100%; border:1px solid #d7dbe2; border-radius:14px; min-height:50px; padding:0 14px; font:inherit; background:#fff;}
textarea{padding-top:12px; resize:vertical; min-height:120px}
input:focus, select:focus, textarea:focus{outline:none; border-color:#8fb0ff; box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.form-footnote{font-size:13px; color:#6b7280; margin:2px 0 0}
.faq-grid{grid-template-columns:.7fr 1.3fr}
.faq-list details{background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px; margin-bottom:12px; box-shadow:var(--shadow);}
.faq-list summary{cursor:pointer; font-weight:700; list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list p{margin:12px 0 0}
.site-footer{padding:32px 0 42px; border-top:1px solid var(--line); background:#fff;}
.footer-grid{display:grid; grid-template-columns:1fr auto auto; gap:22px; align-items:center;}
.footer-logo{height:34px; width:auto; margin-bottom:8px}
.footer-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-links a{color:#4b5563; font-weight:500}
.footer-note{color:#6b7280; text-align:right}
@media (max-width: 1120px){.hero-grid,.two-col,.openai-grid,.technical-grid,.lead-grid,.faq-grid{grid-template-columns:1fr}.visual-card{grid-template-columns:1fr}.hero-visual{justify-content:center}.feature-strip-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 820px){.desktop-nav,.desktop-cta{display:none}.menu-toggle{display:block}.hero{padding-top:28px}h1{font-size:44px}.hero-text{font-size:18px}.feature-strip-grid,.steps-grid,.pricing-grid{grid-template-columns:1fr}.product-grid,.mock-products{grid-template-columns:1fr 1fr 1fr}.footer-grid{grid-template-columns:1fr; text-align:left}.footer-note{text-align:left}}
@media (max-width: 640px){.container{width:min(100% - 24px, 1180px)}.header-inner{min-height:72px}.brand-logo{height:32px}h1{font-size:36px}.button{width:100%}.hero-actions{flex-direction:column}.product-grid,.mock-products{grid-template-columns:1fr}.spec-row{grid-template-columns:1fr}.section{padding:68px 0}}