@font-face{ font-family:'Sora'; src:url('fonts/sora-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('fonts/sora-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('fonts/sora-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('fonts/sora-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('fonts/sora-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('fonts/sora-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --obsidian:#0B0B0F;
  --gold:#D4AF37;
  --gold-soft: rgba(212,175,55,0.45);
  --silver:#C9CCD6;
  --azure:#1F6FFF;
  --amethyst:#7B3FE4;
  --accent: var(--azure);
  --accent-soft: rgba(31,111,255,0.45);
  --accent-gradient: linear-gradient(90deg, var(--azure), var(--amethyst));
  --arctic:#F5F7FA;
  --bg-1:#0E0E13;
  --bg-2:#10101A;
  --line: rgba(245,247,250,0.08);
  --line-strong: rgba(245,247,250,0.14);
  --glass: rgba(245,247,250,0.04);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto; overflow-x:hidden; max-width:100%;}
body{
  background: var(--obsidian);
  color: var(--arctic);
  font-family: 'Sora', sans-serif;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
  cursor:none;
}
a{color:inherit;text-decoration:none;}
button{font-family:'Sora',sans-serif;}
em{font-style:normal;color:var(--gold);}

/* ===== custom cursor ===== */
.cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px;
  border:1px solid var(--accent-soft); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition: width .25s, height .25s, border-color .25s, background .25s;
  mix-blend-mode: difference;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:5px; height:5px;
  background: var(--accent); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
}
.cursor-ring.active{ width:56px; height:56px; background: rgba(31,111,255,0.1); border-color: var(--accent); }
@media (max-width:880px){ .cursor-ring,.cursor-dot{display:none;} body{cursor:auto;} }

/* ===== grain overlay ===== */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== canvas ===== */
#scene{
  position:fixed; inset:0; z-index:0; display:block; width:100vw; height:100vh;
}

/* ===== loader ===== */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--obsidian);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
}
.loader-badge{ width:92px; height:92px; display:block; opacity:0; transform:scale(0.82);
  filter:drop-shadow(0 0 0 rgba(31,111,255,0)); }
.loader-badge.is-in{ opacity:1; transform:scale(1);
  filter:drop-shadow(0 6px 30px rgba(31,111,255,0.35));
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.9,.25,1.15), filter .9s ease; }
.loader-word{
  font-size:15px; letter-spacing:0.62em; font-weight:600; color:var(--arctic);
  opacity:0; padding-left:0.62em;
}
.brand-mark{ display:block; width:auto; }
.brand-mark--nav{ height:18px; }
.loader-bar{ width:170px; height:1px; background:var(--line-strong); overflow:hidden; }
.loader-fill{ width:0%; height:100%; background:linear-gradient(90deg,var(--azure),var(--amethyst)); }

/* ===== nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px 56px;
  mix-blend-mode: normal;
  transition: padding .4s ease, background .4s ease, backdrop-filter .4s ease;
}
.nav.scrolled{
  padding: 16px 56px;
  background: rgba(11,11,15,0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-logo{ display:flex; align-items:center; font-size:14px; font-weight:700; letter-spacing:0.35em; }
.nav-links{ display:flex; gap:40px; align-items:center; }
.nav-link{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--silver);
  position:relative; padding-bottom:4px;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }
.nav-link:hover{ color:var(--arctic); }
.nav-cta{
  border:1px solid var(--line-strong); padding:9px 20px; border-radius:100px; color:var(--arctic);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ border-color:var(--accent); background:rgba(31,111,255,0.1); }
@media (max-width:880px){ .nav{padding:20px 24px;} .nav-links{gap:18px;} .nav-link:not(.nav-cta){display:none;} }

/* ===== progress rail ===== */
.progress-rail{
  position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:400;
  width:2px; height:160px; background:var(--line);
}
.progress-fill{ width:100%; height:0%; background:linear-gradient(180deg,var(--azure),var(--amethyst)); }
@media (max-width:880px){ .progress-rail{display:none;} }

