/*
 * 才巨智能 (CaiJu Intelligence) - Main Stylesheet
 * Tech company website, Tailwind-to-plain-CSS conversion
 * Theme: caiju
 */

/* ============================================================
   PART 1: FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.cn/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

/* ============================================================
   PART 2: CSS RESET + DESIGN TOKENS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif;color:#0A1628;background:#F8FAFF;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
button{border:none;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
ul{list-style:none}

:root{
  --primary:#0A1628;--blue:#1E90FF;--purple:#6C3DE8;--cyan:#00D4FF;
  --body:#374151;--muted:#6B7280;--surface:#FFFFFF;--surface-alt:#F0F4FF;
  --font:'Plus Jakarta Sans','Noto Sans SC',sans-serif;
  --radius-sm:0.5rem;--radius:0.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;
}

/* ============================================================
   PART 3: KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes grid-move { 0%{background-position:0 0} 100%{background-position:50px 50px} }
@keyframes pulse-glow { 0%,100%{opacity:0.3} 50%{opacity:0.6} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes count-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes glow-ring { 0%,100%{box-shadow:0 0 0 0 rgba(30,144,255,0.3)} 50%{box-shadow:0 0 20px 4px rgba(30,144,255,0.15)} }
@keyframes timeline-line { from{height:0} to{height:100%} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   PART 4: COLOR UTILITY CLASSES
   ============================================================ */
