/* ============================================================
   LOOKYSITE — Main Stylesheet
   ============================================================
   Sections:
   01. CSS Variables & Reset
   02. Custom Cursor
   03. Navigation
   04. Hero
   05. Stats Strip
   06. Shared Section Utilities
   07. Services
   08. Process
   09. Pricing
   10. Why Me
   11. Contact
   12. Footer
   13. Scroll Animations
   14. Responsive
   ============================================================ */


/* ─── 01. CSS Variables & Reset ─────────────────────────── */

:root {
  --bg0: #02020c;       /* deepest background */
  --bg1: #06060f;       /* section surface */
  --bg2: #0a0a1a;       /* elevated surface */
  --c1: #00e5ff;        /* primary accent — electric cyan */
  --c1d: rgba(0, 229, 255, 0.1);
  --c1g: rgba(0, 229, 255, 0.32);
  --c2: #8b5cf6;        /* secondary — electric purple */
  --c3: #f43f8e;        /* tertiary — hot pink (glitch / highlights) */
  --fg: #ecf0ff;        /* foreground text */
  --fgd: rgba(236, 240, 255, 0.55);   /* dimmed text */
  --fgm: rgba(236, 240, 255, 0.28);   /* muted text */
  --br: rgba(0, 229, 255, 0.1);       /* default border */
  --brh: rgba(0, 229, 255, 0.38);     /* highlighted border */
  --ez: cubic-bezier(0.4, 0, 0.2, 1);
  --fh: 'Orbitron', monospace;
  --fb: 'Exo 2', sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fb);
  background: var(--bg0);
  color: var(--fg);
  overflow-x: hidden;
  cursor: none;
}

/* Grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.022) 1px, transparent 1px);
  background-size: 65px 65px;
  pointer-events: none;
  z-index: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--brh); border-radius: 2px; }


/* ─── 02. Custom Cursor ──────────────────────────────────── */

#cur {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--c1);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--c1), 0 0 22px var(--c1g);
  transition: width .18s, height .18s, background .18s;
}

#curR {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 229, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ez), height .35s var(--ez), border-color .35s;
}

#cur.h {
  width: 12px;
  height: 12px;
  background: var(--c3);
  box-shadow: 0 0 10px var(--c3), 0 0 22px rgba(244, 63, 142, 0.38);
}

#curR.h {
  width: 52px;
  height: 52px;
  border-color: rgba(244, 63, 142, 0.45);
}


/* ─── 03. Navigation ─────────────────────────────────────── */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .4s var(--ez);
}

nav.s {
  padding: 1rem 2.5rem;
  background: rgba(2, 2, 12, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--br);
}

.nlogo {
  font-family: var(--fh);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--fg);
  text-decoration: none;
}

.nlogo span {
  color: var(--c1);
  text-shadow: 0 0 18px var(--c1g);
}

.nlinks {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nlinks a {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fgm);
  text-decoration: none;
  transition: color .3s;
  position: relative;
}

.nlinks a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c1);
  box-shadow: 0 0 6px var(--c1);
  transition: width .3s var(--ez);
}

.nlinks a:hover { color: var(--fg); }
.nlinks a:hover::after { width: 100%; }

.ncta {
  padding: .6rem 1.4rem;
  border: 1px solid var(--brh);
  background: transparent;
  color: var(--c1);
  font-family: var(--fb);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: all .3s var(--ez);
  position: relative;
  overflow: hidden;
}

.ncta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c1);
  transform: translateX(-101%);
  transition: transform .3s var(--ez);
  z-index: -1;
}

.ncta:hover { color: var(--bg0); box-shadow: 0 0 22px var(--c1g); }
.ncta:hover::before { transform: translateX(0); }

/* Hamburger button */
.nmbtn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
}

.nmbtn span {
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  transition: all .3s;
  display: block;
}

/* Mobile nav overlay */
#nmob {
  position: fixed;
  inset: 0;
  background: rgba(2, 2, 12, .97);
  backdrop-filter: blur(20px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ez);
}

#nmob.open { opacity: 1; pointer-events: all; }

#nmob a {
  font-family: var(--fh);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fg);
  text-decoration: none;
  transition: color .3s;
}

#nmob a:hover { color: var(--c1); }

.nclose {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--fgm);
  cursor: none;
  transition: color .3s;
}

