/* Home page — styles specific to index.html (shared rules live in css/site.css) */

.hero{padding:108px 0 86px}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(45,168,255,.16);filter:blur(25px);right:-180px;top:-160px}
.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(142,240,199,.10);filter:blur(30px);left:-220px;bottom:-220px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
h1{line-height:.98;margin:22px 0 24px;max-width:900px;font-size:clamp(46px,7vw,82px)}
.hero-copy{max-width:720px;margin:0 0 30px}
.hero-actions{margin-bottom:30px}
.tech-row{display:flex;flex-wrap:wrap;gap:9px;color:#aec2d3;font-size:13px}
.tech-row span{border:1px solid var(--line);padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03)}
.hero-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(19,41,65,.95),rgba(12,24,40,.95));border-radius:28px;padding:25px;box-shadow:var(--shadow)}
.hero-card h3{font-size:16px;margin:0 0 20px;color:#cdeaf9;text-transform:uppercase;letter-spacing:.08em}
.workflow{display:grid;gap:12px}
.flow-item{padding:17px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035)}
.flow-item strong{display:block;margin-bottom:4px;font-size:15px}
.flow-item small{color:var(--muted);font-size:13px}
.flow-arrow{text-align:center;color:var(--brand-2);font-weight:900}
.result{background:linear-gradient(135deg,rgba(45,168,255,.14),rgba(142,240,199,.09));border-color:rgba(98,208,255,.24)}

section{padding:88px 0}
.section-copy{max-width:720px;margin:0 0 40px}

.services{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{padding:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-radius:var(--radius);min-height:310px;display:flex;flex-direction:column}
.service-card:hover{border-color:rgba(98,208,255,.36);transform:translateY(-3px);transition:.2s}
.icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(45,168,255,.12);font-size:22px;margin-bottom:20px}
.service-card h3{font-size:23px;line-height:1.15;margin:0 0 12px}
.service-card p{color:var(--muted);margin:0 0 18px}
.service-card ul{margin:0;padding-left:18px;color:#d5e2eb;font-size:14px}
.service-card .more{margin-top:auto;padding-top:24px;color:#98e0ff;font-weight:700;font-size:14px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.compare{display:grid;gap:14px}
.compare-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(255,255,255,.025)}
.compare-card h4{margin:0 0 9px;font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:#9bb0c0}
.compare-card p{margin:0;font-size:18px;color:#e5eff5}
.compare-card.after{border-color:rgba(142,240,199,.28);background:rgba(142,240,199,.06)}

.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.offer.featured{background:linear-gradient(145deg,#123454,#0d2238);border-color:rgba(98,208,255,.4)}
.offer .price{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:14px 0 8px}
.offer .price small{font-size:14px;font-weight:600;color:var(--muted)}
.offer p{color:var(--muted)}

.proof{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
blockquote{margin:0;border:1px solid var(--line);border-radius:20px;padding:25px;background:rgba(255,255,255,.025);color:#e8f2f7}
blockquote p{margin:0 0 22px;font-size:16px}
blockquote footer{color:#9eb3c2;font-size:13px}

@media(max-width:920px){
  .hero-grid,.split{grid-template-columns:1fr}
  .grid-3,.offers,.quote-grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:80px}
}
@media(max-width:640px){
  .grid-3,.offers,.quote-grid{grid-template-columns:1fr}
  .hero{padding:64px 0}
  .hero-copy{font-size:17px}
  .hero-card{padding:18px}
}