/* =====================================================
   SMART IDEA - dark blue glass theme
   00 tokens      01 base        02 utilities
   03 background  04 preloader   05 nav (+buttons)
   06 hero        07 brandstrip  08 marquee
   09 sections    10 services    11 work
   12 process     13 stack       14 quotes
   15 contact     16 footer      17 logos
   18 motion      19 a11y        20 responsive
   Follow index.html order: nav > hero > brandstrip >
   marquee > services > work > process > stack >
   quotes > contact > footer. Utilities/motion/a11y/
   responsive grouped at logical edges.
   ===================================================== */

/* ---------- 00 · tokens ---------- */
:root {
  --bg: #030A1F;
  --orange: #FF9A00;
  --mut: #A9B8DC;
  --glass: rgba(148, 184, 255, .08);
  --stroke: rgba(148, 184, 255, .18);
  --grad: linear-gradient(92deg, #FFC247, #FF9A00 45%, #FF6A00);
}
/* ---------- 01 · base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
section {
  scroll-margin-top: 100px;
}
body {
  background:
    radial-gradient(1200px 700px at 80% -10%, #10246b 0%, transparent 60%),
    radial-gradient(900px 600px at 0% 20%, #0b1c55 0%, transparent 55%),
    var(--bg);
  color: #EAF0FF;
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
h1,
h2,
h3 {
  line-height: 1.15;
}
/* ---------- 03 · background fx ---------- */
#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .5;
  animation: drift 14s ease-in-out infinite alternate;
}
.o1 {
  width: 560px;
  height: 560px;
  background: #1b3fa0;
  top: -160px;
  right: -120px;
}
.o2 {
  width: 480px;
  height: 480px;
  background: #ff8a0045;
  bottom: -140px;
  left: -120px;
}
.o3 {
  width: 420px;
  height: 420px;
  background: #2748ff55;
  top: 35%;
  left: 45%;
}
@keyframes drift {
  to { transform: translate(-60px, 50px) scale(1.12); }
}
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 175, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 175, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* ---------- 02 · utilities ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
}
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none; }
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 154, 0, .7);
}