.nclose:hover { color: var(--c1); }


/* ─── 04. Hero ───────────────────────────────────────────── */

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8rem 2rem 5rem;
}

#hcv {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Ambient glow orbs */
.hg1 {
  position: absolute;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.075) 0%, transparent 70%);
  top: -180px;
  right: -120px;
  pointer-events: none;
  animation: orb 9s ease-in-out infinite;
}

.hg2 {
  position: absolute;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.09) 0%, transparent 70%);
  bottom: -160px;
  left: -100px;
  pointer-events: none;
  animation: orb 11s ease-in-out infinite reverse;
}

.hg3 {
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(244, 63, 142, 0.04) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  pointer-events: none;
  animation: orb3 7s ease-in-out infinite 2s;
}

@keyframes orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(28px, -18px) scale(1.04); }
  66%       { transform: translate(-18px, 14px) scale(.96); }
}

@keyframes orb3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.15); }
}

/* Scanline overlay */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.025) 3px,
    rgba(0, 0, 0, 0.025) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.hcont {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 950px;
}

/* Live indicator badge */
.hbadge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1.1rem;
  border: 1px solid var(--br);
  background: rgba(0, 229, 255, 0.04);
  margin-bottom: 2.5rem;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c1);
  animation: fiu .8s ease both;
}

.hbadge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--c1);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c1);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

.htitle {
  font-family: var(--fh);
  font-size: clamp(2.4rem, 7vw, 5.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .02em;
  margin-bottom: 1.5rem;
  animation: fiu .8s .2s ease both;
}

.htitle .l1 { display: block; color: var(--fg); }
.htitle .l2 { display: block; color: var(--c1); text-shadow: 0 0 40px var(--c1g), 0 0 80px rgba(0, 229, 255, 0.18); position: relative; }

/* Glitch effect */
.glitch { position: relative; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.glitch::before {
  color: var(--c3);
  animation: g1 5s infinite;
  clip-path: inset(0 0 100% 0);
}

.glitch::after {
  color: var(--c2);
  animation: g2 5s infinite;
  clip-path: inset(100% 0 0 0);
}

@keyframes g1 {
  0%, 91%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  92% { clip-path: inset(18% 0 68% 0); transform: translate(-3px, 0); }
  93% { clip-path: inset(62% 0 18% 0); transform: translate(3px, 0); }
  94% { clip-path: inset(38% 0 48% 0); transform: translate(-2px, 1px); }
  95% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

@keyframes g2 {
  0%, 89%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0); }
  90% { clip-path: inset(68% 0 16% 0); transform: translate(3px, 0); }
  91% { clip-path: inset(18% 0 64% 0); transform: translate(-3px, 0); }
  92% { clip-path: inset(100% 0 0 0); transform: translate(0); }
}

.hsub {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  font-weight: 300;
  color: var(--fgd);
  max-width: 560px;
  margin: 0 auto 3rem;
  line-height: 1.75;
  animation: fiu .8s .4s ease both;
}

.hbtns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fiu .8s .6s ease both;
}

/* Buttons */
.btnp {
  padding: .9rem 2rem;
  background: var(--c1);
  color: var(--bg0);
  font-family: var(--fb);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: all .3s var(--ez);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  display: inline-block;
}

.btnp:hover {
  background: var(--fg);
  box-shadow: 0 0 30px var(--c1g), 0 0 60px rgba(0, 229, 255, 0.15);
  transform: translateY(-2px);
}

.btns {
  padding: .9rem 2rem;
  background: transparent;
  color: var(--fg);
  font-family: var(--fb);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  border: 1px solid rgba(236, 240, 255, 0.2);
  transition: all .3s var(--ez);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  display: inline-block;
}

.btns:hover {
  border-color: var(--brh);
  color: var(--c1);
  box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.04);
  transform: translateY(-2px);
}

/* Scroll indicator */
.hscroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--fgm);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: fiu .8s .9s ease both;
  z-index: 2;
}

.hscrollline {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, var(--c1), transparent);
  animation: scrl 2.2s ease-in-out infinite;
}

@keyframes scrl {
  0%   { height: 0; opacity: 1; transform: translateY(0); }
  60%  { height: 42px; opacity: 1; }
  100% { height: 42px; opacity: 0; transform: translateY(18px); }
}


/* ─── 05. Stats Strip ────────────────────────────────────── */

