@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#081a33;
  --bg2:#061428;

  --panel: rgba(15,42,85,0.50);
  --panel2: rgba(15,42,85,0.28);
  --border: rgba(255,255,255,0.10);

  --purple:#b14cff;
  --purple-soft:#7c3cff;

  --text:#ffffff;
  --muted: rgba(255,255,255,0.72);

  --radius:20px;
  --shadow: 0 18px 46px rgba(0,0,0,0.35);
  --shadow-soft: 0 12px 32px rgba(0,0,0,0.22);
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#081a33;
  --bg2:#061428;

  --panel: rgba(15,42,85,0.50);
  --panel2: rgba(15,42,85,0.28);
  --border: rgba(255,255,255,0.10);

  --purple:#b14cff;
  --purple-soft:#7c3cff;

  --text:#ffffff;
  --muted: rgba(255,255,255,0.72);

  --radius:20px;
  --shadow: 0 18px 46px rgba(0,0,0,0.35);
  --shadow-soft: 0 12px 32px rgba(0,0,0,0.22);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  background:var(--bg2);
}
@supports not (overflow-x:clip){ html,body{overflow-x:hidden;} }

body{
  margin:0;
  font-family:'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  line-height:1.55;
  overscroll-behavior-x:none;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(177,76,255,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(124,60,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

@media (max-width:768px){ body{touch-action: pan-y;} }

img,svg{max-width:100%;display:block;}
a{color:inherit;}

.hidden{display:none !important;}

.container{padding:84px 8%;}
.section-title{
  font-size:clamp(2.0rem, 3.2vw, 2.6rem);
  letter-spacing:-0.03em;
  margin:0 0 14px;
}
.section-kicker{
  color:var(--muted);
  margin:0 0 34px;
  max-width:72ch;
  font-size:1.05rem;
}
.small-muted{
  color: rgba(255,255,255,0.65);
  font-size:0.95rem;
  line-height:1.6;
}

/* subtle grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size:120px 120px;
}

/* =========================
   NAV
========================= */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 40px;
  min-height:150px;
  position:relative;
  z-index:50;
}
.nav-brand a{display:inline-flex;align-items:center;text-decoration:none;}
.nav-brand img{
  height:120px;
  width:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  animation: logoIn 500ms ease both, logoFloat 6s ease-in-out 800ms infinite;
  transition: transform 240ms ease, filter 240ms ease;
  transform-origin:left center;
}
.nav-brand a:hover img{
  transform: translateY(-3px) scale(1.01);
  filter: drop-shadow(0 16px 36px rgba(177,76,255,0.45));
}

.nav-links{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  position:relative;
  opacity:0.95;
  padding:8px 0;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-10px;
  width:0;
  height:3px;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  border-radius:999px;
  transition: width .28s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a.active::after{width:100%;}

.burger{
  display:none;
  flex-direction:column;
  gap:7px;
  cursor:pointer;
  padding:10px;
  border-radius:12px;
}
.burger span{
  width:32px;
  height:4px;
  background:white;
  transition:.3s;
}
.burger.open span:nth-child(1){transform: rotate(45deg) translate(8px,8px);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform: rotate(-45deg) translate(8px,-8px);}

/* =========================
   PAGE HEADER
========================= */
.page-header{padding:14px 8% 0;}
.page-header-inner{
  padding:32px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.55), rgba(15,42,85,0.28));
  box-shadow: var(--shadow-soft);
}
.page-header h1{
  margin:0 0 8px;
  letter-spacing:-0.03em;
  font-size:clamp(2.0rem, 3.8vw, 3rem);
}
.page-header p{margin:0;color:var(--muted);max-width:80ch;}

/* =========================
   BUTTONS
========================= */
.btn{
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  border:none;
  color:white;
  padding:14px 34px;
  border-radius:999px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(177,76,255,0.35);
  filter:saturate(1.04);
}
.btn:active{transform:translateY(0);}
.btn-outline{
  background:transparent;
  border:1px solid rgba(177,76,255,0.55);
  color:white;
}
.btn-outline:hover{box-shadow:0 16px 44px rgba(177,76,255,0.20);}

/* =========================
   CARDS / GRIDS
========================= */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(177,76,255,0.22);
}
.card h3{
  margin:10px 0 8px;
  font-size:1.25rem;
  letter-spacing:-0.02em;
}
.card p{margin:0;color:var(--muted);}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

.icon{
  width:44px;height:44px;
  border-radius:14px;
  background: rgba(177,76,255,0.18);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}

/* =========================
   HOME EXTRAS
========================= */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.80);
  font-weight:700;
  margin-bottom:14px;
}

