:root{
  --bg:#fbfcff;
  --ink:#0b1633;
  --muted:#5b6b8b;

  /* playful dark blue */
  --blue-900:#071a54;
  --blue-800:#0b2c8a;
  --blue-700:#1242c6;
  --blue-600:#2d63ff;
  --blue-200:#dbe8ff;

  --teal:#11d7c2;
  --violet:#8a5cff;

  --card:#ffffff;
  --stroke:rgba(11,44,138,.12);
  --shadow: 0 18px 40px rgba(7, 26, 84, .08);
  --shadow-soft: 0 10px 24px rgba(7, 26, 84, .06);

  --radius:18px;
  --radius-sm:14px;
  --container: 1120px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(45,99,255,.16), transparent 55%),
    radial-gradient(1000px 700px at 110% 0%, rgba(138,92,255,.14), transparent 50%),
    var(--bg);
}

img{max-width:100%;display:block}

.skip{
  position:absolute;left:-999px;top:10px;
  background:#fff;color:#000;padding:10px 12px;border-radius:12px;
  border:1px solid var(--stroke);
}
.skip:focus{left:10px;z-index:9999}

.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}

.section{padding:84px 0}
.section-tint{
  background:
    radial-gradient(900px 550px at 10% 10%, rgba(17,215,194,.08), transparent 60%),
    radial-gradient(900px 550px at 90% 20%, rgba(45,99,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(219,232,255,.25), rgba(255,255,255,.0));
  border-top:1px solid rgba(11,44,138,.06);
  border-bottom:1px solid rgba(11,44,138,.06);
}

h1,h2,h3{line-height:1.05; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem, 4vw, 3.4rem); margin:0 0 14px}
h2{font-size:clamp(1.7rem, 2.8vw, 2.2rem); margin:0 0 14px}
h3{font-size:1.05rem; margin:0 0 8px}

p{color:var(--muted); line-height:1.65; margin:0 0 14px}

.grad{
  background: linear-gradient(90deg, var(--blue-800), var(--blue-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background: #ffffff;
  border-bottom:1px solid rgba(11,44,138,.08);
}
.site-header.is-elevated{box-shadow: 0 10px 24px rgba(7, 26, 84, .06)}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.logo{width:40px; height:40px; border-radius:14px; background: linear-gradient(145deg, var(--blue-800), var(--blue-600)); position:relative; box-shadow: var(--shadow-soft)}
.logo-dot{position:absolute; inset:10px; border-radius:12px; background: rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.25)}
.brand-text{display:flex; flex-direction:column}
.brand-name{font-weight:800; font-size:1rem}
.brand-tag{font-size:.78rem; color:var(--muted)}

.nav{display:flex; align-items:center; gap:10px}
.nav-menu{display:flex; align-items:center; gap:14px}
.nav-menu a{
  text-decoration:none;
  color:rgba(11,22,51,.86);
  font-weight:600;
  font-size:.95rem;
  padding:10px 10px;
  border-radius:12px;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav-menu a:hover{background:rgba(219,232,255,.55)}
.nav-menu a.pill{background:rgba(45,99,255,.12); border:1px solid rgba(45,99,255,.18)}

.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(11,44,138,.14);
  background:#fff;
}
.hamburger{display:block; width:18px; height:2px; background:var(--blue-800); position:relative; margin:0 auto; border-radius:2px}
.hamburger:before,.hamburger:after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--blue-800); border-radius:2px}
.hamburger:before{top:-6px}
.hamburger:after{top:6px}

.hero{padding:56px 0 0; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns: 1.08fr .92fr; gap:30px; align-items:center}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:rgba(11,44,138,.9);
  background: rgba(219,232,255,.6);
  border:1px solid rgba(11,44,138,.12);
  padding:8px 12px; border-radius:999px;
  margin:0 0 14px;
}

