/* ==========================================================
   MR.SCOTT — DESIGN TOKENS
   ========================================================== */
:root{
  --black:#050505;
  --surface:#0D0D0D;
  --surface-2:#151515;
  --surface-3:#1D1D1D;
  --orange:#FF6A00;
  --orange-bright:#FF7A18;
  --orange-dim: #B4490B;
  --white:#F5F5F5;
  --muted:#929292;
  --border: rgba(245,245,245,0.09);
  --border-strong: rgba(245,245,245,0.16);
  --glow: rgba(255,106,0,0.35);

  --font-display: 'Archivo Expanded', 'Archivo', sans-serif;
  --font-body: 'Archivo', sans-serif;

  --container: 1240px;
  --radius-s: 4px;
  --radius-m: 10px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

html[data-theme="light"]{
  --black:#F7F5F2;
  --surface:#FFFFFF;
  --surface-2:#F0EDE8;
  --surface-3:#E7E3DC;
  --white:#141210;
  --muted:#66605A;
  --border: rgba(20,18,16,0.1);
  --border-strong: rgba(20,18,16,0.18);
  --glow: rgba(255,106,0,0.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
  position:relative;
}

/* subtle grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--orange); color:#000; padding:.6rem 1rem; z-index:999;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; margin:0; }
p{ margin:0; }

/* ==========================================================
   LOADER
   ========================================================== */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark{
  font-family:var(--font-display); font-weight:900; font-size:2.2rem; letter-spacing:.06em; color:var(--white);
}
.loader__line{ width:140px; height:2px; background:rgba(255,255,255,.1); overflow:hidden; border-radius:2px; }
.loader__line span{ display:block; height:100%; width:40%; background:var(--orange); box-shadow:0 0 12px var(--glow); animation:loaderMove 1.1s ease-in-out infinite; }
@keyframes loaderMove{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} }

/* ==========================================================
   CUSTOM CURSOR
   ========================================================== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%;
  transform:translate(-50%,-50%); display:none;
}
.cursor-dot{ width:6px; height:6px; background:var(--orange); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid var(--orange); transition:width .2s var(--ease), height .2s var(--ease), opacity .2s var(--ease); opacity:.7; }
.has-fine-pointer .cursor-dot,.has-fine-pointer .cursor-ring{ display:block; }
.cursor-ring.is-active{ width:54px; height:54px; opacity:1; }

/* ==========================================================
   LAYOUT HELPERS
   ========================================================== */
.section{ max-width:var(--container); margin:0 auto; padding:7rem 1.5rem; position:relative; z-index:1; }
.section--alt{ background:var(--surface); max-width:none; }
.section--alt > *{ max-width:var(--container); margin-left:auto; margin-right:auto; }
.section__head{ max-width:640px; margin-bottom:3.2rem; }
.section__title{ font-size:clamp(2rem,4vw,2.8rem); }
.section__sub{ color:var(--muted); margin-top:.8rem; font-size:1.05rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.85rem; color:var(--muted); border:1px solid var(--border); border-radius:999px;
  padding:.4rem .9rem; margin-bottom:1.6rem;
}
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--glow); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-s); font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--orange); color:#0a0a0a; }
.btn--primary:hover{ background:var(--orange-bright); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--white); border-color:var(--border-strong); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.btn--lg{ padding:1.05rem 2rem; font-size:1rem; }
.btn--sm{ padding:.55rem 1.1rem; font-size:.85rem; }