.stats {
  position: relative;
  z-index: 1;
  padding: 2.8rem 2rem;
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
  background: var(--bg1);
}

.statsg {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stati {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.statn {
  font-family: var(--fh);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--c1);
  text-shadow: 0 0 20px var(--c1g);
  line-height: 1;
}

.statl {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fgm);
  margin-top: .3rem;
}


/* ─── 06. Shared Section Utilities ──────────────────────── */

section { position: relative; z-index: 1; }

.si {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.slbl {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c1);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.slbl::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c1);
  box-shadow: 0 0 6px var(--c1);
  flex-shrink: 0;
}

.stit {
  font-family: var(--fh);
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.sdesc {
  font-size: .95rem;
  font-weight: 300;
  color: var(--fgd);
  max-width: 520px;
  line-height: 1.75;
}

.acc { color: var(--c1); }


/* ─── 07. Services ───────────────────────────────────────── */

#services { background: var(--bg1); }

.svh { margin-bottom: 3.5rem; }

.svg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.svc {
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--br);
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ez);
}

.svc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ez);
}

.svc:hover {
  border-color: var(--brh);
  background: rgba(0, 229, 255, 0.025);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 229, 255, 0.04);
}

.svc:hover::before { transform: scaleX(1); }

.svico {
  width: 46px;
  height: 46px;
  margin-bottom: 1.4rem;
  color: var(--c1);
}

.svn {
  font-family: var(--fh);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: .7rem;
}

.svd {
  font-size: .85rem;
  font-weight: 300;
  color: var(--fgd);
  line-height: 1.65;
}


/* ─── 08. Process ────────────────────────────────────────── */

#process { background: var(--bg0); }

.psteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3.5rem;
}

.pstep {
  padding: 2.5rem 2rem;
  border: 1px solid var(--br);
  position: relative;
  transition: all .4s var(--ez);
}

.pstep:not(:last-child) { border-right: none; }

.pstep:hover {
  background: rgba(0, 229, 255, 0.018);
  z-index: 2;
  border-color: var(--brh);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.06);
}

.pnum {
  font-family: var(--fh);
  font-size: 3.8rem;
  font-weight: 900;
  color: rgba(0, 229, 255, 0.07);
  line-height: 1;
  margin-bottom: 1.4rem;
}

.ptit {
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: .7rem;
  color: var(--fg);
}

.pdesc {
  font-size: .85rem;
  font-weight: 300;
  color: var(--fgd);
  line-height: 1.65;
}


/* ─── 09. Pricing ────────────────────────────────────────── */

#pricing { background: var(--bg1); }

.pnote {
  font-size: .82rem;
  color: var(--fgm);
  margin-top: .4rem;
  margin-bottom: 3.5rem;
  padding-left: calc(28px + .75rem);
}

.pcg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pcard {
  padding: 2.5rem 2rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--br);
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ez);
  display: flex;
  flex-direction: column;
}

.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 229, 255, 0.05);
}

/* Featured card */
.pcard.feat {
  border-color: var(--brh);
  background: rgba(0, 229, 255, 0.035);
}

.pcard.feat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

.pcard.feat:hover {
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45), 0 0 50px rgba(0, 229, 255, 0.13);
}

.pbadge {
  display: inline-block;
  padding: .22rem .75rem;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: var(--bg0);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  align-self: flex-start;
}

.pname {
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c1);
  margin-bottom: .5rem;
}

.ptagline {
  font-size: .82rem;
  color: var(--fgd);
  line-height: 1.6;
}

.pprice {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin: 1.5rem 0 .3rem;
}

.pcur { font-family: var(--fh); font-size: 1.2rem; font-weight: 600; color: var(--c1); }
.pamt { font-family: var(--fh); font-size: 3rem; font-weight: 900; color: var(--fg); line-height: 1; }
.pper { font-size: .78rem; color: var(--fgm); margin-left: .2rem; }
.porig { font-size: .78rem; color: var(--fgm); text-decoration: line-through; margin-bottom: .3rem; }

.pdiv {
  height: 1px;
  background: var(--br);
  margin: 1.6rem 0;
}

.pfeats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex-grow: 1;
  margin-bottom: 1.8rem;
}

.pfeats li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .83rem;
  font-weight: 400;
  color: var(--fgd);
  line-height: 1.55;
}