.text-primary{color:var(--primary)} .text-blue{color:var(--blue)} .text-purple{color:var(--purple)} .text-cyan{color:var(--cyan)}
.text-body{color:var(--body)} .text-muted{color:var(--muted)}
.text-white{color:#fff} .text-white\/30{color:rgba(255,255,255,.3)} .text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/50{color:rgba(255,255,255,.5)} .text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/80{color:rgba(255,255,255,.8)}
.text-blue\/50{color:rgba(30,144,255,.5)} .text-purple\/50{color:rgba(108,61,232,.5)} .text-cyan\/50{color:rgba(0,212,255,.5)}
.text-red-500{color:#EF4444} .text-green-500{color:#22C55E}
.text-\[\#0A1628\]{color:#0A1628}

.bg-\[\#F8FAFF\]{background:#F8FAFF} .bg-\[\#0A1628\]{background:#0A1628}
.bg-\[\#F0F4FF\]{background:#F0F4FF}
.bg-surface{background:var(--surface)} .bg-surface-alt{background:var(--surface-alt)}
.bg-blue{background:#1E90FF} .bg-purple{background:#6C3DE8} .bg-cyan{background:#00D4FF}
.bg-blue\/5{background:rgba(30,144,255,.05)} .bg-blue\/8{background:rgba(30,144,255,.08)}
.bg-blue\/10{background:rgba(30,144,255,.1)} .bg-blue\/20{background:rgba(30,144,255,.2)}
.bg-blue\/30{background:rgba(30,144,255,.3)}
.bg-purple\/5{background:rgba(108,61,232,.05)} .bg-purple\/8{background:rgba(108,61,232,.08)}
.bg-purple\/10{background:rgba(108,61,232,.1)} .bg-purple\/20{background:rgba(108,61,232,.2)}
.bg-cyan\/5{background:rgba(0,212,255,.05)} .bg-cyan\/8{background:rgba(0,212,255,.08)}
.bg-cyan\/10{background:rgba(0,212,255,.1)} .bg-cyan\/20{background:rgba(0,212,255,.2)}
.bg-green-50{background:#F0FDF4}

.border-blue\/10{border-color:rgba(30,144,255,.1)} .border-blue\/15{border-color:rgba(30,144,255,.15)}
.border-blue\/20{border-color:rgba(30,144,255,.2)} .border-blue\/30{border-color:rgba(30,144,255,.3)}
.border-purple\/10{border-color:rgba(108,61,232,.1)} .border-purple\/15{border-color:rgba(108,61,232,.15)}
.border-purple\/20{border-color:rgba(108,61,232,.2)} .border-purple\/30{border-color:rgba(108,61,232,.3)}
.border-cyan\/10{border-color:rgba(0,212,255,.1)} .border-cyan\/15{border-color:rgba(0,212,255,.15)}
.border-cyan\/20{border-color:rgba(0,212,255,.2)} .border-cyan\/30{border-color:rgba(0,212,255,.3)}
.border-\[\#E5E9F2\]{border-color:#E5E9F2}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-green-200{border-color:#BBF7D0}

.hover\:bg-blue\/5:hover{background:rgba(30,144,255,.05)}
.hover\:bg-purple\/5:hover{background:rgba(108,61,232,.05)}
.hover\:bg-cyan\/5:hover{background:rgba(0,212,255,.05)}
.hover\:border-blue:hover{border-color:var(--blue)}
.hover\:border-purple:hover{border-color:var(--purple)}
.hover\:border-cyan:hover{border-color:var(--cyan)}
.hover\:text-primary:hover{color:var(--primary)}
.hover\:text-blue:hover{color:var(--blue)}
.hover\:text-white\/60:hover{color:rgba(255,255,255,.6)}

/* ============================================================
   PART 5: TYPOGRAPHY CLASSES
   ============================================================ */
.font-black{font-weight:900} .font-bold{font-weight:700} .font-semibold{font-weight:600} .font-medium{font-weight:500}
.text-xs{font-size:.75rem} .text-\[10px\]{font-size:10px} .text-sm{font-size:.875rem} .text-base{font-size:1rem}
.text-lg{font-size:1.125rem} .text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem} .text-3xl{font-size:1.875rem} .text-4xl{font-size:2.25rem}
.text-5xl{font-size:3rem} .text-6xl{font-size:3.75rem}
.text-\[15px\]{font-size:15px} .text-\[22px\]{font-size:22px} .text-\[28px\]{font-size:28px}
.text-center{text-align:center} .text-left{text-align:left}
.leading-relaxed{line-height:1.625} .tracking-tight{letter-spacing:-.025em}
.whitespace-nowrap{white-space:nowrap}

/* ============================================================
   PART 6: LAYOUT & SPACING CLASSES
   ============================================================ */

/* Display */
.flex{display:flex} .inline-flex{display:inline-flex} .inline-block{display:inline-block}
.block{display:block} .grid{display:grid} .hidden{display:none}
.flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .flex-nowrap{flex-wrap:nowrap}
.flex-shrink-0{flex-shrink:0} .shrink-0{flex-shrink:0}
.items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end}
.justify-center{justify-content:center} .justify-between{justify-content:space-between}
.self-center{align-self:center}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,1fr)} .grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)} .grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-5{grid-template-columns:repeat(5,1fr)}
.lg\:grid-cols-2{} .lg\:grid-cols-3{} .lg\:grid-cols-4{} .lg\:grid-cols-5{}
.md\:grid-cols-2{} .md\:grid-cols-3{} .md\:grid-cols-4{} .md\:grid-cols-5{}
.sm\:grid-cols-2{}

/* Width */
.w-2{width:.5rem} .w-3{width:.75rem} .w-4{width:1rem} .w-5{width:1.25rem}
.w-6{width:1.5rem} .w-7{width:1.75rem} .w-8{width:2rem} .w-10{width:2.5rem}
.w-11{width:2.75rem} .w-12{width:3rem} .w-14{width:3.5rem} .w-16{width:4rem}
.w-20{width:5rem} .w-24{width:6rem} .w-32{width:8rem} .w-44{width:11rem}
.w-60{width:15rem} .w-64{width:16rem} .w-72{width:18rem}
.w-full{width:100%} .w-px{width:1px}
.max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem} .max-w-7xl{max-width:80rem} .max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}

/* Height */
.h-2{height:.5rem} .h-3{height:.75rem} .h-4{height:1rem} .h-5{height:1.25rem}
.h-6{height:1.5rem} .h-7{height:1.75rem} .h-8{height:2rem} .h-10{height:2.5rem}
.h-11{height:2.75rem} .h-12{height:3rem} .h-14{height:3.5rem} .h-16{height:4rem}
.h-20{height:5rem} .h-24{height:6rem} .h-32{height:8rem} .h-44{height:11rem}
.h-48{height:12rem} .h-56{height:14rem} .h-60{height:15rem} .h-64{height:16rem} .h-72{height:18rem}
.h-full{height:100%}
.min-h-\[140px\]{min-height:140px} .min-h-\[360px\]{min-height:360px}