.hero{padding:0 8% 86px;}
.hero-inner{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:28px;
  align-items:start;
  padding:44px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.58), rgba(15,42,85,0.26));
  box-shadow: var(--shadow);
}
.hero h1{
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  letter-spacing:-0.04em;
  margin:0 0 10px;
}
.hero p{
  color:var(--muted);
  margin:0 0 18px;
  max-width:72ch;
  font-size:1.12rem;
}
.motto{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(177,76,255,0.28);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.90);
  font-weight:700;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}

.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  font-weight:700;
  color: rgba(255,255,255,0.86);
}

.hero-aside{display:grid;gap:14px;}
.metric-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.14);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-soft);
}
.metric-title{font-weight:900;letter-spacing:-0.02em;}
.metric-list{display:grid;gap:10px;margin-top:12px;}
.metric{display:flex;align-items:center;gap:10px;color: rgba(255,255,255,0.86);font-weight:700;}
.metric-cta{margin-top:14px;}
.mini-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.10);
  border-radius: var(--radius);
  padding:18px;
}

.split{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:22px;
  align-items:start;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}

.panel{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.45), rgba(15,42,85,0.18));
  box-shadow: var(--shadow-soft);
  padding:24px;
}
.panel-head{margin-bottom:14px;}
.steps{display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:14px;}
.step{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  border-radius: 18px;
  padding:16px;
  display:flex;
  gap:12px;
}
.step-num{
  width:34px;height:34px;border-radius:12px;
  background: rgba(177,76,255,0.16);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}
.step-body strong{display:block;letter-spacing:-0.01em;}
.step-body p{margin:6px 0 0;}

.final-cta{
  border:1px solid rgba(177,76,255,0.28);
  background: rgba(177,76,255,0.10);
  border-radius: var(--radius);
  padding:22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}
.final-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* =========================
   WORK PAGE (tags/filters)
========================= */
#portfolio-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:22px;
}
#portfolio-grid .card img{
  width:100%;
  border-radius:16px;
  margin-bottom:12px;
}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.tag-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(177,76,255,0.30);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.90);
  font-weight:700;
  font-size:0.9rem;
}

.desc{margin-top:0;color: rgba(255,255,255,0.72);line-height:1.65;}
.desc.clamp{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.read-more{
  margin-top:10px;
  background:transparent;
  border:0;
  padding:0;
  font-weight:900;
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.read-more:hover{color:white;text-decoration:underline;}

.filter-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.filter-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.filter-search{width:min(360px, 74vw);margin-bottom:0;}

.tag-filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px;}
.tag-chip{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.88);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.tag-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(177,76,255,0.35);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}
.tag-chip.active{
  border-color: rgba(177,76,255,0.55);
  background: rgba(177,76,255,0.14);
}

.active-filters{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  border-radius:18px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.active-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.active-label{color: rgba(255,255,255,0.72);font-weight:900;}
.active-chips{display:flex;gap:10px;flex-wrap:wrap;}
.active-chip{
  border:1px solid rgba(177,76,255,0.30);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.92);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.active-chip .x{margin-left:8px;opacity:0.9;}
.active-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(177,76,255,0.55);
  box-shadow: 0 12px 26px rgba(177,76,255,0.18);
}
.results-count{color: rgba(255,255,255,0.70);font-weight:900;}

/* Admin */
.admin-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.admin-actions button{
  border:none;
  padding:10px 14px;
  border-radius:999px;
  color:white;
  font-weight:900;
  cursor:pointer;
  background: rgba(255,76,76,0.95);
  box-shadow: 0 10px 20px rgba(0,0,0,0.20);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.admin-actions button.btn{
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
}
.admin-actions button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.30);
}

/* =========================
   PRICES (cards)
========================= */
.price-hero{
  margin-bottom:18px;
}
.price-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.price-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.price-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.price-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.price-icon{
  width:44px;height:44px;border-radius:14px;
  background: rgba(177,76,255,0.18);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}
.price-title strong{
  display:block;
  font-size:1.15rem;
  letter-spacing:-0.02em;
}
.price-title span{
  display:block;
  color: rgba(255,255,255,0.70);
  font-weight:700;
  font-size:0.95rem;
}

.rate-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.rate{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:14px;
  background: rgba(0,0,0,0.10);
}
.rate .label{font-weight:900;color: rgba(255,255,255,0.85);}
.rate .amount{font-size:1.6rem;font-weight:900;letter-spacing:-0.02em;margin-top:6px;}
.rate .note{margin-top:4px;color: rgba(255,255,255,0.65);font-weight:700;font-size:0.95rem;}