.subhead{font-size:1.05rem; max-width:54ch}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn.primary{background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); color:#fff; box-shadow: var(--shadow)}
.btn.primary:hover{transform: translateY(-1px); box-shadow: 0 22px 50px rgba(7, 26, 84, .16)}
.btn.ghost{background: rgba(255,255,255,.75); border-color: rgba(11,44,138,.18); color: var(--blue-800)}
.btn.ghost:hover{transform: translateY(-1px)}

.trust-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.trust-chip{
  font-size:.92rem;
  font-weight:700;
  color: rgba(11,22,51,.84);
  background: rgba(255,255,255,.7);
  border:1px solid rgba(11,44,138,.12);
  border-radius: 999px;
  padding:8px 12px;
  box-shadow: 0 10px 18px rgba(7, 26, 84, .04);
}
.chip-ico{margin-right:6px}

.hero-art{position:relative; min-height:420px}
.orb{position:absolute; border-radius:999px; filter: blur(0px); opacity:.9}
.orb-a{width:240px;height:240px; background: radial-gradient(circle at 30% 30%, rgba(45,99,255,.8), rgba(45,99,255,.08)); top:-40px; right:60px; animation: float 6s var(--ease) infinite}
.orb-b{width:220px;height:220px; background: radial-gradient(circle at 30% 30%, rgba(138,92,255,.7), rgba(138,92,255,.08)); bottom:-30px; left:20px; animation: float 7s var(--ease) infinite reverse}

