:root {
  --ink: #111218;
  --muted: #6e707a;
  --line: #e9e9ee;
  --soft: #f7f7fa;
  --purple: #7655ff;
  --violet: #9d83ff;
  --lavender: #eee9ff;
  --white: #fff;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.section { max-width: var(--max); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.site-header {
  height: 82px; max-width: 1320px; margin: auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px); border-bottom: 1px solid rgba(233,233,238,.65);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { position: relative; width: 26px; height: 22px; display: inline-block; }
.brand-mark i { position: absolute; display: block; border-radius: 20px; transform: rotate(-24deg); }
.brand-mark i:nth-child(1) { width: 13px; height: 7px; left: 0; top: 8px; background: #8065ff; }
.brand-mark i:nth-child(2) { width: 14px; height: 7px; left: 8px; top: 4px; background: #aa91ff; }
.brand-mark i:nth-child(3) { width: 10px; height: 6px; left: 15px; top: 11px; background: #6548ed; }

.nav { display: flex; align-items: center; gap: 38px; font-size: 13px; font-weight: 600; color: #4e5058; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--purple); }
.header-cta {
  background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 18px;
  font-size: 12px; font-weight: 700;
}
.header-cta span, .button span, .text-link span, .project-info a span, .service-card a span { margin-left: 7px; }
.menu-btn { display:none; border:0; background:transparent; width:40px; height:40px; }
.menu-btn span { display:block; width:21px; height:2px; background:var(--ink); margin:5px auto; }

.hero { min-height: 680px; display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: 20px; padding-top: 65px; padding-bottom: 45px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; color: #747680; display:flex; align-items:center; gap:9px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.hero h1 { font-size: clamp(62px, 7vw, 100px); line-height: .92; letter-spacing: -.075em; margin: 28px 0 28px; font-weight: 800; }
.hero h1 em, .contact h2 em { color: var(--purple); font-style: normal; }
.hero-text { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button { display:inline-flex; align-items:center; border-radius:999px; padding:15px 21px; font-size:12px; font-weight:800; }
.button-dark { background: var(--ink); color:#fff; box-shadow: 0 10px 25px rgba(17,18,24,.12); }
.text-link { font-size:13px; font-weight:800; border-bottom:1px solid var(--purple); padding-bottom:7px; }

.hero-art { min-height: 510px; position:relative; display:grid; place-items:center; overflow:hidden; }
.glass-shape {
  width: 380px; height: 300px; border-radius: 45% 55% 50% 40%;
  background: linear-gradient(135deg, rgba(196,181,255,.62), rgba(115,76,255,.18) 45%, rgba(255,255,255,.7));
  transform: rotate(-13deg) skewX(-9deg);
  box-shadow: inset -25px -25px 60px rgba(118,85,255,.14), inset 18px 15px 40px rgba(255,255,255,.9), 0 45px 90px rgba(111,77,230,.15);
  border: 1px solid rgba(130,105,220,.3); position:relative; z-index:3;
}
.glass-inner { position:absolute; inset:35px 60px; border:2px solid rgba(255,255,255,.72); border-radius:50%; transform:rotate(15deg); }
.orb { position:absolute; border-radius:50%; filter:blur(.2px); z-index:4; }
.orb-one { width:86px; height:86px; background:radial-gradient(circle at 30% 25%, #fff, #a78cff 34%, #6646db); right:7%; bottom:17%; box-shadow:0 20px 50px rgba(108,70,220,.28); }
.orb-two { width:42px; height:42px; background:linear-gradient(145deg,#fff,#b9a5ff); left:15%; top:20%; box-shadow:0 12px 30px rgba(100,75,210,.2); }
.art-ring { position:absolute; border:1px solid rgba(118,85,255,.24); border-radius:50%; z-index:2; }
.ring-one { width:500px; height:290px; transform:rotate(-21deg); }
.ring-two { width:420px; height:240px; transform:rotate(24deg); }
.dot-grid { position:absolute; width:110px; height:110px; right:4%; top:8%; opacity:.55; background-image:radial-gradient(#a99bdb 1px, transparent 1px); background-size:13px 13px; }

.trust { padding-top:55px; padding-bottom:95px; text-align:center; }
.trust p { color:#a0a1a9; text-transform:uppercase; font-size:10px; letter-spacing:.15em; font-weight:800; }
.trust-row { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:30px; color:#b0b1b9; font-size:15px; font-weight:700; }
.trust-row i { width:4px; height:4px; border-radius:50%; background:#d2d2d8; }

.services { padding-top:30px; padding-bottom:120px; }
.section-intro, .work-heading { display:grid; grid-template-columns:1fr .65fr; gap:60px; align-items:end; margin-bottom:55px; }
h2 { font-size: clamp(40px, 5vw, 64px); line-height: .98; letter-spacing:-.06em; margin:22px 0 0; }
.section-intro > p, .work-heading > p { color:var(--muted); line-height:1.75; max-width:440px; margin:0 0 4px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.service-card { min-height:310px; padding:28px; border:1px solid var(--line); border-radius:24px; background:#fff; position:relative; transition:transform .3s ease, box-shadow .3s ease; }
.service-card:hover { transform:translateY(-7px); box-shadow:0 25px 60px rgba(30,25,70,.08); }
.service-icon { width:48px; height:48px; border-radius:15px; background:var(--lavender); color:var(--purple); display:grid; place-items:center; font-size:22px; margin-bottom:42px; }
.card-number { position:absolute; top:31px; right:28px; color:#b0b0b8; font-size:11px; font-weight:700; }
.service-card h3 { font-size:20px; letter-spacing:-.035em; margin:0 0 12px; }
.service-card p { color:var(--muted); font-size:13px; line-height:1.7; }
.service-card a { display:inline-block; margin-top:22px; font-size:12px; font-weight:800; }

.work { padding-top:35px; padding-bottom:135px; }
.project-list { display:flex; flex-direction:column; gap:75px; }
.project { display:grid; grid-template-columns:1.4fr .7fr; gap:65px; align-items:center; }
.project-reverse { grid-template-columns:.7fr 1.4fr; }
.project-reverse .project-visual { order:2; }
.project-reverse .project-info { order:1; }
.project-visual { min-height:470px; border-radius:30px; position:relative; overflow:hidden; background:#f1efff; display:grid; place-items:center; }
.project-one { background:linear-gradient(145deg,#f0edff,#fbfbff); }
.project-two { background:linear-gradient(145deg,#f6f0ff,#ece8ff); }
.project-three { background:linear-gradient(145deg,#f4f0ff,#f8f8ff); }
.project-info span:first-child { color:#8c8d96; font-size:10px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.project-info h3 { font-size:48px; letter-spacing:-.06em; margin:15px 0; }
.project-info p { color:var(--muted); line-height:1.75; max-width:360px; }
.project-info a { display:inline-block; margin-top:22px; font-size:12px; font-weight:800; border-bottom:1px solid #aaa; padding-bottom:7px; }

.dashboard { width:72%; height:70%; border-radius:18px; background:rgba(255,255,255,.93); box-shadow:0 35px 80px rgba(87,66,180,.16); padding:28px; transform:rotate(-4deg); }
.dash-top { display:flex; justify-content:space-between; color:#777; font-size:12px; }
.dash-number { font-size:42px; font-weight:800; letter-spacing:-.06em; margin:38px 0 18px; }
.dash-chart { height:100px; display:flex; align-items:end; gap:12px; padding:0 10px; border-bottom:1px solid #eee; }
.dash-chart i { flex:1; border-radius:8px 8px 0 0; background:linear-gradient(#9b82ff,#ded6ff); }
.dash-chart i:nth-child(1){height:38%}.dash-chart i:nth-child(2){height:52%}.dash-chart i:nth-child(3){height:44%}.dash-chart i:nth-child(4){height:76%}.dash-chart i:nth-child(5){height:62%}.dash-chart i:nth-child(6){height:86%}.dash-chart i:nth-child(7){height:100%}
.dash-cards { display:flex; gap:10px; margin-top:24px; }
.dash-cards span { height:34px; flex:1; border-radius:8px; background:#f2f0fa; }

.phone { width:220px; height:390px; border:9px solid #15151b; border-radius:34px; background:#fff; box-shadow:0 35px 70px rgba(70,46,160,.2); padding:48px 22px 20px; transform:rotate(8deg); position:relative; z-index:3; }
.phone-notch { position:absolute; width:75px; height:17px; background:#15151b; border-radius:0 0 12px 12px; left:50%; transform:translateX(-50%); top:-1px; }
.phone small { color:#8d8d98; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.phone strong { display:block; font-size:24px; line-height:1.05; letter-spacing:-.06em; margin-top:12px; }
.travel-card { height:130px; margin-top:24px; border-radius:16px; background:linear-gradient(135deg,#cfc0ff,#7555ee); }
.travel-lines { margin-top:17px; display:grid; gap:9px; }
.travel-lines i { display:block; height:8px; border-radius:8px; background:#ececf0; }
.travel-lines i:nth-child(1){width:80%}.travel-lines i:nth-child(2){width:55%}.travel-lines i:nth-child(3){width:67%}
.plane { position:absolute; font-size:42px; right:16%; top:19%; color:#8c6dff; transform:rotate(-22deg); opacity:.8; }

.health-panel { width:70%; height:68%; background:rgba(255,255,255,.94); border-radius:20px; box-shadow:0 30px 70px rgba(80,55,160,.13); padding:30px; transform:rotate(3deg); position:relative; z-index:2; }
.avatar { width:55px; height:55px; border-radius:50%; background:linear-gradient(135deg,#bba9ff,#7150e8); }
.health-title { width:45%; height:13px; background:#2a2930; border-radius:8px; position:absolute; top:39px; left:100px; }
.health-lines { margin-top:45px; display:grid; gap:17px; }
.health-lines i { height:13px; border-radius:8px; background:#ededf2; }
.health-lines i:nth-child(1){width:90%}.health-lines i:nth-child(2){width:74%}.health-lines i:nth-child(3){width:83%}.health-lines i:nth-child(4){width:61%}
.health-pill { width:80px; height:34px; background:#eee9ff; border-radius:12px; margin-top:32px; }
.health-orb { position:absolute; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff,#aa94ff 35%,#6848e1); right:10%; bottom:8%; box-shadow:0 25px 60px rgba(105,72,220,.2); }

.about { padding-top:35px; padding-bottom:130px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-art { min-height:480px; border-radius:32px; background:#f7f5ff; position:relative; overflow:hidden; display:grid; place-items:center; }
.about-loop { width:330px; height:230px; border:34px solid rgba(127,96,244,.2); border-radius:50%; transform:rotate(-25deg); box-shadow:inset 0 0 35px rgba(125,93,230,.12); }
.about-orb { position:absolute; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#ad98ff 38%,#6849df); box-shadow:0 30px 70px rgba(100,75,200,.2); }
.about-dot { width:8px; height:8px; background:#7a5af1; border-radius:50%; position:absolute; right:16%; top:18%; }
.about-copy > p { color:var(--muted); line-height:1.8; max-width:500px; }
.stats { display:flex; gap:55px; margin-top:40px; }
.stats strong { display:block; font-size:38px; letter-spacing:-.06em; }
.stats strong span { color:var(--purple); }
.stats small { color:#888993; font-size:11px; }

.approach { padding-top:30px; padding-bottom:130px; }
.center-heading { text-align:center; max-width:720px; margin:0 auto 65px; }
.center-heading .eyebrow { justify-content:center; }
.center-heading p { color:var(--muted); line-height:1.7; }
.steps { display:grid; grid-template-columns:repeat(5,1fr); }
.step { position:relative; padding:0 25px; border-left:1px solid var(--line); min-height:170px; }
.step:first-child { border-left:0; }
.step span { display:flex; width:48px; height:48px; border:1px solid #dddce5; border-radius:50%; align-items:center; justify-content:center; color:var(--purple); font-size:11px; font-weight:800; margin-bottom:28px; }
.step b { font-size:14px; }
.step p { color:var(--muted); font-size:12px; line-height:1.7; max-width:150px; }

.contact { max-width:1320px; min-height:470px; background:linear-gradient(105deg,#f7f4ff,#f0ebff); border-radius:35px; overflow:hidden; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:70px 90px; margin-bottom:100px; }
.contact-copy { position:relative; z-index:3; }
.contact h2 { font-size:clamp(45px,5vw,70px); margin-bottom:25px; }
.contact-copy p { max-width:500px; color:#6e6b79; line-height:1.7; margin-bottom:28px; }
.contact-visual { position:absolute; inset:0; }
.contact-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(135,105,255,.13); filter:blur(30px); left:-120px; top:70px; }
.contact-line { width:700px; height:330px; border:32px solid rgba(137,106,255,.15); border-radius:50%; transform:rotate(22deg); position:absolute; left:-100px; bottom:-120px; }
.contact-orb { position:absolute; width:170px; height:170px; border-radius:50%; right:12%; top:25%; background:radial-gradient(circle at 30% 25%,#fff,#b9a7ff 35%,#7654e9); box-shadow:0 30px 70px rgba(102,74,210,.2); }

.footer { max-width:1320px; margin:auto; padding:0 28px 35px; display:grid; grid-template-columns:1fr auto; gap:40px; }
.footer-brand p { color:#8b8c95; font-size:12px; margin-top:12px; }
.footer-links { display:flex; gap:26px; align-items:flex-start; font-size:12px; font-weight:700; }
.footer-links a:hover { color:var(--purple); }
.footer-bottom { grid-column:1/-1; border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; color:#9a9ba3; font-size:11px; }
.footer-bottom a { color:#555661; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }

@media (max-width: 900px) {
  .nav { gap:20px; }
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-art { min-height:420px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .project, .project-reverse { grid-template-columns:1fr; gap:30px; }
  .project-reverse .project-visual, .project-reverse .project-info { order:initial; }
  .about { grid-template-columns:1fr; gap:45px; }
  .steps { grid-template-columns:1fr; gap:0; }
  .step { border-left:0; border-top:1px solid var(--line); padding:22px 0; min-height:0; display:grid; grid-template-columns:60px 1fr; gap:5px 20px; }
  .step:first-child { border-top:0; }
  .step span { grid-row:1/3; margin:0; }
  .step p { grid-column:2; margin:0; max-width:none; }
  .contact { grid-template-columns:1fr; padding:65px 45px; }
  .contact-visual { opacity:.7; }
}
@media (max-width: 680px) {
  .site-header { height:70px; }
  .nav { display:none; position:absolute; left:16px; right:16px; top:76px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 50px rgba(20,20,30,.08); flex-direction:column; align-items:flex-start; }
  .nav.open { display:flex; }
  .header-cta { display:none; }
  .menu-btn { display:block; }
  .hero { min-height:auto; padding-top:70px; }
  .hero h1 { font-size:60px; }
  .hero-art { min-height:330px; }
  .glass-shape { width:270px; height:210px; }
  .ring-one { width:350px; height:210px; }
  .ring-two { width:300px; height:180px; }
  .trust { padding-bottom:70px; }
  .trust-row { flex-wrap:wrap; gap:12px 17px; }
  .trust-row i { display:none; }
  .section-intro, .work-heading { grid-template-columns:1fr; gap:25px; }
  .service-grid { grid-template-columns:1fr; }
  .project-visual { min-height:330px; }
  .dashboard { width:82%; height:72%; }
  .phone { transform:rotate(5deg) scale(.82); }
  .health-panel { width:82%; }
  .project-info h3 { font-size:40px; }
  .stats { gap:25px; }
  .stats strong { font-size:30px; }
  .contact { margin-left:15px; margin-right:15px; border-radius:26px; padding:55px 28px; }
  .contact h2 { font-size:48px; }
  .footer { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; gap:10px; }
}