/* ==========================================================
   NAVIGATION
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--black) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-color:var(--border);
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:1.1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{ display:flex; align-items:center; gap:.6rem; transition:opacity .2s; }
.nav__logo:hover{ opacity:.85; }
.nav__logo img{ height:28px; width:auto; object-fit:contain; }
.nav__logo img[src=""],.nav__logo img:not([src]){ display:none; }
.nav__logo-fallback{ font-family:var(--font-display); font-weight:900; letter-spacing:.04em; font-size:1.15rem; }
.nav__logo-fallback .dot{ color:var(--orange); }

.nav__links{ display:flex; gap:2rem; }
.nav__link{ font-size:.92rem; color:var(--muted); position:relative; padding:.25rem 0; transition:color .2s; }
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--orange);
  transition:right .25s var(--ease);
}
.nav__link:hover,.nav__link.is-active{ color:var(--white); }
.nav__link.is-active::after,.nav__link:hover::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap:.9rem; }
.pill-toggle{
  background:transparent; border:1px solid var(--border-strong); border-radius:999px; color:var(--muted);
  padding:.4rem .8rem; font-size:.78rem; letter-spacing:.02em; display:flex; gap:.35rem;
}
.pill-toggle span{ transition:color .2s; }
.pill-toggle span.is-active{ color:var(--orange); font-weight:700; }
.pill-toggle__sep{ color:var(--border-strong); }

.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); background:transparent;
  color:var(--white); display:flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn .icon-moon{ display:none; }
html[data-theme="light"] .icon-btn .icon-sun{ display:none; }
html[data-theme="light"] .icon-btn .icon-moon{ display:block; }

.hamburger{ display:none; width:36px; height:36px; border:none; background:transparent; flex-direction:column; justify-content:center; gap:5px; }
.hamburger span{ height:2px; width:100%; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); top:0; height:100vh; z-index:490;
  background:var(--surface); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .4s var(--ease);
  padding:6.5rem 2rem 2rem; display:flex; flex-direction:column; justify-content:space-between;
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:1.4rem; }
.mobile-menu nav a{ font-size:1.2rem; font-family:var(--font-display); font-weight:700; color:var(--muted); }
.mobile-menu nav a.is-active{ color:var(--orange); }
.mobile-menu__social{ display:flex; gap:1rem; }

@media (max-width:920px){
  .nav__links{ display:none; }
  .hamburger{ display:flex; }
  .pill-toggle{ display:none; }
  .btn--sm{ display:none; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:8rem 1.5rem 4rem;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
}
.hero__glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 70%);
  top:-160px; right:-160px; filter:blur(10px);
  pointer-events:none;
}
.hero__inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:2; width:100%; }
.hero__headline{ font-size:clamp(2.4rem,6.4vw,5rem); line-height:1.04; max-width:16ch; }
.hero__role{ margin-top:1.5rem; font-size:1.1rem; color:var(--white); font-weight:600; }
.hero__role .sep{ color:var(--orange); margin:0 .3rem; }
.hero__desc{ margin-top:1.3rem; max-width:52ch; color:var(--muted); font-size:1.05rem; }
.hero__cta{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero__social{ display:flex; gap:1rem; margin-top:3rem; }

.hero__bigtype{
  position:absolute; bottom:-4vw; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:900; font-size:min(20vw,260px);
  color:transparent; -webkit-text-stroke:1px var(--border-strong);
  letter-spacing:-.02em; white-space:nowrap; z-index:1; pointer-events:none; user-select:none;
}

/* ==========================================================
   SOCIAL ICONS
   ========================================================== */
.social-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social-icon svg{ width:17px; height:17px; }
.social-icon:hover{ color:var(--orange); border-color:var(--orange); transform:translateY(-3px); box-shadow:0 6px 20px var(--glow); }

/* ==========================================================
   ABOUT
   ========================================================== */
.about__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:start; }
.about__bio{ font-size:1.25rem; line-height:1.6; color:var(--white); max-width:56ch; }
.about__stats{ display:flex; flex-direction:column; gap:1.6rem; }
.stat{ border-left:2px solid var(--orange); padding-left:1.1rem; }
.stat__value{ font-family:var(--font-display); font-size:2.2rem; font-weight:800; }
.stat__label{ color:var(--muted); font-size:.9rem; margin-top:.2rem; }

