/* ============================================================
   AITHYS — site.css  ·  «Степь и небо»
   Дизайн-система: editorial-industrial.
   Display: Fraunces (характерный серьёзный гротеск-антиква)
   Body: Manrope (чистый геометрический гротеск)
   Мотив: айтыс — диалог двух голосов (датчик ↔ облако)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Брендовая палитра */
  --navy:#0C2E4E;          /* глубокое ночное небо степи */
  --navy-2:#0A3559;
  --blue:#185FA5;          /* степная синь */
  --blue-light:#4D93D8;
  --sky:#9FC4E8;           /* светлое небо */
  --gold:#FAC775;          /* золото домбры */
  --gold-deep:#E0A848;
  --coral:#D85A30;         /* закат над степью */
  --coral-soft:#E88A66;
  --ink:#1A1814;           /* почти чёрный, тёплый */
  --charcoal:#2C2C2A;
  --sand:#F4EFE6;          /* песок / бумага */
  --mist:#EAE4D8;          /* туман над степью */
  --cream:#FBF8F2;         /* кремовый фон */
  --text-muted:#6B6862;
  --border:#DAD3C4;
  --green:#1D9E75;

  /* Семантические */
  --bg:var(--cream);
  --surface:#FFFFFF;

  /* Типографика */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;

  /* Тени — мягкие, тёплые */
  --shadow-sm:0 1px 3px rgba(26,24,20,.06),0 1px 2px rgba(26,24,20,.04);
  --shadow-md:0 8px 24px rgba(12,46,78,.08),0 2px 6px rgba(12,46,78,.05);
  --shadow-lg:0 24px 60px rgba(12,46,78,.14),0 8px 20px rgba(12,46,78,.08);
  --shadow-gold:0 10px 40px rgba(250,199,117,.35);

  --radius:16px;
  --radius-sm:10px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--charcoal);
  line-height:1.65;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
::selection{background:var(--gold);color:var(--ink);}

/* Тонкая «бумажная» текстура фона всего сайта */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(159,196,232,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(250,199,117,.10), transparent 55%);
}
/* Зернистость (grain) для тактильности */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,248,242,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(218,211,196,.7);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.logo{display:flex;align-items:center;gap:13px;}
.logo-mark{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-family:var(--font-display);font-weight:900;font-size:21px;
  box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.logo-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(250,199,117,.25));
}
.logo-text{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:1px;color:var(--navy);}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center;}
.nav-links a{
  position:relative;color:var(--charcoal);font-size:14.5px;font-weight:600;
  padding:6px 0;transition:color .25s var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--coral);transition:width .3s var(--ease);border-radius:2px;
}
.nav-links a:hover,.nav-links a.active{color:var(--navy);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;background:var(--navy);color:#fff;
  border-radius:100px;font-family:var(--font-body);font-weight:700;font-size:14.5px;
  border:none;cursor:pointer;letter-spacing:.2px;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid currentColor;box-shadow:none;}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-gold:hover{background:var(--gold-deep);box-shadow:var(--shadow-gold);}

/* ============================================================
   PAGE HERO — атмосферный, с мотивом айтыса
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;color:#fff;padding:96px 0 88px;
  background:
    radial-gradient(900px 500px at 78% 10%, rgba(24,95,165,.55), transparent 60%),
    radial-gradient(700px 450px at 12% 90%, rgba(216,90,48,.30), transparent 55%),
    linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,#0d3e68 100%);
}
/* «Голос степи» — слой волн айтыса */
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='320' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FAC775' stroke-opacity='.18' stroke-width='1.5'%3E%3Cpath d='M0 160 Q180 90 360 160 T720 160 T1080 160 T1440 160'/%3E%3Cpath d='M0 190 Q180 130 360 190 T720 190 T1080 190 T1440 190' stroke='%239FC4E8' stroke-opacity='.16'/%3E%3Cpath d='M0 130 Q180 60 360 130 T720 130 T1080 130 T1440 130' stroke='%23FAC775' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:center;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 18px;
  background:rgba(250,199,117,.14);color:var(--gold);
  border:1px solid rgba(250,199,117,.3);border-radius:100px;
  font-size:12.5px;font-weight:700;margin-bottom:22px;letter-spacing:1.5px;text-transform:uppercase;
}
.page-hero h1{
  font-family:var(--font-display);font-size:clamp(38px,5.5vw,68px);font-weight:600;
  line-height:1.04;margin-bottom:22px;letter-spacing:-1.5px;
}
.page-hero h1 .accent{color:var(--gold);font-style:italic;font-weight:500;}
.page-hero p{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.86);max-width:780px;font-weight:400;line-height:1.6;}

/* ============================================================
   SECTIONS / TYPOGRAPHY
   ============================================================ */
section{padding:92px 0;position:relative;}
.section-mist{background:linear-gradient(180deg,var(--sand),var(--mist));border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--coral);
  font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;
}
.section-eyebrow::before{content:'';width:28px;height:2px;background:var(--coral);border-radius:2px;}
.section-title{
  font-family:var(--font-display);font-size:clamp(28px,3.6vw,44px);font-weight:600;
  color:var(--navy);line-height:1.12;margin-bottom:18px;letter-spacing:-.8px;
}
.section-subtitle{font-size:18.5px;color:var(--text-muted);max-width:740px;margin-bottom:52px;line-height:1.6;}
h2{color:var(--navy);font-family:var(--font-display);font-weight:600;}