/* Spacing: gap */
.gap-1{gap:.25rem} .gap-1\.5{gap:.375rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem}
.gap-4{gap:1rem} .gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem}
.gap-10{gap:2.5rem} .gap-12{gap:3rem} .gap-16{gap:4rem}
.space-y-2>*+*{margin-top:.5rem} .space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem} .space-y-5>*+*{margin-top:1.25rem}
.space-x-2>*+*{margin-left:.5rem} .space-x-3>*+*{margin-left:.75rem} .space-x-4>*+*{margin-left:1rem}

/* Spacing: padding */
.p-3{padding:.75rem} .p-4{padding:1rem} .p-6{padding:1.5rem} .p-7{padding:1.75rem}
.p-8{padding:2rem} .p-10{padding:2.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem} .px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem} .py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem} .py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem} .py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem} .py-4{padding-top:1rem;padding-bottom:1rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem} .py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem} .py-24{padding-top:6rem;padding-bottom:6rem}
.pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-8{padding-top:2rem}
.pt-14{padding-top:3.5rem} .pt-20{padding-top:5rem} .pt-28{padding-top:7rem}
.pb-0\.5{padding-bottom:.125rem} .pb-4{padding-bottom:1rem}
.pb-10{padding-bottom:2.5rem} .pb-16{padding-bottom:4rem} .pb-20{padding-bottom:5rem}
.pl-16{padding-left:4rem} .pr-4{padding-right:1rem}

/* Spacing: margin */
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-10{margin-top:2.5rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.-top-4{top:-1rem} .-right-4{right:-1rem}

/* Position */
.relative{position:relative} .absolute{position:absolute} .fixed{position:fixed} .sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0} .left-0{left:0} .right-0{right:0} .bottom-0{bottom:0}
.top-4{top:1rem} .right-4{right:1rem} .top-8{top:2rem}
.top-12{top:3rem} .top-24{top:6rem} .left-2{left:.5rem}
.left-6{left:1.5rem} .left-8{left:2rem} .left-16{left:4rem}
.left-24{left:6rem} .left-1\/4{left:25%}
.right-16{right:4rem} .right-24{right:6rem} .right-1\/4{right:25%}
.bottom-8{bottom:2rem} .bottom-16{bottom:4rem} .bottom-24{bottom:6rem}
.z-10{z-index:10} .z-20{z-index:20} .z-40{z-index:40} .z-50{z-index:50}
.overflow-hidden{overflow:hidden} .overflow-x-auto{overflow-x:auto}
.resize-none{resize:none}
.appearance-none{-webkit-appearance:none;appearance:none}

/* ============================================================
   PART 7: BORDERS, RADIUS, SHADOWS
   ============================================================ */

/* Borders */
.border{border-width:1px} .border-b{border-bottom-width:1px} .border-t{border-top-width:1px}
.border-b-2{border-bottom-width:2px}
.border-blue{border-color:var(--blue)} .border-purple{border-color:var(--purple)} .border-cyan{border-color:var(--cyan)} .border-transparent{border-color:transparent}

/* Radius */
.rounded-lg{border-radius:var(--radius-sm)} .rounded-xl{border-radius:var(--radius)}
.rounded-2xl{border-radius:var(--radius-lg)} .rounded-3xl{border-radius:var(--radius-xl)}
.rounded-full{border-radius:var(--radius-full)}

/* Shadows */
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}
.shadow-blue\/5{box-shadow:0 4px 20px rgba(30,144,255,.05)}
.shadow-blue\/20{box-shadow:0 4px 20px rgba(30,144,255,.2)}
.shadow-lg.shadow-blue\/5{box-shadow:0 10px 15px -3px rgba(30,144,255,.05),0 4px 6px -2px rgba(0,0,0,.05)}

/* Ring */
.ring-4{box-shadow:0 0 0 4px rgba(30,144,255,.2)}
.ring-blue\/20{box-shadow:0 0 0 4px rgba(30,144,255,.2)}