.focus-grid{ margin-top:4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.focus-card{ background:var(--black); padding:1.8rem; transition:background .25s var(--ease); }
.focus-card:hover{ background:var(--surface-2); }
.focus-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.focus-card p{ color:var(--muted); font-size:.92rem; }

@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr; }
  .focus-grid{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================
   TECH STACK
   ========================================================== */
.tech-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.tech-card{
  background:var(--surface); padding:1.6rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.tech-card:hover{ background:var(--surface-2); transform:translateY(-3px); }
.tech-card svg{ width:30px; height:30px; color:var(--white); transition:color .25s var(--ease), filter .25s var(--ease); }
.tech-card:hover svg{ color:var(--orange); filter:drop-shadow(0 0 10px var(--glow)); }
.tech-card__name{ font-size:.82rem; font-weight:600; }
.tech-card__cat{ font-size:.72rem; color:var(--muted); }

@media (max-width:760px){ .tech-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .tech-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================
   SERVICES
   ========================================================== */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:2rem; display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover{ border-color:var(--orange); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.service-card__icon{ width:44px; height:44px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.service-card__icon svg{ width:20px; height:20px; }
.service-card h3{ font-size:1.15rem; }
.service-card p{ color:var(--muted); font-size:.94rem; flex:1; }
.service-card__cta{ font-size:.85rem; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:.3rem; }

@media (max-width:900px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   PORTFOLIO
   ========================================================== */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.project-card{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden;
  background:var(--black); cursor:pointer;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.project-card:hover{ border-color:var(--orange); transform:translateY(-4px); }
.project-card__media{
  aspect-ratio:4/3; background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.project-card__media iframe{ width:400%; height:400%; border:0; position:absolute; inset:0; transform:scale(.25); transform-origin:top left; pointer-events:none; background:#090909; }
.project-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.72)); pointer-events:none; }
.project-card__preview-label{ position:absolute; z-index:2; left:.8rem; bottom:.7rem; display:flex; align-items:center; gap:.4rem; padding:.3rem .55rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(5,5,5,.78); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; backdrop-filter:blur(8px); }
.preview-live-dot{ width:6px; height:6px; border-radius:50%; background:#62e38d; box-shadow:0 0 8px rgba(98,227,141,.8); }
.project-card__open{ position:absolute; z-index:3; right:.8rem; top:.8rem; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(5,5,5,.82); color:#fff; border:1px solid rgba(255,255,255,.22); opacity:0; transform:translateY(-5px); transition:.25s var(--ease); }
.project-card__open svg{ width:17px; height:17px; }
.project-card:hover .project-card__open,.project-card:focus-within .project-card__open{ opacity:1; transform:none; }
.project-card__body{ padding:1.4rem; }
.project-card__cat{ font-size:.75rem; color:var(--orange); font-weight:700; letter-spacing:.03em; }
.project-card__title{ font-size:1.15rem; margin-top:.4rem; }
.project-card__desc{ color:var(--muted); font-size:.88rem; margin-top:.4rem; }
.project-card__tech{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.tech-chip{ font-size:.72rem; padding:.25rem .6rem; border:1px solid var(--border-strong); border-radius:999px; color:var(--muted); }

@media (max-width:900px){ .project-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .project-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   PROCESS
   ========================================================== */
.process-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
.process-list li{ display:flex; gap:1.6rem; padding:1.6rem 0; border-bottom:1px solid var(--border); }
.process-list li:last-child{ border-bottom:none; }
.process-num{ font-family:var(--font-display); font-weight:800; color:var(--orange); font-size:1.4rem; min-width:2.2rem; }
.process-list h3{ font-size:1.1rem; margin-bottom:.3rem; }
.process-list p{ color:var(--muted); font-size:.92rem; }

/* ==========================================================
   PRICING
   ========================================================== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.price-card{
  background:var(--black); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:2rem; display:flex; flex-direction:column; gap:1.2rem; position:relative;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.price-card:hover{ transform:translateY(-4px); }
.price-card--popular{ border-color:var(--orange); background:linear-gradient(160deg, rgba(255,106,0,.08), transparent 60%); box-shadow:0 20px 50px rgba(255,106,0,.12); }
.price-card__badge{
  position:absolute; top:-13px; left:2rem; background:var(--orange); color:#0a0a0a; font-size:.72rem; font-weight:800;
  padding:.3rem .7rem; border-radius:999px; letter-spacing:.03em;
}
.price-card__name{ font-size:1.2rem; }
.price-card__tagline{ color:var(--muted); font-size:.88rem; }
.price-card__price{ font-family:var(--font-display); font-size:2.1rem; font-weight:800; }
.price-card__price span{ font-size:.95rem; color:var(--muted); font-weight:500; }
.price-card__features{ display:flex; flex-direction:column; gap:.6rem; flex:1; }
.price-card__features li{ display:flex; gap:.55rem; font-size:.9rem; color:var(--white); align-items:flex-start; }
.price-card__features li svg{ width:15px; height:15px; color:var(--orange); flex-shrink:0; margin-top:.15rem; }
.pricing-note{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:2.5rem; }

@media (max-width:1000px){ .pricing-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   CALCULATOR
   ========================================================== */
.calculator{ display:grid; grid-template-columns:1.3fr 1fr; gap:2.5rem; align-items:start; }
.calculator__form{ display:flex; flex-direction:column; gap:1.8rem; }
.calc-label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:.6rem; font-weight:600; }
.calc-select,.calc-input{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--white);
  padding:.8rem 1rem; border-radius:var(--radius-s); font-size:.95rem;
}
.calc-checks{ display:flex; flex-direction:column; gap:.6rem; }
.calc-check{ display:flex; align-items:center; gap:.7rem; font-size:.92rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:var(--radius-s); cursor:pointer; transition:border-color .2s; }
.calc-check:hover{ border-color:var(--border-strong); }
.calc-check input{ accent-color:var(--orange); width:16px; height:16px; }
.calc-check span.price{ margin-left:auto; color:var(--muted); font-size:.82rem; }

.calculator__result{
  position:sticky; top:110px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:2rem;
}
.calc-result-label{ color:var(--muted); font-size:.85rem; }
.calc-result-price{ font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--orange); margin:.4rem 0 1.2rem; }
.calc-result-list{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.4rem; }
.calc-result-list li{ font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between; }
.calc-disclaimer{ font-size:.78rem; color:var(--muted); margin-top:1rem; line-height:1.5; }

@media (max-width:860px){ .calculator{ grid-template-columns:1fr; } .calculator__result{ position:static; } }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card{ background:var(--black); border:1px solid var(--border); border-radius:var(--radius-m); padding:1.8rem; color:var(--muted); font-size:.98rem; position:relative; overflow:hidden; }
.testimonial-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--orange); }
.testimonial-card__label{ display:block; color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem; }
.testimonial-card cite{ display:block; margin-top:1.2rem; font-style:normal; font-weight:800; color:var(--white); }
.testimonial-card cite span{ display:block; color:var(--muted); font-weight:500; font-size:.82rem; margin-top:.15rem; }
.testimonial-empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:2rem; border:1px dashed var(--border-strong); border-radius:var(--radius-m); }

@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   FINAL CTA
   ========================================================== */
.final-cta{
  position:relative; text-align:center; padding:8rem 1.5rem; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,106,0,.12), transparent 65%), var(--black);
}
.final-cta h2{ font-size:clamp(2rem,5vw,3.4rem); max-width:16ch; margin:0 auto; }
.final-cta p{ color:var(--muted); margin-top:1.2rem; font-size:1.1rem; }
.final-cta__buttons{ display:flex; justify-content:center; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; }
.contact-form{ display:flex; flex-direction:column; gap:1.3rem; }
.form-row label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:.5rem; font-weight:600; }
.form-row input,.form-row select,.form-row textarea{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--white);
  padding:.85rem 1rem; border-radius:var(--radius-s); font-size:.95rem; resize:vertical;
  transition:border-color .2s;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{ border-color:var(--orange); }
.form-row--actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.form-status{ font-size:.88rem; color:var(--orange); min-height:1.2rem; }

.contact-side{ border-left:1px solid var(--border); padding-left:2.5rem; }
.contact-side h3{ font-size:.95rem; text-transform:none; margin-bottom:.7rem; margin-top:2rem; }
.contact-side h3:first-child{ margin-top:0; }
.contact-side a{ color:var(--white); font-size:.98rem; }
.contact-side a:hover{ color:var(--orange); }
.contact-social{ display:flex; gap:.8rem; margin-top:.8rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; color:var(--orange); font-weight:700; font-size:.92rem; }

@media (max-width:860px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact-side{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:2rem; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{ background:var(--surface); border-top:1px solid var(--border); padding:4rem 1.5rem 1.5rem; }
.footer__top{ max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); }
.footer__name{ font-family:var(--font-display); font-weight:900; font-size:1.8rem; }
.footer__name .dot{ color:var(--orange); }
.footer__brand p{ color:var(--muted); margin-top:.5rem; font-size:.9rem; }
.footer__links{ display:flex; flex-direction:column; gap:.6rem; }
.footer__links a{ color:var(--muted); font-size:.92rem; }
.footer__links a:hover{ color:var(--orange); }
.footer__social{ display:flex; gap:.8rem; align-items:flex-start; }
.footer__bottom{ max-width:var(--container); margin:0 auto; padding-top:1.5rem; color:var(--muted); font-size:.85rem; }
.owner-entry{ width:9px; height:9px; display:inline-block; vertical-align:middle; padding:0; margin:0 .35rem; border:0; border-radius:50%; background:var(--orange); opacity:.18; cursor:default; transition:opacity .2s, box-shadow .2s; }
.owner-entry:hover,.owner-entry:focus-visible{ opacity:.55; box-shadow:0 0 8px var(--glow); }

/* ==========================================================
   MOBILE CONTACT BAR
   ========================================================== */
.mobile-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:400;
  background:color-mix(in srgb, var(--black) 85%, transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.mobile-bar a{ display:flex; flex-direction:column; align-items:center; gap:.25rem; font-size:.68rem; color:var(--muted); }
.mobile-bar svg{ width:19px; height:19px; }
.mobile-bar a:hover{ color:var(--orange); }
@media (max-width:760px){ .mobile-bar{ display:flex; } body{ padding-bottom:70px; } }

/* ==========================================================
   MODALS
   ========================================================== */
.modal{ position:fixed; inset:0; z-index:800; display:none; align-items:flex-start; justify-content:center; padding:4rem 1rem; overflow-y:auto; }
.modal.is-open{ display:flex; }
.modal__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); }
.modal__panel{
  position:relative; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-m);
  max-width:640px; width:100%; padding:2.5rem; z-index:2;
  animation:modalIn .3s var(--ease);
}
.modal__panel--wide{ max-width:820px; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.modal__close{ position:absolute; top:1rem; right:1.2rem; background:none; border:none; color:var(--muted); font-size:1.8rem; line-height:1; }
.modal__close:hover{ color:var(--orange); }

.cs__meta{ color:var(--orange); font-size:.8rem; font-weight:700; margin-bottom:.4rem; }
.cs__title{ font-size:1.6rem; margin-bottom:1.2rem; }
.cs__block{ margin-bottom:1.2rem; }
.cs__block h4{ font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.cs__block p{ font-size:.95rem; }
.cs__links{ display:flex; gap:1rem; margin-top:1.5rem; }
.cs__preview{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#050505; border:1px solid var(--border); border-radius:var(--radius-m); margin:1rem 0 1.5rem; }
.cs__preview iframe{ width:100%; height:100%; border:0; background:#090909; }

/* ==========================================================
   OWNER STUDIO
   ========================================================== */
.admin-head{ margin-bottom:1.5rem; padding-right:2rem; }
.admin-head h2{ font-size:1.8rem; margin:.25rem 0 .5rem; }
.admin-head p,.admin-note{ color:var(--muted); }
.admin-kicker{ color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.admin-projects{ display:grid; gap:1rem; max-height:52vh; overflow:auto; padding-right:.4rem; }
.admin-project{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; border:1px solid var(--border); border-radius:var(--radius-m); padding:1rem; }
.admin-project legend{ color:var(--orange); font-weight:800; padding:0 .45rem; }
.admin-project label{ color:var(--muted); font-size:.78rem; font-weight:700; }
.admin-project input,.admin-project textarea{ display:block; width:100%; margin-top:.35rem; padding:.7rem .8rem; color:var(--white); background:var(--black); border:1px solid var(--border-strong); border-radius:var(--radius-s); font:inherit; font-size:.86rem; }
.admin-project .admin-wide{ grid-column:1/-1; }
.admin-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.admin-status{ min-height:1.5rem; color:var(--orange); margin-top:.8rem; }
.admin-note{ font-size:.78rem; margin-top:.8rem; }
@media (max-width:640px){ .admin-project{ grid-template-columns:1fr; } .admin-project .admin-wide{ grid-column:auto; } }

/* ==========================================================
   INVOICE
   ========================================================== */
.invoice-form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }
.invoice-form .full{ grid-column:1/-1; }
.invoice-form label{ font-size:.8rem; color:var(--muted); display:block; margin-bottom:.4rem; }
.invoice-form input,.invoice-form textarea{ width:100%; background:var(--black); border:1px solid var(--border-strong); color:var(--white); padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.9rem; }
.invoice-actions{ display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }

.invoice-preview{ background:#0a0a0a; border:1px solid var(--border); border-radius:var(--radius-m); padding:2rem; }
.invoice-preview__head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--border); padding-bottom:1.5rem; margin-bottom:1.5rem; }
.invoice-preview__brand{ font-family:var(--font-display); font-weight:900; font-size:1.5rem; }
.invoice-preview__brand .dot{ color:var(--orange); }
.invoice-preview__meta{ text-align:right; font-size:.85rem; color:var(--muted); }
.invoice-preview table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.invoice-preview th{ text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border-strong); padding:.6rem 0; }
.invoice-preview td{ padding:.7rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.invoice-preview__totals{ margin-left:auto; width:260px; }
.invoice-preview__totals div{ display:flex; justify-content:space-between; padding:.4rem 0; font-size:.9rem; }
.invoice-preview__totals .total{ border-top:1px solid var(--border-strong); font-weight:800; font-size:1.1rem; color:var(--orange); margin-top:.4rem; padding-top:.7rem; }

@media print{
  body *{ visibility:hidden; }
  #invoiceModal, #invoiceModal *{ visibility:visible; }
  #invoiceModal{ position:absolute; inset:0; padding:0; background:#fff; }
  .modal__backdrop,.modal__close,.invoice-form,.invoice-actions{ display:none !important; }
  .invoice-preview{ border:none; background:#fff; color:#000; }
  .invoice-preview *{ color:#000 !important; }
}

/* ==========================================================
   MISC
   ========================================================== */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

::selection{ background:var(--orange); color:#0a0a0a; }

/* Keyboard access and comfortable preview proportions. */
.project-card:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
@media(max-width:600px){.cs__preview{aspect-ratio:3/4}.project-card__open{opacity:1;transform:none}}

/* Each social link carries its own platform accent. */
.social-icon[data-social="linkedin"]{--social:#0a9bff}.social-icon[data-social="instagram"]{--social:#e75bb3}.social-icon[data-social="whatsapp"]{--social:#25d366}.social-icon[data-social="facebook"]{--social:#1877f2}
.social-icon:hover,.social-icon:focus-visible,.social-icon:active{color:var(--social);border-color:var(--social);box-shadow:0 0 19px color-mix(in srgb,var(--social) 45%,transparent)}

/* Color & motion refresh — October 2026. */
body{
  background:linear-gradient(125deg,#100b18 0%,#351626 24%,#000000 48%,#30205a 70%,#421d0e 100%);
  background-size:300% 300%; background-attachment:fixed;
  animation:body-gradient-drift 24s ease-in-out infinite;
}
@keyframes body-gradient-drift{
  0%,100%{background-position:0% 30%}
  50%{background-position:100% 70%}
}
html[data-theme="light"] body{
  background-image:linear-gradient(125deg,#fff2e6,#fce0ef,#deedff,#ece0ff,#ffe4d1);
}
.section--alt{background:color-mix(in srgb,var(--surface) 78%,transparent)}
.hero__glow{background:radial-gradient(circle,rgba(255,106,0,.42),rgba(236,53,174,.17) 40%,transparent 70%)}
.nav,.nav.is-scrolled{
  background:color-mix(in srgb,var(--black) 90%,transparent);
  backdrop-filter:blur(18px); border-bottom:1px solid var(--border-strong);
}
.nav__inner{max-width:1440px;gap:1rem}
.nav__links{gap:.45rem}
.nav__logo{flex-shrink:0}
.nav-icon{width:17px;height:17px;flex-shrink:0}
[data-section="home"]{--nav-color:#ff993b;--nav-end:#ff6558}
[data-section="about"]{--nav-color:#c399ff;--nav-end:#ed99f4}
[data-section="services"]{--nav-color:#69caff;--nav-end:#66ede1}
[data-section="work"]{--nav-color:#ff92d0;--nav-end:#ffad92}
[data-section="pricing"]{--nav-color:#ffd264;--nav-end:#ffae55}
[data-section="process"]{--nav-color:#7fe8d4;--nav-end:#8ec9ff}
[data-section="contact"]{--nav-color:#94ee9d;--nav-end:#68dbc8}
.nav__link,.mobile-menu nav a{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;padding:.55rem .7rem;border-radius:8px;
  font-weight:800;font-size:.8rem;color:#10101c;
  border:1px solid var(--nav-color);
  background:linear-gradient(115deg,var(--nav-color),var(--nav-end),var(--nav-color));
  background-size:220% 100%;
  box-shadow:0 3px 13px color-mix(in srgb,var(--nav-color) 18%,transparent);
  transition:transform .2s,box-shadow .2s,background-position .4s;
}
.nav__link::after{display:none}
.nav__link:hover,.nav__link.is-active,.mobile-menu nav a:hover,.mobile-menu nav a.is-active{
  color:#10101c;background-position:100% 50%;
  box-shadow:0 0 20px color-mix(in srgb,var(--nav-color) 48%,transparent);
}
.nav__link:hover{transform:translateY(-2px)}
.nav__link.is-active{outline:2px solid var(--nav-color);outline-offset:3px}
.nav__link:focus-visible,.mobile-menu nav a:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.nav__actions{gap:.6rem}
.nav__actions .btn--primary{font-weight:800;background:linear-gradient(110deg,#ffb54b,#ff773e,#ffb54b);background-size:200% 100%;animation:body-gradient-drift 8s ease infinite;box-shadow:0 0 20px #ff6a0045;min-height:44px}
.mobile-menu{overflow-y:auto;height:100dvh;gap:2rem}
.mobile-menu nav{gap:.75rem}
.mobile-menu nav a{justify-content:flex-start;padding:.65rem .85rem;font-size:.95rem}
.social-icon[data-social="linkedin"]{--social:#39b5ff;--social-end:#1265e7}
.social-icon[data-social="instagram"]{--social:#ff65ca;--social-end:#ff952e}
.social-icon[data-social="whatsapp"]{--social:#43f58d;--social-end:#06bda4}
.social-icon[data-social="facebook"]{--social:#569eff;--social-end:#735aff}
.social-icon{
  --social:#ff993b;--social-end:#ff6558;
  position:relative;isolation:isolate;width:46px;height:46px;flex-shrink:0;
  border:1px solid var(--social);color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--social) 38%,#0b1020),color-mix(in srgb,var(--social-end) 30%,#0b1020));
  box-shadow:0 0 13px color-mix(in srgb,var(--social) 48%,transparent),0 0 28px color-mix(in srgb,var(--social-end) 22%,transparent),inset 0 0 12px color-mix(in srgb,var(--social) 22%,transparent);
}
.social-icon svg{width:21px;height:21px;filter:drop-shadow(0 0 5px var(--social))}
.social-icon:hover,.social-icon:focus-visible,.social-icon:active,.contact-side .social-icon:hover{
  color:#fff;border-color:var(--social);transform:translateY(-3px) scale(1.07);
  background:linear-gradient(135deg,color-mix(in srgb,var(--social) 60%,#0b1020),color-mix(in srgb,var(--social-end) 55%,#0b1020));
  box-shadow:0 0 9px var(--social),0 0 25px color-mix(in srgb,var(--social) 75%,transparent),0 0 46px color-mix(in srgb,var(--social-end) 46%,transparent);
}
.social-icon:focus-visible{outline:2px solid var(--white);outline-offset:5px}
.hero__social,.contact-social,.footer__social,.mobile-menu__social{flex-wrap:wrap}
@media(max-width:1190px){
  .nav__links{display:none}.hamburger{display:flex}.pill-toggle{display:none}.nav__actions .btn--sm{display:none}
}
@media(prefers-reduced-motion:reduce){
  body,.nav__actions .btn--primary{animation:none}
  .social-icon:hover,.social-icon:focus-visible,.nav__link:hover{transform:none}
}

/* Package collection: individual colors, moving highlights and clear support. */
.price-card{--package:#ffae55;--package-end:#ff6a38;isolation:isolate;border-radius:20px;border-color:color-mix(in srgb,var(--package) 40%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--package) 12%,var(--surface)),var(--surface) 55%);box-shadow:0 12px 32px #00000020;padding-top:2.3rem;gap:1rem}
.price-card[data-plan="starter"]{--package:#65e7c4;--package-end:#35b8dd}
.price-card[data-plan="business"]{--package:#ffb55c;--package-end:#ff6a38}
.price-card[data-plan="professional"]{--package:#c9a0ff;--package-end:#ff87cc}
.price-card[data-plan="ecommerce"]{--package:#ff9ec4;--package-end:#ff9976}
.price-card[data-plan="webapp"]{--package:#83caff;--package-end:#a7a3ff}
.price-card[data-plan="enterprise"]{--package:#e6cb86;--package-end:#ffa767}
.price-card::after{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--package),var(--package-end),transparent);background-size:200% 100%;animation:package-shimmer 7s ease-in-out infinite;pointer-events:none}
@keyframes package-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.price-card:hover,.price-card:focus-within{transform:translateY(-6px);border-color:var(--package);box-shadow:0 18px 45px color-mix(in srgb,var(--package) 16%,transparent)}
.price-card__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:var(--package);background:color-mix(in srgb,var(--package) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--package) 35%,transparent)}
.price-card__icon svg{width:28px;height:28px}
.price-card__name{font-weight:800;line-height:1.3;font-size:1.2rem}
.price-card__tagline{min-height:2.8em}
.price-card__price{font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.3;letter-spacing:-.04em;padding:.4rem 0 .8rem;border-bottom:1px solid var(--border)}
.price-card__features{padding:.4rem 0;gap:.7rem}
.price-card__features li svg{color:var(--package)}
.price-card__badge{z-index:1;left:auto;right:1.4rem;background:linear-gradient(110deg,var(--package),var(--package-end));color:#16100b}
.price-card__maintenance{display:flex;gap:.65rem;align-items:center;padding:.8rem;border-radius:12px;background:color-mix(in srgb,var(--package) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--package) 20%,transparent)}
.price-card__maintenance svg{width:20px;height:20px;color:var(--package)}
.price-card__maintenance strong{display:block;font-size:.8rem;line-height:1.5}
.price-card__maintenance div>span{display:block;font-size:.74rem;color:var(--muted)}
.price-card>.btn{background:linear-gradient(110deg,var(--package),var(--package-end),var(--package));background-size:200% 100%;animation:package-shimmer 9s ease-in-out infinite;border:0;color:#151015;font-weight:800;min-height:48px}
html[data-theme="light"] .price-card__icon,html[data-theme="light"] .price-card__features li svg,html[data-theme="light"] .price-card__maintenance svg{color:color-mix(in srgb,var(--package) 45%,#181018)}
@media(min-width:1001px){.price-card[data-plan="enterprise"]{grid-column:2}}

.project-cover{width:100%;height:100%;object-fit:cover;display:block}