/* ============================================================
   GRIDS & CARDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

.screenshot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:42px;}
.screenshot-card{
  margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.screenshot-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.screenshot-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sand);}
.screenshot-card figcaption{padding:14px 18px;font-size:14px;font-weight:700;color:var(--navy);border-top:1px solid var(--border);}

.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  box-shadow:var(--shadow-sm);
}
/* верхняя «золотая нить» появляется на ховере */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--coral));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card:hover::before{transform:scaleX(1);}
.card .icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--sand),var(--mist));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:20px;
  transition:transform .35s var(--ease);
}
.card:hover .icon{transform:scale(1.08) rotate(-3deg);}
.card h3{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--navy);margin-bottom:11px;letter-spacing:-.3px;}
.card p{font-size:14.5px;color:var(--text-muted);line-height:1.65;}
.card ul{font-size:14.5px;color:var(--text-muted);margin:12px 0 0 18px;}
.card li{margin-bottom:7px;}
.card li::marker{color:var(--coral);}

a.card{display:block;color:inherit;}
a.card h3{display:flex;align-items:center;gap:8px;}
a.card:hover h3::after{content:'→';color:var(--coral);transition:transform .3s;}

/* ============================================================
   PROSE
   ============================================================ */
.prose{max-width:840px;}
.prose h3{font-family:var(--font-display);font-size:27px;font-weight:600;color:var(--navy);margin:42px 0 16px;letter-spacing:-.4px;}
.prose h3:first-child{margin-top:0;}
.prose h4{font-size:16px;font-weight:700;color:var(--coral);margin:26px 0 10px;text-transform:uppercase;letter-spacing:.8px;}
.prose p{font-size:17px;color:var(--charcoal);margin-bottom:17px;line-height:1.75;}
.prose ul{margin:0 0 18px 24px;}
.prose li{margin-bottom:9px;font-size:17px;line-height:1.6;}
.prose li::marker{color:var(--coral);}
.prose strong{color:var(--navy);font-weight:700;}
.lead{font-size:21px;color:var(--navy);margin-bottom:30px;line-height:1.55;font-weight:500;}

/* ============================================================
   STAT ROW
   ============================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;}
.stats-row>div{position:relative;padding:8px 16px;}
.stats-row>div:not(:last-child)::after{content:'';position:absolute;right:-14px;top:20%;height:60%;width:1px;background:var(--border);}
.stat-v{font-family:var(--font-display);font-size:clamp(38px,4.5vw,52px);font-weight:600;color:var(--coral);line-height:1;letter-spacing:-1px;}
.stat-l{font-size:14px;color:var(--text-muted);margin-top:10px;line-height:1.4;}

/* ============================================================
   TABLE
   ============================================================ */
table.data{width:100%;border-collapse:collapse;font-size:15.5px;margin:24px 0;background:var(--surface);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);}
table.data th{text-align:left;padding:15px 16px;background:var(--navy);color:#fff;font-weight:600;font-size:13.5px;letter-spacing:.4px;}
table.data td{padding:14px 16px;border-bottom:1px solid var(--border);}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover td{background:var(--sand);}

/* ============================================================
   CTA — закатный градиент
   ============================================================ */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:88px 0;
  background:
    radial-gradient(700px 400px at 50% -20%, rgba(250,199,117,.22), transparent 60%),
    linear-gradient(135deg,var(--coral) 0%,#b8431f 60%,var(--navy) 100%);
}
.cta::before{
  content:'';position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q240 40 480 100 T960 100 T1440 100' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:cover;
}
.cta .container{position:relative;z-index:1;}
.cta h2{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:600;margin-bottom:16px;color:#fff;letter-spacing:-.8px;}
.cta h2 .accent{color:var(--gold);font-style:italic;}
.cta p{font-size:20px;color:rgba(255,255,255,.9);margin-bottom:36px;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:rgba(255,255,255,.66);padding:64px 0 28px;position:relative;}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold),var(--coral));}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-brand .logo-text{color:#fff;}
.footer-brand p{font-size:14.5px;line-height:1.75;margin-top:16px;max-width:340px;color:rgba(255,255,255,.6);}
.footer-col h5{color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;font-size:14.5px;}
.footer-col a{color:rgba(255,255,255,.66);transition:color .2s,padding-left .2s;}
.footer-col a:hover{color:var(--gold);padding-left:4px;}
.footer-bottom{padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:14px;color:rgba(255,255,255,.5);}

/* ============================================================
   SCROLL REVEAL (только CSS + IntersectionObserver в site.js)
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* page-load stagger для hero */
.page-hero .eyebrow{animation:fadeUp .7s var(--ease) both;}
.page-hero h1{animation:fadeUp .7s var(--ease) .1s both;}
.page-hero p{animation:fadeUp .7s var(--ease) .2s both;}
.page-hero .hero-actions,.page-hero>.container>div:last-child{animation:fadeUp .7s var(--ease) .3s both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .nav-links{display:none;}
  .grid-3,.grid-2,.grid-4,.screenshot-grid,.stats-row,.footer-grid{grid-template-columns:1fr;}
  .stats-row>div:not(:last-child)::after{display:none;}
  .stats-row>div{padding:18px 0;border-bottom:1px solid var(--border);}
  section{padding:60px 0;}
  .page-hero{padding:68px 0 60px;}
}