.pfeats li::before {
  content: '→';
  color: var(--c1);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pcta {
  display: block;
  padding: .82rem;
  text-align: center;
  font-family: var(--fb);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  transition: all .3s var(--ez);
  border: 1px solid var(--brh);
  color: var(--c1);
}

.pcta:hover { background: var(--c1); color: var(--bg0); box-shadow: 0 0 22px var(--c1g); }

.pcard.feat .pcta { background: var(--c1); color: var(--bg0); border-color: var(--c1); }
.pcard.feat .pcta:hover { background: var(--fg); border-color: var(--fg); box-shadow: 0 0 30px var(--c1g); }

/* Creation CTA banner */
.cbanner {
  margin-top: 3.5rem;
  padding: 2.8rem;
  border: 1px solid var(--brh);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.035), rgba(139, 92, 246, 0.035));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cbanner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
}

.cbanner h3 {
  font-family: var(--fh);
  font-size: clamp(.95rem, 2.5vw, 1.3rem);
  font-weight: 700;
  margin-bottom: .5rem;
}

.cbanner p {
  font-size: .88rem;
  color: var(--fgd);
  max-width: 440px;
  line-height: 1.65;
}


/* ─── 10. Why Me ─────────────────────────────────────────── */

#why { background: var(--bg0); }

.wyg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  margin-top: 3.5rem;
}

.wyf {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ez), transform .6s var(--ez);
}

.wyf.v { opacity: 1; transform: translateY(0); }

.wyib {
  width: 44px;
  height: 44px;
  border: 1px solid var(--br);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c1);
  background: rgba(0, 229, 255, 0.04);
  transition: all .3s;
}

.wyf:hover .wyib { border-color: var(--brh); box-shadow: 0 0 16px rgba(0, 229, 255, 0.15); }

.wyt {
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: .5rem;
  color: var(--fg);
}

.wyd { font-size: .85rem; font-weight: 300; color: var(--fgd); line-height: 1.65; }


/* ─── 11. Contact ────────────────────────────────────────── */

#contact { background: var(--bg1); }

.cinner {
  max-width: 680px;
  margin: 0 auto;
  padding: 6rem 2rem;
  text-align: center;
}

.cinner .slbl { justify-content: center; }
.cinner .slbl::before { display: none; }
.cinner .sdesc { margin: 0 auto 2.8rem; }

.cform {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.ff { display: flex; flex-direction: column; gap: .45rem; }

.ff label {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fgm);
}

.ff input,
.ff textarea,
.ff select {
  padding: .82rem 1rem;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--br);
  color: var(--fg);
  font-family: var(--fb);
  font-size: .88rem;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.ff input::placeholder,
.ff textarea::placeholder { color: rgba(236, 240, 255, 0.18); }

.ff input:focus,
.ff textarea:focus,
.ff select:focus {
  border-color: var(--brh);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.05), inset 0 0 12px rgba(0, 229, 255, 0.02);
}

.ff select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300e5ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.ff select option { background: var(--bg1); }

.fsub {
  padding: 1rem 2rem;
  background: var(--c1);
  color: var(--bg0);
  font-family: var(--fb);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  cursor: none;
  transition: all .3s var(--ez);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  margin-top: .5rem;
  width: 100%;
}

.fsub:hover {
  background: var(--fg);
  box-shadow: 0 0 30px var(--c1g);
  transform: translateY(-2px);
}


/* ─── 12. Footer ─────────────────────────────────────────── */

footer {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--br);
  background: var(--bg0);
}

.fi {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.flogo {
  font-family: var(--fh);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--fg);
  text-decoration: none;
}

.flogo span { color: var(--c1); }

.fcopy { font-size: .72rem; color: var(--fgm); letter-spacing: .05em; }

.flinks { display: flex; gap: 1.5rem; list-style: none; }

.flinks a {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fgm);
  text-decoration: none;
  transition: color .3s;
}

.flinks a:hover { color: var(--c1); }


/* ─── 13. Scroll Animations ──────────────────────────────── */

@keyframes fiu {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ez), transform .7s var(--ez);
}

.rv.v { opacity: 1; transform: translateY(0); }

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }


/* ─── 15. Portfolio ──────────────────────────────────────── */

#portfolio { background: var(--bg0); }