/* ---------- 04 · preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #040b24;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  transition: opacity .6s, visibility .6s;
}
#preloader.done {
  opacity: 0;
  visibility: hidden;
}
#preloader p.loader-text {
  letter-spacing: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
}
#preloader p.loader-text span {
  color: var(--orange);
}
.load-bar {
  width: 220px;
  height: 4px;
  background: #ffffff18;
  border-radius: 99px;
  overflow: hidden;
}
.load-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  animation: load 1.6s forwards;
}
@keyframes load {
  to { width: 100%; }
}
.loader-logo {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  animation: loaderFloat 2.2s ease-in-out infinite;
}
.loader-logo img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 34px rgba(255, 154, 0, .45));
  animation: loaderPulse 1.6s ease-in-out infinite;
}
.loader-glow {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 0, .35) 0%, transparent 65%);
  filter: blur(6px);
  animation: loaderGlow 1.6s ease-in-out infinite;
  pointer-events: none;
}
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #FF9A00;
  border-right-color: rgba(255, 154, 0, .35);
  animation: loaderSpin 1.1s linear infinite;
  pointer-events: none;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes loaderGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes loaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* ---------- 05 · nav ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 24px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  border-radius: 18px;
}
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  line-height: 0;
}
.links {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-left: auto;
}
.links a {
  color: var(--mut);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.links a:hover {
  color: #fff;
}
/* buttons (kept with nav: main CTA lives in header) */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 15px;
  cursor: pointer;
}
.btn.small {
  padding: 10px 18px;
  font-size: 14px;
  background: var(--grad);
  color: #231100 !important;
  font-weight: 700;
}
.btn.primary {
  background: var(--grad);
  color: #231100;
  box-shadow: 0 12px 34px rgba(255, 138, 0, .35);
}
.btn.ghost {
  color: #fff;
}
.burger {
  display: none;
  background: none;
  border: 0;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.burger span {
  width: 26px;
  height: 2px;
  background: #fff;
  display: block;
}
.mobile-menu {
  position: fixed;
  top: 86px;
  left: 12px;
  right: 12px;
  z-index: 899;
  padding: 14px;
  display: none;
  flex-direction: column;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  padding: 12px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff14;
}
/* ---------- 06 · hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  padding: 170px 20px 40px;
  max-width: 1220px;
  margin: 0 auto;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
  border-radius: 99px;
  color: #cfe0ff;
  margin: 0;
}
.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #37e08b;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero h1 {
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.02;
  margin: 22px 0 16px;
}
.hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.sub {
  color: var(--mut);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
}
.typed-line {
  font-family: "JetBrains Mono", monospace;
  margin: 18px 0;
  color: #9fe8ff;
  background: #040c28cc;
  border: 1px solid var(--stroke);
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
}
.prompt {
  color: var(--orange);
}
.caret {
  color: var(--orange);
}
.cta-row {
  display: flex;
  gap: 14px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  gap: 8px;
  padding: 16px 10px;
  max-width: 560px;
}
.hero-stats > div {
  flex: 1;
  text-align: center;
}
.hero-stats b {
  font-size: 30px;
  display: block;
  color: #fff;
}
.hero-stats span {
  color: var(--mut);
  font-style: normal;
  font-size: 12.5px;
}
.hero-visual {
  position: relative;
  min-height: 440px;
}
/* merged duplicate: was two .code-card rules */
.code-card {
  padding: 18px;
  position: relative;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  max-width: 100%;
  overflow: hidden;
}
.code-card pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  overflow: auto;
}
.dots {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}
.dots .dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: #ff5f57;
}
.dots .dot:nth-child(2) {
  background: #febc2e;
}
.dots .dot:nth-child(3) {
  background: #28c840;
}
.dots .filename {
  margin-left: 8px;
  color: var(--mut);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.float-card {
  position: absolute;
  padding: 12px 16px;
  font-size: 14px;
  z-index: 3;
  animation: float 5s ease-in-out infinite;
}
.float-card b {
  display: block;
}
.float-card span {
  color: var(--mut);
  font-style: normal;
  font-size: 12px;
}
.fc1 {
  top: 6%;
  right: 0;
}
.fc2 {
  bottom: 24%;
  right: 0;
}
.fc3 {
  bottom: 0;
  left: 6%;
}
@keyframes float {
  50% { transform: translateY(-14px); }
}
.orb-ring {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px dashed rgba(255, 154, 0, .4);
  border-radius: 50%;
  top: 40px;
  left: 20px;
  animation: spin 26s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  color: var(--mut);
  font-size: 11px;
  letter-spacing: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-hint .scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--orange), transparent);
  display: block;
}

/* ---------- 07 · brandstrip (moved up: sits right after hero in HTML) ---------- */
.brandstrip {
  max-width: 1220px;
  margin: 0 auto;
  padding: 20px 20px 0;
  position: relative;
  z-index: 1;
}
.brand-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding: 22px 26px;
}
.brand-card img {
  height: 120px;
  width: auto;
  max-width: 55%;
  flex: none;
  margin-right: auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 8px 28px rgba(255, 154, 0, .35));
}
.brand-card p {
  color: var(--mut);
  font-size: 15px;
  margin-left: auto;
  text-align: right;
  max-width: 320px;
}

/* ---------- 08 · marquee ---------- */
.marquee {
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  background: #050d2bcc;
  position: relative;
  z-index: 1;
  margin-top: 80px;
}
.marquee .track {
  display: inline-flex;
  animation: mq 22s linear infinite;
  letter-spacing: 2px;
  color: #ffd9a0;
}
@keyframes mq {
  to { transform: translateX(-50%); }
}