.price-actions{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;}

/* =========================
   FORMS + MODAL
========================= */
input,textarea{
  width:100%;
  padding:14px;
  margin-bottom:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color:white;
  font-family:inherit;
  font-size:1rem;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus{
  border-color: rgba(177,76,255,0.55);
  box-shadow: 0 0 0 4px rgba(177,76,255,0.12);
}
textarea{min-height:140px;resize:vertical;}

.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal-content{
  width:min(380px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(8,26,51,0.96);
  box-shadow: var(--shadow);
  padding:26px;
  animation: fadeIn 220ms ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* =========================
   FOOTER
========================= */
.footer{padding:40px 8% 54px;margin-top:10px;}
.footer-inner{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.45), rgba(15,42,85,0.20));
  box-shadow: var(--shadow-soft);
  padding:24px;
  display:grid;
  gap:14px;
}
.footer-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-brand{display:flex;flex-direction:column;gap:6px;}
.footer-brand strong{letter-spacing:-0.02em;font-size:1.15rem;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-links a{text-decoration:none;color: rgba(255,255,255,0.82);}
.footer-links a:hover{color:white;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.65);
  font-size:0.95rem;
}

/* =========================
   REVEAL
========================= */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.show{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:80ms;}
.reveal-delay-2{transition-delay:160ms;}
.reveal-delay-3{transition-delay:240ms;}

/* =========================
   ANIMS
========================= */
@keyframes logoIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;padding:28px;gap:18px;}
  .grid-3{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .price-list{grid-template-columns: repeat(2, minmax(0,1fr));}
}

@media (max-width: 768px){
  .container{padding:64px 6%;}
  .hero{padding:0 6% 64px;}
  .page-header{padding:10px 6% 0;}
  .footer{padding:34px 6% 46px;}

  .burger{display:flex;}

  .navbar{min-height:92px;padding:14px 16px;}
  .nav-brand img{height:56px;}

  .nav-links{
    position:absolute;
    top:92px;
    right:16px;
    width:240px;
    max-width:calc(100vw - 32px);
    flex-direction:column;
    gap:12px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:18px;
    background: rgba(8,26,51,0.98);
    box-shadow: var(--shadow);
    opacity:0;
    transform: translateY(-10px) scale(0.98);
    pointer-events:none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index:60;
  }
  .nav-links.open{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }
  .nav-links a{padding:6px 0;}
  .nav-links a::after{display:none;}

  .hero-cta .btn{width:100%;}
  .trust-pill{width:100%;}
  .price-list{grid-template-columns:1fr;}
  .rate-grid{grid-template-columns:1fr;}
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  background:var(--bg2);
}
@supports not (overflow-x:clip){ html,body{overflow-x:hidden;} }

body{
  margin:0;
  font-family:'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  line-height:1.55;
  overscroll-behavior-x:none;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(177,76,255,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(124,60,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

@media (max-width:768px){ body{touch-action: pan-y;} }

img,svg{max-width:100%;display:block;}
a{color:inherit;}

.hidden{display:none !important;}

.container{padding:84px 8%;}
.section-title{
  font-size:clamp(2.0rem, 3.2vw, 2.6rem);
  letter-spacing:-0.03em;
  margin:0 0 14px;
}
.section-kicker{
  color:var(--muted);
  margin:0 0 34px;
  max-width:72ch;
  font-size:1.05rem;
}
.small-muted{
  color: rgba(255,255,255,0.65);
  font-size:0.95rem;
  line-height:1.6;
}

/* subtle grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size:120px 120px;
}

/* =========================
   NAV
========================= */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 40px;
  min-height:150px;
  position:relative;
  z-index:50;
}
.nav-brand a{display:inline-flex;align-items:center;text-decoration:none;}
.nav-brand img{
  height:120px;
  width:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  animation: logoIn 500ms ease both, logoFloat 6s ease-in-out 800ms infinite;
  transition: transform 240ms ease, filter 240ms ease;
  transform-origin:left center;
}
.nav-brand a:hover img{
  transform: translateY(-3px) scale(1.01);
  filter: drop-shadow(0 16px 36px rgba(177,76,255,0.45));
}

.nav-links{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  position:relative;
  opacity:0.95;
  padding:8px 0;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-10px;
  width:0;
  height:3px;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  border-radius:999px;
  transition: width .28s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a.active::after{width:100%;}

.burger{
  display:none;
  flex-direction:column;
  gap:7px;
  cursor:pointer;
  padding:10px;
  border-radius:12px;
}
.burger span{
  width:32px;
  height:4px;
  background:white;
  transition:.3s;
}
.burger.open span:nth-child(1){transform: rotate(45deg) translate(8px,8px);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform: rotate(-45deg) translate(8px,-8px);}

/* =========================
   PAGE HEADER
========================= */
.page-header{padding:14px 8% 0;}
.page-header-inner{
  padding:32px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.55), rgba(15,42,85,0.28));
  box-shadow: var(--shadow-soft);
}
.page-header h1{
  margin:0 0 8px;
  letter-spacing:-0.03em;
  font-size:clamp(2.0rem, 3.8vw, 3rem);
}
.page-header p{margin:0;color:var(--muted);max-width:80ch;}

/* =========================
   BUTTONS
========================= */
.btn{
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  border:none;
  color:white;
  padding:14px 34px;
  border-radius:999px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(177,76,255,0.35);
  filter:saturate(1.04);
}
.btn:active{transform:translateY(0);}
.btn-outline{
  background:transparent;
  border:1px solid rgba(177,76,255,0.55);
  color:white;
}
.btn-outline:hover{box-shadow:0 16px 44px rgba(177,76,255,0.20);}

/* =========================
   CARDS / GRIDS
========================= */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(177,76,255,0.22);
}
.card h3{
  margin:10px 0 8px;
  font-size:1.25rem;
  letter-spacing:-0.02em;
}
.card p{margin:0;color:var(--muted);}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