.portg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.portcard {
  border: 1px solid var(--br);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  transition: all .4s var(--ez);
}

.portcard:hover {
  border-color: var(--brh);
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 229, 255, 0.05);
}

/* Browser chrome bar */
.port-screen { height: 200px; overflow: hidden; }

.port-bar {
  height: 26px;
  background: #0e0e1c;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  gap: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.port-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.port-url {
  margin-left: .4rem;
  height: 13px;
  max-width: 155px;
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: .52rem;
  color: rgba(255, 255, 255, 0.22);
  font-family: var(--fb);
  display: flex;
  align-items: center;
  padding: 0 .6rem;
}

/* CSS mock website */
.port-mock {
  height: 174px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mk-nav {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  gap: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.mk-logo {
  width: 40px; height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.mk-navlinks { display: flex; gap: .35rem; flex: 1; }

.mk-navlinks span {
  width: 20px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  display: block;
}

.mk-cta {
  width: 32px; height: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.mk-hero {
  padding: .65rem .75rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
}

.mk-h1 { height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); width: 52%; }
.mk-h2 { height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); width: 36%; }
.mk-hbtn { height: 13px; border-radius: 2px; width: 42px; margin-top: .1rem; background: rgba(255, 255, 255, 0.25); }

.mk-grid { display: flex; gap: .4rem; padding: .4rem .75rem; flex: 1; }

.mk-card {
  flex: 1;
  min-height: 36px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Per-project themes */
.pm1 { background: linear-gradient(160deg, #120a00, #1e1000); }
.pm1 .mk-nav { background: rgba(245, 158, 11, 0.07); border-bottom-color: rgba(245, 158, 11, 0.1); }
.pm1 .mk-logo { background: #f59e0b; }
.pm1 .mk-cta, .pm1 .mk-hbtn { background: rgba(245, 158, 11, 0.55); }
.pm1 .mk-hero { background: linear-gradient(180deg, rgba(245, 158, 11, 0.05), transparent); }

.pm2 { background: linear-gradient(160deg, #0d0015, #180020); }
.pm2 .mk-nav { background: rgba(167, 139, 250, 0.07); border-bottom-color: rgba(167, 139, 250, 0.1); }
.pm2 .mk-logo { background: #a78bfa; }
.pm2 .mk-cta, .pm2 .mk-hbtn { background: rgba(167, 139, 250, 0.5); }
.pm2 .mk-hero { background: linear-gradient(180deg, rgba(167, 139, 250, 0.05), transparent); }

.pm3 { background: linear-gradient(160deg, #001215, #001e25); }
.pm3 .mk-nav { background: rgba(0, 229, 255, 0.06); border-bottom-color: rgba(0, 229, 255, 0.1); }
.pm3 .mk-logo { background: #00e5ff; }
.pm3 .mk-cta, .pm3 .mk-hbtn { background: rgba(0, 229, 255, 0.45); }
.pm3 .mk-hero { background: linear-gradient(180deg, rgba(0, 229, 255, 0.05), transparent); }

.pm4 { background: linear-gradient(160deg, #150010, #200018); }
.pm4 .mk-nav { background: rgba(244, 63, 142, 0.07); border-bottom-color: rgba(244, 63, 142, 0.1); }
.pm4 .mk-logo { background: #f43f8e; }
.pm4 .mk-cta, .pm4 .mk-hbtn { background: rgba(244, 63, 142, 0.5); }
.pm4 .mk-hero { background: linear-gradient(180deg, rgba(244, 63, 142, 0.05), transparent); }

/* Card info */
.port-info { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }

.port-badge {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .18rem .65rem;
  border: 1px solid currentColor;
  align-self: flex-start;
  opacity: .8;
}

.port-name { font-family: var(--fh); font-size: .88rem; font-weight: 600; letter-spacing: .05em; }
.port-desc { font-size: .8rem; font-weight: 300; color: var(--fgd); line-height: 1.6; }


/* ─── 16. Testimonials ───────────────────────────────────── */

#testimonials { background: var(--bg1); }

.testg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.testcard {
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--br);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ez);
}

.testcard::before {
  content: '"';
  position: absolute;
  top: -1rem;
  right: 1.5rem;
  font-family: Georgia, serif;
  font-size: 6rem;
  color: rgba(0, 229, 255, 0.06);
  line-height: 1;
  pointer-events: none;
}

.testcard:hover {
  border-color: var(--brh);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.04);
}

.test-stars { display: flex; gap: .25rem; }
.test-star { color: #f59e0b; font-size: .9rem; }
.test-quote { font-size: .87rem; font-weight: 300; color: var(--fgd); line-height: 1.8; font-style: italic; flex: 1; }

.test-author {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--br);
}

.test-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c1d);
  border: 1px solid var(--brh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 700;
  color: var(--c1);
  flex-shrink: 0;
}

.test-name { font-family: var(--fh); font-size: .72rem; font-weight: 600; letter-spacing: .05em; margin-bottom: .2rem; }
.test-role { font-size: .72rem; font-weight: 300; color: var(--fgm); }


/* ─── 17. About ──────────────────────────────────────────── */

#about { background: var(--bg0); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: center;
  margin-top: 3.5rem;
}

.about-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-avatar {
  width: 220px;
  height: 220px;
  border: 1px solid var(--brh);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(0, 229, 255, 0.03);
}

.about-avatar::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid var(--br);
  pointer-events: none;
}

.about-avatar::after {
  content: '';
  position: absolute;
  inset: -24px;
  border: 1px solid rgba(0, 229, 255, 0.05);
  pointer-events: none;
}

.about-glow {
  position: absolute;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.about-initial {
  font-family: var(--fh);
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--c1);
  text-shadow: 0 0 40px var(--c1g), 0 0 80px rgba(0, 229, 255, 0.15);
  line-height: 1;
  user-select: none;
}

.about-tag {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .28rem .9rem;
  background: var(--bg0);
  border: 1px solid var(--brh);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c1);
}

.about-name {
  font-family: var(--fh);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: .3rem;
  line-height: 1.1;
}

.about-name span { color: var(--c1); }

.about-role {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fgm);
  margin-bottom: 1.8rem;
}

.about-bio {
  font-size: .92rem;
  font-weight: 300;
  color: var(--fgd);
  line-height: 1.85;
  margin-bottom: 2rem;
}

.about-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }

.about-stat { display: flex; flex-direction: column; gap: .2rem; }

.about-stat-n {
  font-family: var(--fh);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c1);
  text-shadow: 0 0 15px var(--c1g);
  line-height: 1;
}

.about-stat-l {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fgm);
}


/* ─── Pricing banner — starting price ────────────────────── */

.cbprice {
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--fgd);
}

.cbprice strong {
  font-family: var(--fh);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c1);
  text-shadow: 0 0 15px var(--c1g);
}


/* ─── Legal pages ─────────────────────────────────────────── */

.legal-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fgm);
  text-decoration: none;
  transition: color .3s;
  margin-bottom: 3rem;
}