.mock-card{
  position:relative;
  margin-left:auto;
  width:min(420px, 100%);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(11,44,138,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mock-top{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 0}
.mock-pill{font-size:.85rem; font-weight:800; color:var(--blue-800); background: rgba(17,215,194,.12); border:1px solid rgba(17,215,194,.22); padding:8px 10px; border-radius:999px}
.mock-status{font-size:.85rem; font-weight:800; color:#0b7a59; background: rgba(17,215,194,.18); padding:8px 10px; border-radius:999px}
.mock-body{padding:14px}
.mock-line{height:10px; border-radius:999px; background: rgba(11,44,138,.10); margin:10px 0}
.mock-line.wide{height:14px; background: rgba(11,44,138,.12)}
.mock-metrics{display:flex; gap:10px; margin-top:14px}
.metric{flex:1; background: rgba(219,232,255,.5); border:1px solid rgba(11,44,138,.12); border-radius:14px; padding:12px}
.metric-num{font-weight:900; color:var(--blue-800); font-size:1.2rem}
.metric-lbl{font-size:.86rem; color:var(--muted); font-weight:700}
.mock-btn{margin-top:14px; background: linear-gradient(135deg, var(--violet), var(--blue-600)); color:#fff; font-weight:900; border-radius:14px; padding:12px; text-align:center}

.float-tag{
  position:absolute;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(11,44,138,.14);
  box-shadow: 0 12px 20px rgba(7, 26, 84, .08);
  font-weight:900;
  color: rgba(11,22,51,.86);
  animation: float 5.6s var(--ease) infinite;
}
.tag-1{top:40px; left:18px}
.tag-2{bottom:82px; right:26px; animation-duration:6.5s}
.tag-3{bottom:24px; left:84px; animation-duration:7.2s}

.hero-wave{
  height:60px;
  background: radial-gradient(900px 80px at 50% 0%, rgba(11,44,138,.12), transparent 70%);
}

.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:start}

.mini-list{display:grid; gap:12px; margin-top:18px}
.mini{display:flex; gap:12px; padding:14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.72); border:1px solid rgba(11,44,138,.12); box-shadow: 0 10px 20px rgba(7, 26, 84, .05)}
.mini-ico{width:40px;height:40px;border-radius:14px; display:grid; place-items:center; background: rgba(219,232,255,.75); border:1px solid rgba(11,44,138,.12)}
.mini-title{font-weight:900; color:rgba(11,22,51,.92)}
.mini-desc{font-size:.92rem; margin-top:2px}

.about-card{border-radius: var(--radius); background: rgba(255,255,255,.78); border:1px solid rgba(11,44,138,.14); box-shadow: var(--shadow); overflow:hidden}
.about-top{display:flex; justify-content:space-between; align-items:flex-start; padding:16px}
.about-badge{font-weight:900; color:var(--blue-800); background: rgba(45,99,255,.12); border:1px solid rgba(45,99,255,.20); padding:10px 12px; border-radius:999px}
.about-kpi{text-align:right}
.kpi-num{font-weight:1000; font-size:1.6rem; color:var(--blue-800)}
.kpi-lbl{font-weight:800; font-size:.9rem; color:var(--muted)}
.about-body{padding:0 16px 16px}
.about-quote{font-weight:800; color: rgba(11,22,51,.88)}
.about-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

.section-head{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.muted{color:var(--muted)}

.grid{display:grid; gap:14px}
.grid.cards{grid-template-columns: repeat(3, 1fr)}
.card{
  position:relative;
  padding:18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(11,44,138,.14);
  box-shadow: 0 14px 28px rgba(7, 26, 84, .06);
  overflow:hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{transform: translateY(-4px); box-shadow: 0 22px 50px rgba(7, 26, 84, .12)}
.card-ico{width:44px;height:44px;border-radius:16px; display:grid; place-items:center; background: rgba(219,232,255,.7); border:1px solid rgba(11,44,138,.12); margin-bottom:12px; font-size:1.25rem}
.card p{margin:0; font-size:.95rem}
.card-hover{position:absolute; inset:-40%; background: radial-gradient(circle at 30% 30%, rgba(17,215,194,.16), transparent 55%), radial-gradient(circle at 70% 60%, rgba(45,99,255,.14), transparent 60%); transform: rotate(10deg); opacity:0; transition: opacity .22s var(--ease)}
.card:hover .card-hover{opacity:1}

.grid.portfolio{grid-template-columns: repeat(2, 1fr)}
.work-card{display:grid; grid-template-columns: 1fr 1.2fr; gap:14px; border-radius: var(--radius); background: rgba(255,255,255,.78); border:1px solid rgba(11,44,138,.14); box-shadow: var(--shadow-soft); overflow:hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease)}
.work-card:hover{transform: translateY(-3px); box-shadow: var(--shadow)}
.work-mock{padding:18px; background: linear-gradient(135deg, rgba(11,44,138,.08), rgba(45,99,255,.10)); border-right:1px solid rgba(11,44,138,.10)}

/* portfolio images */
.work-img{
  width:100%;
  height:180px;
  display:block;
  object-fit: cover;
  border-radius:16px;
  border:1px solid rgba(11,44,138,.12);
  box-shadow: 0 12px 24px rgba(7, 26, 84, .10);
}

.work-body{padding:18px}
.work-desc{margin:6px 0 12px}
.psr{display:grid; gap:8px; font-size:.95rem; color: rgba(11,22,51,.82)}
.psr strong{color: rgba(11,22,51,.92)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tag{font-size:.82rem; font-weight:900; padding:8px 10px; border-radius:999px; border:1px solid rgba(11,44,138,.14); background: rgba(219,232,255,.55); color: rgba(11,44,138,.92)}

.grid.why{grid-template-columns: repeat(5, 1fr)}
.why-card{padding:18px; border-radius: var(--radius); background: rgba(255,255,255,.78); border:1px solid rgba(11,44,138,.14); box-shadow: 0 14px 28px rgba(7, 26, 84, .06)}
.why-ico{width:44px;height:44px;border-radius:16px; display:grid; place-items:center; background: rgba(17,215,194,.14); border:1px solid rgba(17,215,194,.22); margin-bottom:12px; font-size:1.2rem}

.contact{padding:90px 0; background: linear-gradient(180deg, rgba(7,26,84,.98), rgba(11,44,138,.96))}
.contact h2{color:#fff}
.contact p{color: rgba(255,255,255,.78)}

.contact-shell{border-radius: 22px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow:hidden}
.contact-shell{display:grid; grid-template-columns: 1.2fr .8fr}
.contact-left{padding:24px}
.contact-right{padding:24px; background: rgba(255,255,255,.06); border-left:1px solid rgba(255,255,255,.14)}

.form{margin-top:14px}
.field-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.field span{font-weight:800; color: rgba(255,255,255,.92)}
.field input,.field textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  padding:12px 12px;
  outline:none;
}
.field input::placeholder,.field textarea::placeholder{color: rgba(255,255,255,.60)}
.field input:focus,.field textarea:focus{border-color: rgba(17,215,194,.55); box-shadow: 0 0 0 4px rgba(17,215,194,.14)}

.form-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px}
.form-hint{margin:0; font-size:.92rem}
.form-status{margin-top:10px; font-weight:800}
.form-status.ok{color: rgba(17,215,194,.95)}
.form-status.bad{color: rgba(255,170,170,.95)}

.contact-card{display:grid; gap:14px}
.contact-item{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:18px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.c-ico{width:40px;height:40px;border-radius:16px; display:grid; place-items:center; background: rgba(219,232,255,.14); border:1px solid rgba(255,255,255,.14)}
.c-title{font-weight:900; color: rgba(255,255,255,.92); margin-bottom:4px}
.contact-item a{color:#fff; font-weight:800; text-decoration:none}
.contact-item a:hover{text-decoration:underline}

.divider{height:1px; background: rgba(255,255,255,.14); margin:4px 0}
.contact-mini{display:flex; justify-content:space-between; gap:10px; font-weight:800; color: rgba(255,255,255,.86)}
.mini-pill{padding:8px 10px; border-radius:999px; background: rgba(17,215,194,.14); border:1px solid rgba(17,215,194,.20)}
.mini-val{padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}

.footer{padding:30px 0; background: rgba(7, 26, 84, .98); color:#fff}
.footer-inner{display:grid; gap:10px}
.footer-brand{font-weight:1000; font-size:1.1rem}
.footer-tag{color: rgba(255,255,255,.76)}
.footer-links{display:flex; gap:14px; flex-wrap:wrap; color: rgba(255,255,255,.86)}
.footer-links a{color:#fff; font-weight:800; text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{color: rgba(255,255,255,.62); font-weight:700; font-size:.92rem}

.to-top{
  position:fixed; right:16px; bottom:16px;
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(11,44,138,.20);
  background: rgba(255,255,255,.85);
  color: var(--blue-800);
  font-weight:1000;
  box-shadow: 0 16px 40px rgba(7, 26, 84, .18);
}
.to-top:hover{transform: translateY(-2px)}

/* reveal animations */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform: translateY(0)}

@keyframes float{0%,100%{transform: translateY(0)} 50%{transform: translateY(-10px)}}

/* responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .hero-art{min-height:380px}
  .split{grid-template-columns: 1fr;}
  .grid.cards{grid-template-columns: repeat(2, 1fr)}
  .grid.why{grid-template-columns: repeat(2, 1fr)}
  .work-card{grid-template-columns: 1fr}
  .work-mock{border-right:none; border-bottom:1px solid rgba(11,44,138,.10)}
  .contact-shell{grid-template-columns: 1fr}
  .contact-right{border-left:none; border-top:1px solid rgba(255,255,255,.14)}
}

@media (max-width: 680px){
  .section{padding:72px 0}
  .grid.cards{grid-template-columns: 1fr}
  .grid.portfolio{grid-template-columns: 1fr}
  .grid.why{grid-template-columns: 1fr}
  .field-row{grid-template-columns: 1fr}

  .nav-toggle{display:inline-grid; place-items:center}
  .nav-menu{
    position:absolute; right:20px; top:64px;
    display:none;
    flex-direction:column;
    gap:6px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(11,44,138,.14);
    box-shadow: var(--shadow-soft);
    padding:10px;
    border-radius: 18px;
    width:min(260px, calc(100vw - 40px));
  }
  .nav-menu.is-open{display:flex}
  .nav-menu a{width:100%}
}