.icon{
  width:44px;height:44px;
  border-radius:14px;
  background: rgba(177,76,255,0.18);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}

/* =========================
   HOME EXTRAS
========================= */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.80);
  font-weight:700;
  margin-bottom:14px;
}

.hero{padding:0 8% 86px;}
.hero-inner{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:28px;
  align-items:start;
  padding:44px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.58), rgba(15,42,85,0.26));
  box-shadow: var(--shadow);
}
.hero h1{
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  letter-spacing:-0.04em;
  margin:0 0 10px;
}
.hero p{
  color:var(--muted);
  margin:0 0 18px;
  max-width:72ch;
  font-size:1.12rem;
}
.motto{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(177,76,255,0.28);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.90);
  font-weight:700;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}

.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  font-weight:700;
  color: rgba(255,255,255,0.86);
}

.hero-aside{display:grid;gap:14px;}
.metric-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.14);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-soft);
}
.metric-title{font-weight:900;letter-spacing:-0.02em;}
.metric-list{display:grid;gap:10px;margin-top:12px;}
.metric{display:flex;align-items:center;gap:10px;color: rgba(255,255,255,0.86);font-weight:700;}
.metric-cta{margin-top:14px;}
.mini-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.10);
  border-radius: var(--radius);
  padding:18px;
}

.split{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:22px;
  align-items:start;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}

.panel{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.45), rgba(15,42,85,0.18));
  box-shadow: var(--shadow-soft);
  padding:24px;
}
.panel-head{margin-bottom:14px;}
.steps{display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:14px;}
.step{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  border-radius: 18px;
  padding:16px;
  display:flex;
  gap:12px;
}
.step-num{
  width:34px;height:34px;border-radius:12px;
  background: rgba(177,76,255,0.16);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}
.step-body strong{display:block;letter-spacing:-0.01em;}
.step-body p{margin:6px 0 0;}

.final-cta{
  border:1px solid rgba(177,76,255,0.28);
  background: rgba(177,76,255,0.10);
  border-radius: var(--radius);
  padding:22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}
.final-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* =========================
   WORK PAGE (tags/filters)
========================= */
#portfolio-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:22px;
}
#portfolio-grid .card img{
  width:100%;
  border-radius:16px;
  margin-bottom:12px;
}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.tag-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(177,76,255,0.30);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.90);
  font-weight:700;
  font-size:0.9rem;
}

.desc{margin-top:0;color: rgba(255,255,255,0.72);line-height:1.65;}
.desc.clamp{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.read-more{
  margin-top:10px;
  background:transparent;
  border:0;
  padding:0;
  font-weight:900;
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.read-more:hover{color:white;text-decoration:underline;}

.filter-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.filter-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.filter-search{width:min(360px, 74vw);margin-bottom:0;}

.tag-filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px;}
.tag-chip{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.88);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.tag-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(177,76,255,0.35);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}
.tag-chip.active{
  border-color: rgba(177,76,255,0.55);
  background: rgba(177,76,255,0.14);
}