.legal-back:hover { color: var(--c1); }

.legal-wrap h1 {
  font-family: var(--fh);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--c1);
  letter-spacing: .02em;
  margin-bottom: .5rem;
}

.legal-date {
  font-size: .72rem;
  color: var(--fgm);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--br);
  display: block;
}

.legal-wrap h2 {
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--fg);
  margin: 2.5rem 0 .75rem;
}

.legal-wrap p {
  font-size: .9rem;
  font-weight: 300;
  color: var(--fgd);
  line-height: 1.85;
  margin-bottom: .75rem;
}

.legal-wrap a { color: var(--c1); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }


/* ─── Footer legal row ────────────────────────────────────── */

.fi-legal {
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--br);
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.fi-legal a {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fgm);
  text-decoration: none;
  transition: color .3s;
}

.fi-legal a:hover { color: var(--c1); }


/* ─── 14. Responsive ─────────────────────────────────────── */

@media (max-width: 960px) {
  .nlinks, .ncta { display: none; }
  .nmbtn { display: flex; }
  .pcg { grid-template-columns: 1fr; }
  .psteps { grid-template-columns: 1fr; }
  .pstep:not(:last-child) { border-right: 1px solid var(--br); border-bottom: none; }
  .wyg { grid-template-columns: 1fr; gap: 2rem; }
  .portg { grid-template-columns: 1fr; }
  .testg { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 700px) {
  .svg { grid-template-columns: 1fr; }
  .statsg { grid-template-columns: repeat(2, 1fr); }
  .frow { grid-template-columns: 1fr; }
  .cbanner { flex-direction: column; }
}