:root {
--bg:#07111f;
--text:#101827;
--muted:#667085;
--primary:#6d5dfc;
--cyan:#20c9d8;
--light:#f6f8fc;
--white:#fff;
--border:#e7eaf0
}

* {
box-sizing:border-box
}

html {
scroll-behavior:smooth
}

body {
margin:0;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont, "Segoe UI ",sans-serif;
color:var(--text);
line-height:1.6;
background:#fff
}

a {
text-decoration:none;
color:inherit
}

.container {
width:min(1120px,92%);
margin:auto
}

.header {
position:sticky;
top:0;
z-index:20;
background:rgba(255,255,255,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid #edf0f5
}

.nav {
height:72px;
display:flex;
align-items:center;
justify-content:space-between
}

.logo {
font-size:20px;
font-weight:900;
letter-spacing:-.7px
}

.logo span {
color:var(--primary)
}

nav {
display:flex;
gap:27px;
align-items:center;
font-size:14px;
font-weight:700
}

nav a:hover {
color:var(--primary)
}

.nav-cta {
background:var(--text);
color:#fff!important;
padding:11px 18px;
border-radius:10px
}

.menu {
display:none;
border:0;
background:none;
font-size:25px
}

.hero {
background:radial-gradient(circle at 80% 20%,#243c78 0,#0b1730 35%,#07111f 72%);
color:#fff;
padding:85px 0 80px;
overflow:hidden
}

.hero-grid {
display:grid;
grid-template-columns:1.15fr .85fr;
gap:50px;
align-items:center
}

.eyebrow {
font-size:12px;
font-weight:900;
letter-spacing:2px;
color:var(--primary);
margin:0 0 12px
}

.hero .eyebrow {
color:#7ee8ef
}

.hero h1 {
font-size:clamp(42px,6vw,70px);
line-height:1.02;
letter-spacing:-3px;
margin:0 0 25px
}

.hero h1 span {
color:#64e1e7
}

.lead {
font-size:18px;
color:#c9d3e4;
max-width:680px
}

.actions {
display:flex;
gap:12px;
margin:30px 0
}

.btn {
display:inline-flex;
justify-content:center;
align-items:center;
border:0;
border-radius:11px;
padding:14px 22px;
font-weight:800;
cursor:pointer
}

.primary {
background:var(--primary);
color:#fff
}

.secondary {
border:1px solid #50617d;
color:#fff
}

.light {
background:#fff;
color:#101827
}

.trust {
font-size:13px;
color:#aab7ca;
display:flex;
gap:14px;
flex-wrap:wrap
}

.trust span {
color:#6de0e7
}

.phone-wrap {
display:flex;
justify-content:center
}

.phone {
width:260px;
height:520px;
background:#111827;
border:8px solid #27344a;
border-radius:39px;
box-shadow:0 30px 80px #0008;
position:relative;
padding:8px
}

.notch {
position:absolute;
z-index:2;
top:7px;
left:50%;
transform:translateX(-50%);
width:90px;
height:22px;
background:#101827;
border-radius:0 0 16px 16px
}

.screen {
height:100%;
border-radius:28px;
background:linear-gradient(150deg,#edf5ff,#fff);
color:#101827;
padding:70px 22px 20px
}

.screen small {
color:#65738a;
font-weight:800
}

.screen h2 {
font-size:27px;
line-height:1.15
}

.screen h2 b {
color:var(--primary)
}

.app-card {
display:flex;
gap:12px;
padding:15px;
background:#fff;
border-radius:16px;
box-shadow:0 12px 30px #5d6b8b22
}

.app-card span {
font-size:27px
}

.app-card small {
display:block;
font-size:10px;
font-weight:500
}

.bars {
margin:25px 0
}

.bars i {
height:9px;
background:#dfe5ef;
display:block;
border-radius:8px;
margin:10px 0
}

.bars i:first-child {
width:90%
}

.bars i:nth-child(2) {
width:68%
}

.bars i:nth-child(3) {
width:80%
}

.screen button {
width:100%;
padding:13px;
border:0;
border-radius:10px;
background:var(--primary);
color:white;
font-weight:800
}

.stats {
background:#fff;
border-bottom:1px solid var(--border)
}

.stats-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
padding:25px 0
}

.stats-grid div {
padding:0 25px;
border-right:1px solid var(--border)
}

.stats-grid div:last-child {
border:0
}

.stats-grid b,.stats-grid span {
display:block
}

.stats-grid b {
font-size:21px
}

.stats-grid span {
font-size:13px;
color:var(--muted)
}

.section {
padding:90px 0
}

.section h2,.dark h2,.offer h2,.contact h2 {
font-size:clamp(31px,4vw,45px);
line-height:1.1;
letter-spacing:-1.5px;
margin:0 0 12px
}

.section-intro {
color:var(--muted);
margin-top:0
}

.cards {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:35px
}

.cards article {
border:1px solid var(--border);
border-radius:17px;
padding:27px;
background:#fff;
transition:.2s
}

.cards article:hover {
transform:translateY(-4px);
box-shadow:0 15px 35px #1018270d
}

.icon {
font-size:29px
}

.cards h3 {
margin:12px 0 6px
}

.cards p,.project p {
color:var(--muted);
margin:0
}

.dark {
background:var(--bg);
color:#fff;
padding:90px 0
}

.dark .eyebrow {
color:#6de0e7
}

.steps {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:40px
}

.steps >div {
border-top:1px solid #314058;
padding-top:20px
}

.steps strong {
font-size:14px;
color:#6de0e7
}

.steps h3 {
margin:12px 0 5px
}

.steps p {
color:#9eabc0;
font-size:14px
}

.portfolio {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:35px
}

.project {
border:1px solid var(--border);
border-radius:17px;
padding:20px
}

.mock {
height:220px;
border-radius:12px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#6d5dfc,#20c9d8);
color:#fff;
font-size:25px;
font-weight:700
}

.mock.blue {
background:linear-gradient(135deg,#152b4e,#2870a8)
}

.project h3 {
margin-bottom:4px
}

.offer {
padding:60px 0;
background:linear-gradient(100deg,#6d5dfc,#20aebd);
color:#fff
}

.offer .eyebrow {
color:#d8ffff
}

.offer-box {
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}

.offer-box p:not(.eyebrow) {
color:#e7ffff
}

.faq details {
border-bottom:1px solid var(--border);
padding:20px 0
}

.faq summary {
font-weight:800;
cursor:pointer
}

.faq details p {
color:var(--muted)
}

.contact {
background:var(--light);
padding:90px 0
}

.contact-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:70px
}

.contact-info {
margin-top:25px
}

.contact-info a {
font-weight:700
}

.contact form {
background:#fff;
padding:28px;
border-radius:18px;
box-shadow:0 15px 50px #1018270c
}

.contact label {
font-weight:700;
font-size:13px;
display:block;
margin-bottom:15px
}

.contact input,.contact textarea {
display:block;
width:100%;
margin-top:6px;
border:1px solid #dce1ea;
border-radius:9px;
padding:12px;
font:inherit
}

.contact textarea {
resize:vertical
}

.contact button {
width:100%;
margin-top:5px
}

footer {
background:#07111f;
color:#93a0b4;
font-size:12px
}

.footer {
display:flex;
justify-content:space-between;
padding:25px 0
}

@media(max-width:800px) {
nav {
display:none;
position:absolute;
top:72px;
left:0;
right:0;
background:#fff;
padding:18px 5%;
flex-direction:column;
align-items:stretch;
box-shadow:0 15px 30px #0001
}

.nav.open nav {
display:flex
}

.menu {
display:block
}

.hero {
padding:60px 0
}

.hero-grid {
grid-template-columns:1fr
}

.phone-wrap {
display:none
}

.hero h1 {
letter-spacing:-2px
}

.cards {
grid-template-columns:1fr 1fr
}

.steps {
grid-template-columns:1fr 1fr
}

.contact-grid {
grid-template-columns:1fr;
gap:35px
}

.offer-box {
align-items:flex-start;
flex-direction:column
}
}

@media(max-width:520px) {
.cards,.portfolio,.steps,.stats-grid {
grid-template-columns:1fr
}

.stats-grid div {
border-right:0;
border-bottom:1px solid var(--border);
padding:15px 0
}

.section,.contact {
padding:65px 0
}

.hero h1 {
font-size:42px
}

.actions {
flex-direction:column
}

.actions .btn {
width:100%
}

.footer {
flex-direction:column;
gap:8px
}
}