/* ---------- 09 · sections (shared scaffold) ---------- */
.section {
  max-width: 1220px;
  margin: 0 auto;
  padding: 90px 20px 10px;
  position: relative;
  z-index: 1;
}
.eyebrow {
  color: var(--orange);
  letter-spacing: 3px;
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 600;
}
.section h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 10px;
}
.lede {
  color: var(--mut);
  margin-bottom: 30px;
}
/* ---------- 10 · services ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.card {
  padding: 26px;
}
.card .icon {
  font-size: 22px;
  font-weight: 700;
  background: #ffffff10;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  margin-bottom: 14px;
  color: var(--orange);
}
.card p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 14px;
}
.card ul {
  list-style: none;
  margin-bottom: 14px;
}
.card li {
  font-size: 13px;
  color: #cfe0ff;
  padding: 4px 0;
}
.card a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
/* ---------- 11 · work ---------- */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 26px;
}
.filters button {
  background: #ffffff0d;
  color: #dbe6ff;
  border: 1px solid var(--stroke);
  padding: 10px 18px;
  border-radius: 99px;
  cursor: pointer;
  font-size: 14px;
}
.filters button.active {
  background: var(--grad);
  color: #231100;
  font-weight: 700;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.work {
  overflow: hidden;
  padding: 0;
}
.work.hide {
  display: none;
}
.thumb {
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  font-size: 22px;
  font-weight: 700;
}
.thumb em {
  font-style: normal;
  font-size: 12px;
  color: #ffffffcc;
}
.thumb span {
  display: block;
}
.thumb span + span {
  font-style: normal;
  font-size: 12px;
  color: #ffffffcc;
}
.t1 { background: linear-gradient(135deg, #12307e, #0a1c52); }
.t2 { background: linear-gradient(135deg, #4a1500, #ff6a00); }
.t3 { background: linear-gradient(135deg, #06281f, #0bb38155); }
.t4 { background: linear-gradient(135deg, #2b0a4d, #7b2ff7); }
.t5 { background: linear-gradient(135deg, #082a4d, #1593ff66); }
.t6 { background: linear-gradient(135deg, #101b3d, #ff6a00); }
.wbody {
  padding: 20px;
}
.wbody p {
  color: var(--mut);
  font-size: 13px;
  margin: 8px 0 12px;
}
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tags span {
  font-style: normal;
  font-size: 12px;
  background: #ffffff12;
  border: 1px solid var(--stroke);
  padding: 5px 12px;
  border-radius: 99px;
}
/* ---------- 12 · process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
}
.step {
  padding: 26px;
}
.step b {
  font-size: 36px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 13 · stack ---------- */
.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px;
  list-style: none;
}
.stack-grid li {
  padding: 12px 20px;
  border-radius: 12px;
  background: #ffffff0c;
  border: 1px solid var(--stroke);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

/* ---------- 14 · quotes ---------- */
.q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.q-grid figure {
  padding: 26px;
  font-size: 15px;
  line-height: 1.7;
}
.q-grid blockquote {
  margin: 0;
}
.q-grid figcaption {
  margin-top: 14px;
  color: var(--orange);
  font-size: 13.5px;
}
/* ---------- 15 · contact ---------- */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 34px;
}
.c-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  font-style: normal;
}
.c-rows a,
.c-rows span {
  background: #ffffff0b;
  border: 1px solid var(--stroke);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  color: #dbe6ff;
  text-decoration: none;
}
#cform {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#cform label {
  font-size: 13px;
  color: var(--mut);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#cform input,
#cform select,
#cform textarea {
  background: #040c28;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 13px 15px;
  color: #fff;
  font-size: 14.5px;
  outline: none;
}
.form-ok {
  display: none;
  color: #8fe6b0;
  font-size: 13.5px;
}
.form-ok.show {
  display: block;
}

/* ---------- 16 · footer ---------- */
footer {
  margin-top: 70px;
  border-top: 1px solid var(--stroke);
  background: #040b24cc;
  position: relative;
  z-index: 1;
}
.f-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 26px 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--mut);
  font-size: 13.5px;
  align-items: center;
}
.socials {
  display: flex;
  gap: 16px;
}
.socials a {
  color: var(--mut);
  text-decoration: none;
}
/* ---------- 18 · motion (scroll reveal) ---------- */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(34px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- 19 · a11y ---------- */
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 10001;
  background: #fff;
  color: #03122e;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ---------- 20 · responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span,
  .float-card,
  .marquee .track,
  .pulse,
  .orb-ring,
  .loader-logo,
  .loader-logo img,
  .loader-glow,
  .loader-ring {
    animation: none !important;
  }
}
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .q-grid { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { padding: 8px 10px 8px 14px; }
  .links { display: none; }
  .burger {
    display: flex;
    margin-left: auto;
  }
  .cards,
  .work-grid,
  .steps { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .brand-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .brand-card img {
    max-width: 100%;
    margin-right: 0;
  }
  .brand-card p {
    margin-left: 0;
    text-align: left;
    max-width: none;
  }
  .f-inner { flex-direction: column; }
  /* merged duplicate 640px rule (was separate at EOF) */
  .logo-full {
    height: 44px;
    max-width: 180px;
  }
}

/* ---------- 17 · logos (kept together: nav / showcase / footer) ---------- */
.logo-full {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 6px 22px rgba(255, 154, 0, .4));
}
.f-logo {
  height: 76px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  background: transparent;
  padding: 0;
}