.active-filters{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  border-radius:18px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.active-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.active-label{color: rgba(255,255,255,0.72);font-weight:900;}
.active-chips{display:flex;gap:10px;flex-wrap:wrap;}
.active-chip{
  border:1px solid rgba(177,76,255,0.30);
  background: rgba(177,76,255,0.12);
  color: rgba(255,255,255,0.92);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.active-chip .x{margin-left:8px;opacity:0.9;}
.active-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(177,76,255,0.55);
  box-shadow: 0 12px 26px rgba(177,76,255,0.18);
}
.results-count{color: rgba(255,255,255,0.70);font-weight:900;}

/* Admin */
.admin-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.admin-actions button{
  border:none;
  padding:10px 14px;
  border-radius:999px;
  color:white;
  font-weight:900;
  cursor:pointer;
  background: rgba(255,76,76,0.95);
  box-shadow: 0 10px 20px rgba(0,0,0,0.20);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.admin-actions button.btn{
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
}
.admin-actions button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.30);
}

/* =========================
   PRICES (cards)
========================= */
.price-hero{
  margin-bottom:18px;
}
.price-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.price-card{
  border:1px solid var(--border);
  background: rgba(0,0,0,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.price-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.price-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.price-icon{
  width:44px;height:44px;border-radius:14px;
  background: rgba(177,76,255,0.18);
  border:1px solid rgba(177,76,255,0.28);
  display:grid;place-items:center;
  font-weight:900;
}
.price-title strong{
  display:block;
  font-size:1.15rem;
  letter-spacing:-0.02em;
}
.price-title span{
  display:block;
  color: rgba(255,255,255,0.70);
  font-weight:700;
  font-size:0.95rem;
}

.rate-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.rate{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:14px;
  background: rgba(0,0,0,0.10);
}
.rate .label{font-weight:900;color: rgba(255,255,255,0.85);}
.rate .amount{font-size:1.6rem;font-weight:900;letter-spacing:-0.02em;margin-top:6px;}
.rate .note{margin-top:4px;color: rgba(255,255,255,0.65);font-weight:700;font-size:0.95rem;}

.price-actions{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;}

/* =========================
   FORMS + MODAL
========================= */
input,textarea{
  width:100%;
  padding:14px;
  margin-bottom:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color:white;
  font-family:inherit;
  font-size:1rem;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus{
  border-color: rgba(177,76,255,0.55);
  box-shadow: 0 0 0 4px rgba(177,76,255,0.12);
}
textarea{min-height:140px;resize:vertical;}

.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal-content{
  width:min(380px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(8,26,51,0.96);
  box-shadow: var(--shadow);
  padding:26px;
  animation: fadeIn 220ms ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* =========================
   FOOTER
========================= */
.footer{padding:40px 8% 54px;margin-top:10px;}
.footer-inner{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,42,85,0.45), rgba(15,42,85,0.20));
  box-shadow: var(--shadow-soft);
  padding:24px;
  display:grid;
  gap:14px;
}
.footer-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-brand{display:flex;flex-direction:column;gap:6px;}
.footer-brand strong{letter-spacing:-0.02em;font-size:1.15rem;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-links a{text-decoration:none;color: rgba(255,255,255,0.82);}
.footer-links a:hover{color:white;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.65);
  font-size:0.95rem;
}

/* =========================
   REVEAL
========================= */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.show{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:80ms;}
.reveal-delay-2{transition-delay:160ms;}
.reveal-delay-3{transition-delay:240ms;}

/* =========================
   ANIMS
========================= */
@keyframes logoIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;padding:28px;gap:18px;}
  .grid-3{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .price-list{grid-template-columns: repeat(2, minmax(0,1fr));}
}

@media (max-width: 768px){
  .container{padding:64px 6%;}
  .hero{padding:0 6% 64px;}
  .page-header{padding:10px 6% 0;}
  .footer{padding:34px 6% 46px;}

  .burger{display:flex;}

  .navbar{min-height:92px;padding:14px 16px;}
  .nav-brand img{height:56px;}

  .nav-links{
    position:absolute;
    top:92px;
    right:16px;
    width:240px;
    max-width:calc(100vw - 32px);
    flex-direction:column;
    gap:12px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:18px;
    background: rgba(8,26,51,0.98);
    box-shadow: var(--shadow);
    opacity:0;
    transform: translateY(-10px) scale(0.98);
    pointer-events:none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index:60;
  }
  .nav-links.open{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }
  .nav-links a{padding:6px 0;}
  .nav-links a::after{display:none;}

  .hero-cta .btn{width:100%;}
  .trust-pill{width:100%;}
  .price-list{grid-template-columns:1fr;}
  .rate-grid{grid-template-columns:1fr;}
}