@import url("/styles-v9.css?v=flyg-10-20261002");

/* v8 — spacious premium storytelling. One idea, one visual, one pause per section. */
html.js .reveal,html.js .reveal-item { transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1); }
.hero { background:radial-gradient(ellipse at 88% 12%,rgba(28,196,178,.13),transparent 30%),radial-gradient(ellipse at 2% 4%,rgba(40,112,238,.08),transparent 27%),#fbfdff; }
.hero::before { background:linear-gradient(135deg,transparent 0 20%,rgba(37,99,235,.025) 20.15% 20.3%,transparent 20.45%); }
.hero-surface { min-height:790px; padding:118px 0 128px; }
.hero-grid { grid-template-columns:.62fr 1.38fr; gap:72px; }
.hero-copy { max-width:430px; }
.hero h1 { margin:0 0 27px; font-size:clamp(55px,4.7vw,72px); line-height:1.06; }
.hero-copy>p { max-width:420px; font-size:15px; line-height:1.8; }
.hero-actions { margin-top:36px; }
.dashboard-wrap { width:112%; margin-left:-2%; }
.product-demo-frame { border-color:#ccdbe6; border-radius:20px; background:#fff; box-shadow:0 42px 90px rgba(24,64,94,.19),0 8px 24px rgba(24,64,94,.09); transform:none; }
.product-demo-frame .browser-chrome { height:46px; border-bottom-color:#d9e4ec; background:#f8fbfd; }
.product-demo-frame .browser-address { border-color:#d7e2ea; background:#fff; color:#49667a; }
.product-demo { min-height:505px; grid-template-columns:68px minmax(0,1fr); background:#f4f7f9; }
.demo-rail { border-right-color:#d9e3ea; padding:18px 0; }
.demo-rail>span { color:#748898; }
.demo-topbar { height:74px; border-bottom-color:#d9e3ea; background:#fff; }
.demo-topbar small,.demo-services article div small { color:#677d8e; }
.demo-topbar strong,.demo-heading h3,.demo-services article div strong { color:#102a3d; }
.demo-workspace { padding:34px 34px 29px; }
.demo-heading h3 { font-size:25px; }
.demo-services { gap:16px; margin-top:26px; }
.demo-services article { min-height:112px; padding:18px; border-color:#ccdbe5; box-shadow:0 7px 17px rgba(31,70,96,.06); }
.demo-services article.selected { border-color:#278cf2; box-shadow:0 10px 25px rgba(8,117,238,.13); }
.demo-services article div strong { font-size:11px; }
.demo-services article div em { color:#6d8190; font-size:8px; }
.demo-input { margin-top:20px; }
.demo-input>span { color:#405f73; }
.demo-input>div { height:48px; border-color:#ccd9e2; color:#778b9a; }
.demo-footer { margin-top:20px; }
.demo-footer>span { color:#456579; }
.demo-footer button { min-height:40px; }

.section { padding:176px 0; }
.section-heading { max-width:670px; margin-bottom:80px; }
.section-heading h2,.pricing-layout h2,.why-layout>div:first-child h2,.faq-layout h2,.reseller-copy h2 { font-size:clamp(43px,4.5vw,62px); line-height:1.1; }
.section-heading>p:last-child,.section-copy { max-width:520px; margin-top:20px; font-size:14px; line-height:1.85; }
.eyebrow { margin-bottom:16px; }

.services-section { padding:185px 0 205px; background:#fff; }
.services-section::before { display:none; }
.services-section .section-heading { max-width:660px; margin-bottom:100px; }
.services-section .section-heading h2 { font-size:clamp(43px,4.5vw,62px); }
.service-grid { display:grid; grid-template-columns:1fr; gap:96px; }
.service-card { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:84px; min-height:590px; padding:74px 76px; border:0; border-radius:32px; box-shadow:none; }
.service-card.ink { grid-template-columns:1.22fr .78fr; background:linear-gradient(135deg,#fbfcfd,#f6f8fa); }
.service-card.ink .service-copy { order:2; }
.service-card.ink .service-visual { order:1; }
.service-card.blue { background:linear-gradient(135deg,#f5faff,#edf7ff); }
.service-card:hover { transform:none; box-shadow:none; }
.service-copy { position:relative; z-index:2; max-width:390px; }
.service-icon { width:54px; height:54px; margin-bottom:34px; border-radius:15px; background:#fff; box-shadow:0 12px 28px rgba(27,75,116,.08); }
.service-icon svg { width:25px; height:25px; }
.service-card h3 { margin:0 0 18px; font-size:clamp(31px,3.2vw,43px); line-height:1.14; }
.service-card p,.service-card.ink p { max-width:390px; color:#536a7d; font-size:14px; line-height:1.85; }
.service-copy>a { display:inline-flex; align-items:center; gap:9px; margin-top:31px; color:#0875ee; font-size:12px; font-weight:800; }
.service-visual { display:grid; place-items:center; min-height:430px; }
.social-preview { width:min(100%,480px); padding:22px; border:1px solid #d4e2ec; border-radius:28px; background:#fff; box-shadow:0 32px 65px rgba(33,80,111,.14); transform:rotate(-2deg); }
.ink .social-preview { transform:rotate(2deg); }
.social-preview-head { display:flex; align-items:center; gap:10px; height:34px; }
.social-preview-head>span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#e9f3ff; color:#1877f2; }
.ink .social-preview-head>span { background:#f2f4f7; color:#101828; }
.social-preview-head svg { width:17px; height:17px; }
.social-preview-head i { display:block; height:8px; border-radius:99px; background:#e1e9ef; }
.social-preview-head i:nth-child(2) { width:92px; }
.social-preview-head i:nth-child(3) { width:52px; }
.social-preview-media { display:grid; place-items:center; height:268px; margin-top:18px; border-radius:20px; background:radial-gradient(circle at 72% 25%,rgba(51,174,255,.42),transparent 30%),linear-gradient(145deg,#1175e9,#0dc2af); color:#fff; }
.ink .social-preview-media { background:radial-gradient(circle at 70% 28%,rgba(255,94,129,.48),transparent 29%),linear-gradient(145deg,#111827,#26334a); }
.social-preview-media span { display:grid; place-items:center; min-width:64px; height:48px; padding:0 15px; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(0,27,68,.18); color:#e83652; font-size:13px; font-weight:800; }
.ink .social-preview-media span { color:#111827; font-size:24px; }
.social-preview-stats { display:flex; gap:10px; padding-top:19px; }
.social-preview-stats b { display:block; width:28%; height:9px; border-radius:99px; background:#e6edf2; }
.social-preview-stats b:first-child { width:40%; background:#b9dbff; }

.how-section { min-height:850px; padding:180px 0 190px; background:linear-gradient(145deg,#f6f9fc,#f2faf8); }
.how-section::after { opacity:.4; }
.how-section .section-heading { margin-bottom:92px; }
.steps { gap:42px; }
.step { min-height:250px; padding:20px 40px 30px 0; }
.step+.step { padding-left:40px; }
.step-icon { width:62px; height:62px; margin-bottom:30px; background:#fff; box-shadow:0 12px 30px rgba(42,82,112,.07); }
.step>span { color:rgba(8,117,238,.09); font-size:56px; }
.step h3 { font-size:19px; }
.step p { max-width:270px; font-size:13px; line-height:1.8; }

.why-section { min-height:800px; padding:185px 0; background:linear-gradient(90deg,#fff 0 55%,#f4f9fc 55% 100%); }
.why-layout { grid-template-columns:.9fr 1.1fr; gap:150px; }
.why-proof { padding:45px; border:0; border-radius:26px; box-shadow:0 28px 65px rgba(22,52,84,.1); }
.proof-header strong { font-size:15px; }
.proof-header small { font-size:11px; }
.proof-list { grid-template-columns:1fr; gap:22px; margin-top:38px; padding-top:30px; }
.proof-list span { font-size:12px; }

.reseller-section { padding:165px 0; background:#f6f8fb; }
.reseller { min-height:620px; grid-template-columns:1.12fr .88fr; gap:100px; padding:86px; border-radius:32px; }
.code-visual { transform:scale(1.04); }
.reseller:hover .code-visual { transform:scale(1.04) translateY(-4px); }
.reseller-copy ul { display:none; }
.reseller-copy>p:not(.eyebrow) { margin-top:24px; font-size:14px; line-height:1.85; }
.reseller-copy .button { margin-top:32px; }

.pricing-section { min-height:760px; padding:180px 0; background:linear-gradient(140deg,#f4faf8,#f6f9fd); }
.pricing-section::before { display:none; }
.pricing-layout { gap:150px; }
.price-panel { padding:24px 38px 32px; border-radius:24px; box-shadow:0 25px 60px rgba(25,62,90,.1); }
.price-row { padding:28px 0; }
.faq-section { padding:185px 0; background:#fff; }
.faq-layout { gap:150px; }
.faq-list summary { padding:24px 0; }
.cta-section { padding:20px 0 150px; background:#fff; }
.cta-box { min-height:260px; padding:64px 70px; border-radius:28px; }
footer { padding-top:90px; }

@media (prefers-color-scheme:dark) and (scripting:none) {
  .hero { background:radial-gradient(ellipse at 88% 12%,rgba(28,196,178,.15),transparent 30%),#091522; }
  .services-section,.faq-section,.cta-section { background:#0b1220; }
  .service-card.blue { background:linear-gradient(135deg,#10243b,#123249); }
  .service-card.ink { background:linear-gradient(135deg,#111827,#182434); }
  .service-card p,.service-card.ink p { color:#b3c1ce; }
  .social-preview { border-color:#33495a; background:#142333; }
  .why-section { background:linear-gradient(90deg,#0b1220 0 55%,#0e1b29 55% 100%); }
}
@media (max-width:1000px) {
  .hero-surface { padding:90px 0 110px; }
  .hero-grid { grid-template-columns:1fr; }
  .dashboard-wrap { width:100%; margin:20px 0 0; }
  .service-card,.service-card.ink { grid-template-columns:1fr; gap:52px; padding:58px; }
  .service-card.ink .service-copy { order:1; }
  .service-card.ink .service-visual { order:2; }
  .why-layout,.pricing-layout,.faq-layout { gap:80px; }
  .reseller { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .hero-surface { min-height:0; padding:70px 0 86px; }
  .hero h1 { font-size:46px; }
  .dashboard-wrap { margin-top:8px; }
  .product-demo { min-height:0; grid-template-columns:1fr; }
  .demo-workspace { padding:23px 16px 21px; }
  .section,.services-section,.how-section,.why-section,.pricing-section,.faq-section { min-height:0; padding:112px 0; }
  .section-heading,.services-section .section-heading,.how-section .section-heading { margin-bottom:58px; }
  .service-grid { gap:46px; }
  .service-card,.service-card.ink { min-height:0; gap:42px; padding:36px 24px; border-radius:24px; }
  .service-visual { min-height:300px; }
  .social-preview { padding:15px; border-radius:20px; }
  .social-preview-media { height:200px; }
  .steps { gap:0; }
  .why-section { background:linear-gradient(180deg,#fff,#f4f9fc); }
  .why-layout { gap:62px; }
  .why-proof { padding:28px; }
  .reseller-section { padding:105px 0; }
  .reseller { min-height:0; padding:42px 24px; }
  .pricing-layout,.faq-layout { gap:65px; }
  .cta-section { padding:0 0 100px; }
  .cta-box { min-height:0; padding:45px 28px; }
}