:root{
  --bg: #0b0b0f;
  --card:#12121a;
  --fg: #f2f5f7;
  --muted:#aeb4be;
  --c: #00B5E2;  /* Cyan */
  --m: #EC008C;  /* Magenta */
  --y: #FFD100;  /* Yellow */
  --k: #111111;  /* Key (Black) */
  --ring: 0 0 0 10px rgb(255 255 255 / 0.03);
  --shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  --radius: 16px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --card:#ffffff; --fg:#ffffff; --muted:#475065; --k:#1b1e24;
  }
  body::before{ opacity:.07; }
  .hero{ background: rgba(255, 255, 255, 0.92); }
  .panel{ background: rgba(255, 255, 255, 0.94); }
  .progress{ background: rgba(0,0,0,0.1); }
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: radial-gradient(1200px 800px at 20% 10%, #15151f 0%, transparent 60%),
                      radial-gradient(1000px 900px at 85% 90%, #12121a 0%, transparent 60%),
                      linear-gradient(180deg, var(--bg), var(--bg));
  color:var(--fg); font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

/* Ink blobs (CMYK) */
.blob{ position:fixed; inset:auto auto; width:46vmax; height:46vmax; filter: blur(50px); pointer-events:none; mix-blend-mode:screen; opacity:.35; }
.blob.c{ background: radial-gradient(circle at 30% 30%, rgba(0,181,226,.9), transparent 60%); top:-20vmax; left:-10vmax; animation: float1 18s ease-in-out infinite; }
.blob.m{ background: radial-gradient(circle at 70% 40%, rgba(236,0,140,.9), transparent 60%); bottom:-18vmax; right:-12vmax; animation: float2 22s ease-in-out infinite; }
.blob.y{ background: radial-gradient(circle at 30% 70%, rgba(255,209,0,.85), transparent 60%); top:10vmax; right:15vmax; animation: float3 26s ease-in-out infinite; }
@keyframes float1{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(4vmax,2vmax,0)} }
@keyframes float2{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-3vmax,-1vmax,0)} }
@keyframes float3{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-2vmax,3vmax,0)} }

/* Subtle CMYK halftone overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(0,181,226,.08) 0 30%, transparent 30.5%) 0 0/160px 160px,
    radial-gradient(circle at 60% 30%, rgba(236,0,140,.08) 0 30%, transparent 30.5%) 0 0/170px 170px,
    radial-gradient(circle at 30% 70%, rgba(255,209,0,.08) 0 30%, transparent 30.5%) 0 0/180px 180px;
  opacity:.10;
}

.container{ max-width: 1120px; margin:0 auto; padding: clamp(24px, 4vw, 48px); }
header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: clamp(24px, 5vw, 64px);
}
.brand{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  color:var(--fg);
}
.logo{
  width:44px; height:44px; border-radius:12px; background:
    conic-gradient(from 220deg, var(--c), var(--m), var(--y), #000 75%, var(--c));
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.logo::after{
  content:""; position:absolute; inset:2px; border-radius:10px;
  background: radial-gradient(circle at 30% 30%, #ffffff22, transparent 40%);
}
.brand span{ font: 800 18px Poppins, Inter, sans-serif; letter-spacing:.2px; }

main{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(20px, 4vw, 48px); align-items:center;
}
@media (max-width: 960px){
  main{ grid-template-columns: 1fr; }
}

.hero{
  background: rgba(18, 18, 26, 0.92);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 48px);
  box-shadow: var(--shadow);
  position:relative;
  outline: var(--ring);
  backdrop-filter: blur(10px);
}
h1{
  margin:0 0 8px; font: 800 clamp(32px, 6vw, 64px)/1.05 Poppins, Inter, sans-serif;
  letter-spacing:-.02em;
  background: conic-gradient(from 240deg, var(--c), var(--m), var(--y), #fff, var(--c));
  -webkit-background-clip: text; background-clip:text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.25));
}
.subtitle{
  margin: 0 0 20px; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted);
}

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 16px 0 28px; }
.chip{
  padding: 8px 12px; border-radius: 999px; font-weight:600; font-size:14px;
  color:#0b0b10; background:#e8eef7; border:1px solid #dbe3f0;
}
.chip.c{ background: color-mix(in srgb, var(--c) 25%, #fff); border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.chip.m{ background: color-mix(in srgb, var(--m) 25%, #fff); border-color: color-mix(in srgb, var(--m) 45%, #fff); }
.chip.y{ background: color-mix(in srgb, var(--y) 30%, #fff); border-color: color-mix(in srgb, var(--y) 45%, #fff); }
.chip.k{ background: #e9eaee; border-color:#d8dbe2; color:#14151a; }

.cta{
  display:flex; flex-wrap: wrap; gap:12px; align-items:center;
}
.btn{
  appearance:none; border:0; cursor:pointer;
  padding: 14px 18px; border-radius: 12px; font-weight:800; letter-spacing:.2px;
  background:
    linear-gradient(180deg, #fff, #eaeef9) padding-box,
    linear-gradient(120deg, var(--c), var(--m), var(--y)) border-box;
  border: 2px solid transparent; color:#0b0b10;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
}
.btn:hover{ transform: translateY(-2px); filter: saturate(1.05); }
.btn:active{ transform: translateY(0); box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }

.muted{ color: var(--muted); font-size: 14px; }

.panel{
  background: rgba(18, 18, 26, 0.94);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow);
  outline: var(--ring);
  backdrop-filter: blur(10px);
}
.panel h2{
  margin:0 0 8px; font: 800 20px Poppins, Inter, sans-serif; letter-spacing:.2px;
}

.contact{
  display:flex; flex-direction:column; gap:14px;
}
.contact-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px; background: #0f1118; color:#e7ebf3;
  border:1px solid #232739;
}
@media (prefers-color-scheme: light){
  .contact-row{ background:#f6f8ff; color:#101216; border-color:#dfe4f2; }
}
.contact a{ color:inherit; text-decoration:none; font-weight:600; }
.contact a:hover{ text-decoration:underline; }

footer{
  margin-top: clamp(24px, 4vw, 40px);
  color: var(--muted); font-size: 13px; text-align:center;
}

/* Simple print icon for bullets */
.ico{ width:18px; height:18px; display:inline-block; vertical-align:middle; }
.row{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }

/* Working animation */
.working-dots {
  display: inline-block;
  position: relative;
}
.working-dots::after {
  content: '...';
  animation: dots 1.5s infinite;
}
@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Progress bar */
.progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin: 16px 0;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c), var(--m), var(--y));
  border-radius: 2px;
  animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
  0% { width: 0%; }
  50% { width: 75%; }
  100% { width: 100%; }
}