/* ===== layout base ===== */
main{ position:relative; z-index:10; }
.section{
  position:relative; min-height:100vh; padding: 0 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.section-eyebrow span{ font-size:12px; letter-spacing:0.35em; color:var(--accent); font-weight:600; display:block; margin-bottom:28px; line-height:1.5; }
.section-title{
  font-size:clamp(32px,4.2vw,56px); font-weight:600; line-height:1.15; letter-spacing:-0.01em; max-width:900px;
  position:relative;
}
.section-title::before{
  content:''; position:absolute; left:-16px; right:-16px; top:-12px; bottom:-12px; z-index:-1;
  background: linear-gradient(180deg, rgba(11,11,15,0.45), rgba(11,11,15,0.25));
  border-radius:12px; pointer-events:none;
}
.section-title em{font-style:normal;}

/* mask reveal base state */
.reveal-mask{ overflow:hidden; display:block; }
.reveal-mask span{ display:inline-block; transform:translateY(110%); }
.split-text .word{ display:inline-block; overflow:hidden; }
.split-text .word span{ display:inline-block; transform:translateY(110%); }

/* ===== HERO ===== */
.hero{ align-items:center; text-align:center; padding-top:0; position:relative; }
.hero::before{
  content:''; position:absolute; top:50%; left:50%; width:1100px; height:600px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(11,11,15,0.55) 0%, rgba(11,11,15,0.25) 45%, transparent 72%);
}
.hero-eyebrow{ display:flex; justify-content:center; margin-bottom:36px; }
.hero-eyebrow span{ font-size:12px; letter-spacing:0.4em; color:var(--accent); font-weight:600; }
.hero-title{
  font-size:clamp(40px,8vw,108px); font-weight:700; line-height:1.04; letter-spacing:-0.015em;
}
.hero-title .line{ display:block; }
.hero-sub{ margin-top:32px; font-size:clamp(15px,1.6vw,19px); color:var(--silver); font-weight:300; max-width:760px; margin-left:auto; margin-right:auto; }
.hero-scroll-cue{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero-scroll-cue span{ font-size:10px; letter-spacing:0.3em; color:var(--silver); opacity:0.6; }
.cue-line{ width:1px; height:36px; background:var(--line-strong); position:relative; overflow:hidden; }
.cue-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ===== WHO WE ARE ===== */
.section-grid{ max-width:1100px; }
.who-copy{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px; max-width:1000px; }
.who-copy p{ font-size:16px; font-weight:300; color:var(--silver); line-height:1.75; }
.who-copy p span{ display:inline; }
@media (max-width:780px){ .who-copy{grid-template-columns:1fr;} }

/* ===== CHALLENGE ===== */
.challenge{ padding-top:140px; padding-bottom:140px; }
.challenge .section-title{ margin-top:24px; margin-bottom:64px; }
.challenge-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.challenge-card{
  position:relative; border-radius:20px; padding:44px 36px;
  background: linear-gradient(135deg, rgba(31,111,255,0.08), rgba(11,11,15,0.4));
  border:1px solid var(--line-strong);
  overflow:hidden; transition: transform .35s ease, border-color .35s ease;
}
.challenge-card:nth-child(even){ background: linear-gradient(135deg, rgba(123,63,228,0.08), rgba(11,11,15,0.4)); }
.challenge-card:hover{ transform:translateY(-6px); border-color: var(--accent-soft); }
.challenge-num{
  font-size:72px; font-weight:700; line-height:1; margin-bottom:20px;
  display:inline-block;
  background-image: linear-gradient(135deg, var(--azure), var(--amethyst));
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.challenge-card h3{ font-size:22px; font-weight:600; margin-bottom:12px; }
.challenge-card p{ font-size:15px; color:var(--silver); font-weight:300; line-height:1.7; max-width:420px; text-wrap:pretty; }
@media (max-width:760px){ .challenge-grid{grid-template-columns:1fr;} }

/* ===== APPROACH ===== */
.approach{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; padding-top:100px; padding-bottom:100px; }
.approach-visual{ position:relative; height:420px; perspective:1000px; }
.glass-layer{
  position:absolute; left:50%; top:50%; border-radius:24px; border:1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(31,111,255,0.08), rgba(123,63,228,0.10));
  backdrop-filter: blur(6px);
}
.layer-1{ width:260px; height:330px; transform:translate(-50%,-50%) translateZ(0px) rotate(-6deg); }
.layer-2{ width:260px; height:330px; transform:translate(-50%,-50%) translateZ(-60px) translateX(40px) rotate(3deg); opacity:0.7; }
.layer-3{ width:260px; height:330px; transform:translate(-50%,-50%) translateZ(-120px) translateX(-30px) translateY(20px) rotate(-2deg); opacity:0.45; }
.approach-content p{ font-size:16px; color:var(--silver); font-weight:300; line-height:1.75; margin-top:20px; max-width:900px; text-wrap:balance; }
.approach-content .section-title{ margin-top:20px; margin-bottom:8px; }
@media (max-width:880px){
  .approach{grid-template-columns:1fr; gap:32px; padding-top:80px;}
  .approach-visual{ height:240px; order:-1; }
  .glass-layer{ width:168px; height:208px; border-radius:18px; }
}

/* ===== SERVICES ===== */
.services{ padding-top:140px; padding-bottom:140px; }
.services .section-title{ margin-top:24px; margin-bottom:72px; }
.services-list{ border-top:1px solid var(--line); max-width:1100px; }
.service-row{ border-bottom:1px solid var(--line); cursor:pointer; }
.service-row-head{ display:flex; align-items:center; gap:32px; padding:32px 0; }
.service-index{ font-size:13px; color:var(--accent); letter-spacing:0.15em; font-weight:600; width:30px; }
.service-row-head h3{ font-size:clamp(22px,3vw,32px); font-weight:500; flex:1; transition:color .3s ease, transform .3s ease; }
.service-toggle{ font-size:22px; color:var(--silver); font-weight:300; transition:transform .4s ease, color .3s ease; }
.service-row.open .service-toggle{ transform:rotate(45deg); color:var(--accent); }
.service-row:hover h3{ color:var(--accent); transform:translateX(8px); }
.service-body{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
.service-row.open .service-body{ max-height:640px; }
.service-body p{ padding-bottom:32px; max-width:640px; font-size:15px; color:var(--silver); font-weight:300; line-height:1.7; }

/* ===== PACKAGES ===== */
.packages{ padding-top:140px; padding-bottom:140px; }
.packages .section-title{ margin-top:24px; margin-bottom:64px; }
.packages-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

@property --trace-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes traceRotate{ to{ --trace-angle:360deg; } }

.package-card{
  position:relative; border-radius:18px; padding:36px 26px;
  background: linear-gradient(180deg, rgba(245,247,250,0.025), rgba(245,247,250,0.01));
  overflow:hidden; transition: transform .15s ease;
  display:flex; flex-direction:column; isolation:isolate;
}
.package-card::before{
  content:''; position:absolute; inset:0; border-radius:18px; padding:1.5px;
  background: conic-gradient(from var(--trace-angle), transparent 0%, var(--azure) 12%, var(--amethyst) 28%, transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: traceRotate 5s linear infinite;
  z-index:0; pointer-events:none;
}
.package-card.featured::before{
  background: conic-gradient(from var(--trace-angle), transparent 0%, var(--gold) 8%, var(--azure) 24%, var(--amethyst) 40%, transparent 52%);
  animation-duration: 3.5s;
}
.package-glow{
  position:absolute; inset:0; border-radius:18px; opacity:0; pointer-events:none; z-index:0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(31,111,255,0.16), transparent 60%);
  transition: opacity .3s ease;
}
.package-card:hover .package-glow{ opacity:1; }
.package-tag{ position:relative; z-index:1; font-size:11px; letter-spacing:0.2em; color:var(--silver); text-transform:uppercase; margin-bottom:18px; }
.package-card h3{ position:relative; z-index:1; font-size:28px; font-weight:700; letter-spacing:0.05em; margin-bottom:6px; background:linear-gradient(90deg,var(--arctic),var(--azure)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.package-line{ position:relative; z-index:1; font-size:14px; color:var(--accent); font-weight:500; margin-bottom:16px; }
.package-desc{ position:relative; z-index:1; font-size:14px; color:var(--silver); font-weight:300; line-height:1.6; margin-bottom:22px; min-height:60px; }
.package-card ul{ position:relative; z-index:1; list-style:none; margin-bottom:28px; flex:1; }
.package-card li{ font-size:13px; color:var(--arctic); font-weight:300; padding:8px 0; border-top:1px solid var(--line); opacity:0.85; }
.package-card li:first-child{ border-top:none; }
.package-cta{
  position:relative; z-index:1;
  background:none; border:1px solid var(--line-strong); color:var(--arctic); padding:12px 0; border-radius:100px;
  font-size:12px; letter-spacing:0.15em; text-transform:uppercase; transition:all .3s ease; cursor:pointer;
}
.package-cta:hover{ background:var(--accent); color:var(--arctic); border-color:var(--accent); }
@media (max-width:1100px){ .packages-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .packages-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .package-card::before{ animation:none; } }

/* ===== PROCESS ===== */
.process{ padding-top:140px; padding-bottom:140px; }
.process .section-title{ margin-top:24px; margin-bottom:80px; max-width:760px; }
.timeline{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.timeline-line{ position:absolute; top:7px; left:0; right:0; height:1px; background:var(--line); }
.timeline-progress{ height:100%; width:0%; background:linear-gradient(90deg,var(--azure),var(--amethyst)); }
.timeline-step{ position:relative; padding-top:36px; }
.timeline-dot{
  position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%;
  background:var(--obsidian); border:1px solid var(--line-strong); transform:translateY(-1px);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.timeline-step.active .timeline-dot{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 16px rgba(31,111,255,0.55); }
.timeline-num{ font-size:11px; color:var(--accent); letter-spacing:0.15em; font-weight:600; display:block; margin-bottom:10px; }
.timeline-step h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
.timeline-step p{ font-size:13px; color:var(--silver); font-weight:300; line-height:1.6; text-wrap:balance; }
.timeline{ column-gap:20px; }
@media (max-width:880px){ .timeline{grid-template-columns:1fr; gap:40px;} .timeline-line{display:none;} }

.process-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  margin-top:100px; padding-top:56px; border-top:1px solid var(--line);
}
.process-stat-label{ font-size:13px; color:var(--silver); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; }
.process-stat-value{
  font-size:clamp(28px,3.4vw,40px); font-weight:700; line-height:1.15; margin-bottom:8px;
  background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  display:inline-block;
}
.process-stat-azure{ background-image: linear-gradient(90deg, var(--arctic), var(--azure)); }
.process-stat-amethyst{ background-image: linear-gradient(90deg, var(--arctic), var(--amethyst)); }
.process-stat-gold{ background-image: linear-gradient(90deg, var(--arctic), var(--gold)); }
.process-stat p{ font-size:14px; color:var(--silver); font-weight:300; }
@media (max-width:760px){ .process-stats{ grid-template-columns:1fr; gap:36px; margin-top:64px; } }

/* ===== WHY ===== */
.why{ align-items:center; text-align:center; }
.why-content{ max-width:760px; margin:0 auto; }
.why .section-eyebrow{ display:flex; justify-content:center; }
.why-statement{
  font-size:clamp(30px,5vw,64px); font-weight:600; line-height:1.15; margin:24px 0 32px;
  position:relative;
}
.why-statement::before{
  content:''; position:absolute; left:-20px; right:-20px; top:-14px; bottom:-14px; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(11,11,15,0.5), transparent 75%);
  pointer-events:none;
}
.why-copy span{ font-size:16px; color:var(--silver); font-weight:300; line-height:1.8; display:inline-block; }

/* ===== CONTACT ===== */
.contact{ padding-top:140px; padding-bottom:60px; align-items:center; text-align:center; }
.contact .section-eyebrow{ display:flex; justify-content:center; }
.contact-title{
  font-size:clamp(34px,5.5vw,72px); font-weight:600; margin:20px 0 16px;
  position:relative;
}
.contact-title::before{
  content:''; position:absolute; left:-20px; right:-20px; top:-14px; bottom:-14px; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(11,11,15,0.5), transparent 75%);
  pointer-events:none;
}
.contact-sub{ display:flex; justify-content:center; margin-bottom:56px; }
.contact-sub span{ font-size:16px; color:var(--silver); font-weight:300; }
.contact-form{ max-width:560px; margin:0 auto; width:100%; }
.form-row{ display:flex; gap:16px; margin-bottom:16px; }
.contact-form input, .contact-form textarea{
  width:100%; background:rgba(245,247,250,0.03); border:1px solid var(--line-strong); border-radius:10px;
  padding:16px 18px; color:var(--arctic); font-family:'Sora',sans-serif; font-size:14px; font-weight:300;
  outline:none; transition: border-color .3s ease, background .3s ease; resize:none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--silver); opacity:0.5; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--gold-soft); background:rgba(245,247,250,0.05); }
.contact-form textarea{ margin-bottom:24px; }
.form-submit{
  width:100%; padding:18px 0; border-radius:100px; border:none; background:var(--accent); color:var(--arctic);
  font-size:13px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.form-submit:hover{ box-shadow:0 0 30px rgba(31,111,255,0.4); }
.footer{
  margin-top:120px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; max-width:1100px; margin-left:auto; margin-right:auto; width:100%;
}
.footer span{ font-size:11px; letter-spacing:0.15em; color:var(--silver); opacity:0.6; }
@media (max-width:880px){
  .section{ padding:0 24px; }
  .challenge, .services, .packages, .process{ padding-top:90px; padding-bottom:90px; }
}

@media (max-width:600px){
  .form-row{flex-direction:column;}
  .footer{flex-direction:column; gap:8px; text-align:center;}
  .section-eyebrow span{ font-size:11px; letter-spacing:0.2em; margin-bottom:20px; line-height:1.7; }
  .who, .approach, .why, .contact{ padding-top:80px; padding-bottom:80px; }
  .section{ min-height:auto; }
  .hero{ min-height:100vh; }
  .service-row-head{ gap:16px; padding:26px 0; }
  .service-body p{ padding-bottom:26px; }
  .timeline{ gap:32px; }
  .process .section-title{ margin-bottom:48px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}