/* Transitions */
.transition{transition:all .15s ease} .transition-colors{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.transition-all{transition:all .3s ease}
.transition-transform{transition:transform .3s ease}

/* Transforms */
.rotate-12{transform:rotate(12deg)} .rotate-45{transform:rotate(45deg)}
.-translate-x-1\/2{transform:translateX(-50%)}
.md\:-translate-x-1\/2{}

/* Opacity */
.opacity-10{opacity:.1} .opacity-30{opacity:.3} .opacity-50{opacity:.5}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.animate-\[pulse-glow_4s_ease-in-out_infinite\]{animation:pulse-glow 4s ease-in-out infinite}
.animate-\[pulse-glow_5s_ease-in-out_infinite_1s\]{animation:pulse-glow 5s ease-in-out infinite 1s}
.animate-\[pulse-glow_3s_ease-in-out_infinite\]{animation:pulse-glow 3s ease-in-out infinite}

/* Filter */
.blur-\[100px\]{filter:blur(100px)} .blur-\[80px\]{filter:blur(80px)}

/* Overflow / Scrollbar */
.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}
.scrollbar-none::-webkit-scrollbar{display:none}

/* ============================================================
   PART 8: COMPONENT STYLES
   ============================================================ */

/* Grid Background */
.grid-bg{
  background-image:linear-gradient(rgba(30,144,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(30,144,255,.06) 1px,transparent 1px);
  background-size:50px 50px;animation:grid-move 8s linear infinite;
}

/* Hero Gradient */
.hero-gradient{
  background:radial-gradient(ellipse at 30% 20%,rgba(108,61,232,.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(30,144,255,.06) 0%,transparent 50%),linear-gradient(180deg,#FFFFFF 0%,#EEF4FF 100%);
}

/* Light Card */
.light-card{
  background:#FFFFFF;border:1px solid #E5E9F2;border-radius:1rem;
  transition:all .5s cubic-bezier(.16,1,.3,1);
}
.light-card:hover{border-color:rgba(30,144,255,.5);box-shadow:0 8px 40px rgba(30,144,255,.08),0 2px 12px rgba(0,0,0,.04)}
@media(hover:hover){
  .light-card:hover{border-color:rgba(30,144,255,.5);box-shadow:0 8px 40px rgba(30,144,255,.08),0 2px 12px rgba(0,0,0,.04)}
}
@media(hover:none){
  .light-card:hover{border-color:#E5E9F2;box-shadow:none}
}

/* Glow Button */
.glow-btn{
  background:linear-gradient(135deg,#1E90FF,#6C3DE8);box-shadow:0 4px 20px rgba(30,144,255,.25);color:#fff;
}
@media(hover:hover){
  .glow-btn:hover{box-shadow:0 4px 30px rgba(30,144,255,.4);transform:translateY(-2px)}
}
@media(hover:none){
  .glow-btn:hover{box-shadow:0 4px 20px rgba(30,144,255,.25);transform:none}
}

/* Section Fade Animation */
.section-fade{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.section-fade.visible{opacity:1;transform:translateY(0)}

/* Filter Buttons */
.filter-btn{
  padding:8px 20px;border-radius:9999px;font-size:.875rem;font-weight:500;
  border:1px solid #E5E9F2;color:#6B7280;background:#FFFFFF;
  cursor:pointer;white-space:nowrap;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.filter-btn:hover{border-color:rgba(30,144,255,.4);color:#1E90FF;background:rgba(30,144,255,.04)}
.filter-btn.active{background:linear-gradient(135deg,#1E90FF,#6C3DE8);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(30,144,255,.2)}

/* Tab Active */
.tab-active{color:#1E90FF;border-color:#1E90FF;background:rgba(30,144,255,.05)}

/* Tech Badge */
.tech-badge{
  background:linear-gradient(135deg,rgba(30,144,255,.08),rgba(108,61,232,.08));
  border:1px solid rgba(30,144,255,.15);border-radius:9999px;
  padding:4px 14px;font-size:.75rem;font-weight:500;color:#374151;
  transition:all .3s;
}
.tech-badge:hover{border-color:rgba(30,144,255,.5);background:rgba(30,144,255,.12)}

/* Scene Tag */
.scene-tag{
  background:rgba(108,61,232,.06);border:1px solid rgba(108,61,232,.12);
  border-radius:9999px;padding:4px 12px;font-size:.75rem;color:#6C3DE8;
}

/* Timeline Dot */
.timeline-dot{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#1E90FF,#6C3DE8);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.75rem;
  box-shadow:0 4px 20px rgba(30,144,255,.25);
}

/* Timeline Item */
.timeline-item{opacity:0;transform:translateY(30px);transition:all .6s cubic-bezier(.16,1,.3,1)}
.timeline-item.visible{opacity:1;transform:translateY(0)}

/* Team Card */
.team-card{
  background:#FFFFFF;border:1px solid #E5E9F2;border-radius:1rem;
  transition:all .5s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover){
  .team-card:hover{border-color:rgba(30,144,255,.5);box-shadow:0 8px 40px rgba(30,144,255,.08),0 2px 12px rgba(0,0,0,.04);transform:translateY(-4px)}
  .team-card:hover .avatar-ring{animation:glow-ring 2s ease-in-out infinite}
}
.avatar-ring{box-shadow:0 4px 20px rgba(30,144,255,.15)}

/* Case Card */
.case-card{transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}
.case-card.hidden-card{opacity:0;transform:scale(.95);pointer-events:none;position:absolute;visibility:hidden}

/* Form Input */
.form-input{
  width:100%;padding:.75rem 1rem;border-radius:.75rem;
  background:#F8FAFF;border:1px solid #E5E9F2;
  font-size:.875rem;color:#0A1628;transition:all .3s ease;outline:none;
}
.form-input:focus{border-color:rgba(30,144,255,.5);box-shadow:0 0 0 3px rgba(30,144,255,.08)}
.form-input::placeholder{color:#9CA3AF}
.form-input.error{border-color:#EF4444}

/* FAQ */
.faq-item{border:1px solid #E5E9F2;border-radius:1rem;background:#FFFFFF;transition:all .3s ease}
.faq-item:hover{border-color:rgba(30,144,255,.3)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),padding .3s ease;padding:0 1.5rem}
.faq-item.active .faq-answer{max-height:200px;padding:0 1.5rem 1.25rem}
.faq-item.active{border-color:rgba(30,144,255,.5);box-shadow:0 4px 20px rgba(30,144,255,.06)}
.faq-icon{transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(180deg)}
.faq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit}

/* Stat Card */
.stat-card{background:#FFFFFF;border:1px solid #E5E9F2;box-shadow:0 2px 12px rgba(0,0,0,.04)}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,22,40,.6);backdrop-filter:blur(8px);
  z-index:100;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-content{
  background:#FFFFFF;border-radius:1.5rem;max-width:640px;width:90%;max-height:85vh;overflow-y:auto;
  transform:translateY(20px) scale(.96);transition:transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 80px rgba(0,0,0,.15);
}
.modal-overlay.show .modal-content{transform:translateY(0) scale(1)}

/* Mobile Menu */
.mobile-menu{
  position:fixed;inset:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{display:block;padding:16px 0;font-size:1.25rem;font-weight:600;color:#0A1628;text-align:center;min-height:44px;line-height:44px}
.mobile-menu a.active-link{color:#1E90FF}

/* Select Arrow */
.select-arrow{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}

/* Radio Label */
.radio-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.radio-label:hover span{color:var(--blue)}

/* Group hover */
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:text-blue{color:var(--blue)}

/* Gradient backgrounds */
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}

/* Gradient from/to/via stops (must work with all direction classes) */
.from-blue{--tw-gradient-from:#1E90FF;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple{--tw-gradient-from:#6C3DE8;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan{--tw-gradient-from:#00D4FF;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-blue\/5{--tw-gradient-from:rgba(30,144,255,.05);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-blue\/10{--tw-gradient-from:rgba(30,144,255,.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-blue\/30{--tw-gradient-from:rgba(30,144,255,.3);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple\/30{--tw-gradient-from:rgba(108,61,232,.3);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/30{--tw-gradient-from:rgba(0,212,255,.3);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/10{--tw-gradient-from:rgba(0,212,255,.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple\/10{--tw-gradient-from:rgba(108,61,232,.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.to-blue{--tw-gradient-to:#1E90FF}
.to-purple{--tw-gradient-to:#6C3DE8}
.to-cyan{--tw-gradient-to:#00D4FF}
.to-blue\/10{--tw-gradient-to:rgba(30,144,255,.1)}
.to-purple\/10{--tw-gradient-to:rgba(108,61,232,.1)}
.to-transparent{--tw-gradient-to:transparent}
.via-cyan{--tw-gradient-stops:var(--tw-gradient-from),#00D4FF,var(--tw-gradient-to)}
.via-blue\/3{--tw-gradient-stops:var(--tw-gradient-from),rgba(30,144,255,.03),var(--tw-gradient-to)}
.via-purple\/3{--tw-gradient-stops:var(--tw-gradient-from),rgba(108,61,232,.03),var(--tw-gradient-to)}
.via-purple\/2{--tw-gradient-stops:var(--tw-gradient-from),rgba(108,61,232,.02),var(--tw-gradient-to)}
.via-purple\/30{--tw-gradient-stops:var(--tw-gradient-from),rgba(108,61,232,.3),var(--tw-gradient-to)}
.via-blue\/2{--tw-gradient-stops:var(--tw-gradient-from),rgba(30,144,255,.02),var(--tw-gradient-to)}
.via-\[\#0F2847\]{--tw-gradient-stops:var(--tw-gradient-from),#0F2847,var(--tw-gradient-to)}
.via-\[\#1a2d4a\]{--tw-gradient-stops:var(--tw-gradient-from),#1a2d4a,var(--tw-gradient-to)}
.from-\[\#0A1628\]{--tw-gradient-from:#0A1628;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-\[\#EEF4FF\]{--tw-gradient-from:#EEF4FF;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.to-\[\#0A1628\]{--tw-gradient-to:#0A1628}
.to-\[\#F0F4FF\]{--tw-gradient-to:#F0F4FF}

/* Additional gradient from/to */
.from-blue\/3{--tw-gradient-from:rgba(30,144,255,.03);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-blue\/8{--tw-gradient-from:rgba(30,144,255,.08);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple\/5{--tw-gradient-from:rgba(108,61,232,.05);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple\/8{--tw-gradient-from:rgba(108,61,232,.08);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-purple\/20{--tw-gradient-from:rgba(108,61,232,.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/5{--tw-gradient-from:rgba(0,212,255,.05);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/8{--tw-gradient-from:rgba(0,212,255,.08);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/15{--tw-gradient-from:rgba(0,212,255,.15);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-cyan\/20{--tw-gradient-from:rgba(0,212,255,.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.to-blue\/5{--tw-gradient-to:rgba(30,144,255,.05)}
.to-blue\/8{--tw-gradient-to:rgba(30,144,255,.08)}
.to-blue\/15{--tw-gradient-to:rgba(30,144,255,.15)}
.to-purple\/5{--tw-gradient-to:rgba(108,61,232,.05)}
.to-purple\/8{--tw-gradient-to:rgba(108,61,232,.08)}
.to-cyan\/3{--tw-gradient-to:rgba(0,212,255,.03)}
.to-cyan\/5{--tw-gradient-to:rgba(0,212,255,.05)}
.to-cyan\/8{--tw-gradient-to:rgba(0,212,255,.08)}
.to-cyan\/10{--tw-gradient-to:rgba(0,212,255,.1)}
.to-cyan\/30{--tw-gradient-to:rgba(0,212,255,.3)}

/* Accent */
.accent-\[\#1E90FF\]{accent-color:#1E90FF}

/* Backdrop blur */
.backdrop-blur-xl{backdrop-filter:blur(24px)}
.backdrop-blur-lg{backdrop-filter:blur(16px)}

/* Scrollbar hide */
.filter-scroll::-webkit-scrollbar{display:none}
.filter-scroll{-ms-overflow-style:none;scrollbar-width:none}

/* Service Tabs */
#service-tabs::-webkit-scrollbar{display:none}
#service-tabs{-ms-overflow-style:none;scrollbar-width:none}
.service-tab{min-height:44px;display:inline-flex;align-items:center}

/* Additional margin top for first content (below fixed nav) */
.mt-14{margin-top:3.5rem} .mt-16{margin-top:4rem}

/* ============================================================
   PART 9: RESPONSIVE BREAKPOINTS
   ============================================================ */
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .md\:block{display:block} .md\:hidden{display:none} .md\:flex{display:flex}
  .md\:inline-flex{display:inline-flex}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .md\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
  .md\:grid-cols-6{grid-template-columns:repeat(6,1fr)}
  .md\:h-7{height:1.75rem} .md\:w-7{width:1.75rem}
  .md\:h-8{height:2rem} .md\:w-8{width:2rem}
  .md\:h-14{height:3.5rem} .md\:w-14{width:3.5rem}
  .md\:h-16{height:4rem} .md\:w-16{width:4rem}
  .md\:h-48{height:12rem}
  .md\:text-2xl{font-size:1.5rem}
  .md\:text-3xl{font-size:1.875rem} .md\:text-4xl{font-size:2.25rem}
  .md\:text-5xl{font-size:3rem} .md\:text-6xl{font-size:3.75rem}
  .md\:text-base{font-size:1rem} .md\:text-lg{font-size:1.125rem}
  .md\:text-xl{font-size:1.25rem} .md\:text-sm{font-size:.875rem}
  .md\:p-6{padding:1.5rem} .md\:p-8{padding:2rem} .md\:p-10{padding:2.5rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:py-3{padding-top:.75rem;padding-bottom:.75rem}
  .md\:py-4{padding-top:1rem;padding-bottom:1rem}
  .md\:py-12{padding-top:3rem;padding-bottom:3rem}
  .md\:py-16{padding-top:4rem;padding-bottom:4rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:py-24{padding-top:6rem;padding-bottom:6rem}
  .md\:py-32{padding-top:8rem;padding-bottom:8rem}
  .md\:pt-8{padding-top:2rem} .md\:pt-16{padding-top:4rem}
  .md\:pt-28{padding-top:7rem}
  .md\:pb-16{padding-bottom:4rem}
  .md\:mb-3{margin-bottom:.75rem} .md\:mb-4{margin-bottom:1rem}
  .md\:mb-5{margin-bottom:1.25rem} .md\:mb-6{margin-bottom:1.5rem}
  .md\:mb-8{margin-bottom:2rem} .md\:mb-10{margin-bottom:2.5rem}
  .md\:mb-12{margin-bottom:3rem} .md\:mb-16{margin-bottom:4rem}
  .md\:mt-2{margin-top:.5rem} .md\:-mt-16{margin-top:-4rem}
  .md\:gap-3{gap:.75rem} .md\:gap-4{gap:1rem} .md\:gap-6{gap:1.5rem}
  .md\:gap-10{gap:2.5rem} .md\:gap-12{gap:3rem}
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:text-left{text-align:left} .md\:text-right{text-align:right}
  .md\:pr-12{padding-right:3rem}
  .md\:pl-0{padding-left:0} .md\:pl-12{padding-left:3rem}
  .md\:w-1\/2{width:50%}
  .md\:-translate-x-1\/2{transform:translateX(-50%)}
  .md\:top-16{top:4rem}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:order-1{order:1} .md\:order-2{order:2} .md\:order-3{order:3}
  .md\:rounded-3xl{border-radius:var(--radius-xl)}
  .md\:min-h-screen{min-height:100vh}
  .md\:left-1\/2{left:50%}
}
@media(min-width:1024px){
  .lg\:block{display:block}
  .lg\:flex{display:flex}
  .lg\:grid{display:grid}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
  .lg\:text-4xl{font-size:2.25rem} .lg\:text-5xl{font-size:3rem}
  .lg\:text-6xl{font-size:3.75rem} .lg\:text-7xl{font-size:4.5rem}
  .lg\:text-xl{font-size:1.25rem}
  .lg\:p-10{padding:2.5rem} .lg\:p-16{padding:4rem}
  .lg\:top-4{top:1rem} .lg\:right-8{right:2rem}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:gap-16{gap:4rem}
}
@media(max-width:767px){
  .mobile\:hidden{display:none}
}

/* ============================================================
   PART 10: MISCELLANEOUS
   ============================================================ */

/* Object fit */
.object-cover{object-fit:cover}

/* Width/Height full */
.h-full{height:100%} .w-full{width:100%}

/* Aspect ratio */
.aspect-square{aspect-ratio:1/1}

/* Cursor */
.cursor-pointer{cursor:pointer}

/* Overflow */
.overflow-y-auto{overflow-y:auto}

/* Pointer events */
.pointer-events-none{pointer-events:none}

/* Min height */
.min-h-screen{min-height:100vh}

/* Missing sizing classes */
.h-36{height:9rem} .h-80{height:20rem} .h-96{height:24rem}
.w-80{width:20rem} .w-96{width:24rem}
.h-0\.5{height:.125rem} .h-px{height:1px} .w-px{width:1px}
.w-\[80\%\]{width:80%} .left-\[60\%\]{left:60%} .left-\[10\%\]{left:10%} .right-\[10\%\]{right:10%}
.left-1\/2{left:50%} .-translate-x-1\/2{transform:translateX(-50%)}
.w-1\/5{width:20%}
.md\:left-1\/2{}

/* Missing spacing */
.p-5{padding:1.25rem} .px-2\.5{padding-left:.625rem;padding-right:.625rem}
.mt-8{margin-top:2rem} .mt-12{margin-top:3rem}
.mb-1\.5{margin-bottom:.375rem} .mb-2\.5{margin-bottom:.625rem}
.-mt-16{margin-top:-4rem}
.top-6{top:1.5rem} .top-14{top:3.5rem}
.space-x-2>*+*{margin-left:.5rem} .space-x-3>*+*{margin-left:.75rem} .space-x-4>*+*{margin-left:1rem}
.space-y-6>*+*{margin-top:1.5rem}
.order-1{order:1} .order-2{order:2} .order-3{order:3}

/* Missing text */
.text-blue\/40{color:rgba(30,144,255,.4)} .text-cyan\/40{color:rgba(0,212,255,.4)} .text-purple\/40{color:rgba(108,61,232,.4)}
.uppercase{text-transform:uppercase} .tracking-wider{letter-spacing:.05em}

/* Missing radius */
.rounded-tl-xl{border-top-left-radius:var(--radius)} .rounded-tr-xl{border-top-right-radius:var(--radius)}

/* Missing backgrounds */
.bg-white\/90{background:rgba(255,255,255,.9)}

/* Missing borders */
.border-\[\#E5E9F2\]\/50{border-color:rgba(229,233,242,.5)}
.border-collapse{border-collapse:collapse}

/* Missing hover states */
.hover\:bg-blue\/10:hover{background:rgba(30,144,255,.1)}
.hover\:bg-white:hover{background:#fff}
.hover\:bg-surface-alt\/50:hover{background:rgba(240,244,255,.5)}
.hover\:border-blue\/30:hover{border-color:rgba(30,144,255,.3)}
.hover\:border-cyan\/30:hover{border-color:rgba(0,212,255,.3)}
.hover\:border-purple\/30:hover{border-color:rgba(108,61,232,.3)}

/* Top/bottom position */
.top-1\/4{top:25%} .bottom-1\/4{bottom:25%}

/* Min width */
.min-w-\[800px\]{min-width:800px}

/* Flex basis */
.flex-1{flex:1 1 0%}

/* Text decoration */
.hover\:underline:hover{text-decoration:underline}
.no-underline{text-decoration:none}

/* Background clip text for gradients */
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.text-transparent{color:transparent}

/* ============================================================
   PART 11: MISSING UTILITIES (from original HTML)
   ============================================================ */

/* Opacity modifiers */
.bg-white\/80{background:rgba(255,255,255,.8)}

/* Focus states */
.focus\:border-blue\/50:focus{border-color:rgba(30,144,255,.5)}
.focus\:outline-none:focus{outline:none}

/* Placeholder */
.placeholder-muted::placeholder{color:#6B7280}

/* Duration utilities */
.duration-300{transition-duration:.3s}
.duration-500{transition-duration:.5s}

/* Leading */
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}

/* Text sizes at breakpoints */
@media(min-width:640px){
  .sm\:text-4xl{font-size:2.25rem}
  .sm\:flex-row{flex-direction:row}
}
@media(min-width:1024px){
  .lg\:text-7xl{font-size:4.5rem}
}

/* Blur values */
.blur-\[120px\]{filter:blur(120px)}

/* Min-height */
.min-h-\[auto\]{min-height:auto}

/* Hover states */
.hover\:bg-surface-alt:hover{background:var(--surface-alt)}

/* Border important override */
.\!border-blue\/10{border-color:rgba(30,144,255,.1)!important}

/* Transition for group-hover */
.group-hover\:scale-110{transition:transform .5s}