/* ==========================================================================
   TINGER DIGITAL — Design System
   Palette:  --ink #0A0912 · --violet #881BCC · --violet-2 #B24DE8
             --signal #17E6C0 · --paper #F6F3FC · --mist #9C93B3
   Type:     Display "Space Grotesk" / Body "Inter" / Mono "JetBrains Mono"
   Signature: the "pulse line" — an animated signal waveform that threads
              through the hero, section dividers and hover states, standing
              in for the idea of a message travelling from brand to audience.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink: #0A0912;
  --ink-soft: #14111F;
  --panel: #17131F;
  --violet: #881BCC;
  --violet-2: #B24DE8;
  --violet-dim: #3A1A55;
  --signal: #17E6C0;
  --paper: #F6F3FC;
  --paper-dim: #E9E3F5;
  --mist: #9C93B3;
  --mist-dark: #6E6584;
  --white: #FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

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

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:120px 0; position:relative; }
@media (max-width:900px){ .section{ padding:80px 0; } }
@media (max-width:560px){ .section{ padding:64px 0; } }

.section-light{ background:var(--paper); color:var(--ink); }
.section-light .eyebrow{ color:var(--violet); }
.section-light .mist-text{ color:var(--mist-dark); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 5.6vw, 5rem); font-weight:700; }
h2{ font-size:clamp(2rem, 4vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); }
p{ margin:0; line-height:1.7; color:var(--mist); }
.section-light p{ color:var(--mist-dark); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--signal);
}

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head p{ margin-top:16px; font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--violet), var(--violet-2));
  color:var(--white);
  box-shadow:0 8px 24px -8px rgba(136,27,204,0.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(136,27,204,0.85); }
.btn-ghost{
  background:transparent;
  border-color:rgba(246,243,252,0.22);
  color:var(--paper);
}
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }
.section-light .btn-ghost{ border-color:rgba(10,9,18,0.18); color:var(--ink); }
.section-light .btn-ghost:hover{ border-color:var(--violet); color:var(--violet); }
.btn-arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(10,9,18,0.82);
  backdrop-filter:blur(14px);
  padding:14px 0;
  border-color:rgba(255,255,255,0.06);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--white); }
.logo-mark{ width:34px; height:34px; flex-shrink:0; }
.logo-word-accent{ color:var(--signal); }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:0.94rem; font-weight:500; color:var(--mist);
  position:relative; padding:4px 0;
  transition:color .25s;
}
.nav-links a:hover, .nav-links a.is-active{ color:var(--white); }
.nav-links a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--signal); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:1100;
}
.nav-toggle span{ width:24px; height:2px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:920px){
  .nav-links{
    position:fixed; inset:0 0 0 30%; top:0;
    background:var(--ink-soft);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:28px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    border-left:1px solid rgba(255,255,255,0.08);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.4rem; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:140px; padding-bottom:80px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(136,27,204,0.45), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(23,230,192,0.14), transparent 60%),
    var(--ink);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 900px 600px at 70% 20%, black, transparent 75%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center; }
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; } }

.hero h1{ color:var(--white); }
.hero h1 em{ font-style:normal; color:var(--signal); }
.hero-sub{ margin-top:24px; font-size:1.15rem; max-width:520px; }
.hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }

.hero-tags{ margin-top:44px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-tag{
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.04em;
  padding:8px 14px; border:1px solid rgba(255,255,255,0.14); border-radius:100px;
  color:var(--mist);
}

/* Pulse waveform visual — the signature element */
.pulse-visual{ position:relative; }
.pulse-card{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  backdrop-filter:blur(6px);
  padding:32px 28px 28px;
}
.pulse-card-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:0.75rem; color:var(--mist); margin-bottom:22px; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 12px var(--signal); }
.pulse-line-svg{ width:100%; height:auto; overflow:visible; }
.pulse-path{
  fill:none; stroke:url(#pulseGradient); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:6 1400; stroke-dashoffset:0;
  animation:pulseTravel 4.5s linear infinite;
}
@keyframes pulseTravel{
  0%{ stroke-dasharray:6 1400; stroke-dashoffset:0; }
  60%{ stroke-dasharray:220 1400; stroke-dashoffset:-500; }
  100%{ stroke-dasharray:6 1400; stroke-dashoffset:-1400; }
}
.pulse-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.pulse-stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--white); }
.pulse-stat span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--mist); text-transform:uppercase; letter-spacing:0.06em; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.7rem; color:var(--mist); letter-spacing:0.1em;
  z-index:2;
}
.scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--signal), transparent); animation:scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

/* ---------- Divider / signal rule ---------- */
.signal-divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(23,230,192,0.5), transparent); }

/* ---------- Marquee strip ---------- */
.marquee-strip{ background:var(--panel); padding:22px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); }
.marquee-track{ display:flex; gap:64px; white-space:nowrap; animation:marquee 26s linear infinite; width:max-content; }
.marquee-track span{ font-family:var(--font-mono); font-size:0.85rem; color:var(--mist-dark); letter-spacing:0.05em; }
.marquee-track span b{ color:var(--signal); font-weight:500; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Cards: services ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:980px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; } }

.service-card{
  position:relative;
  padding:34px 28px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.07);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); border-color:rgba(178,77,232,0.5); background:linear-gradient(160deg, rgba(136,27,204,0.14), var(--panel)); }
.service-card .num{ font-family:var(--font-mono); font-size:0.78rem; color:var(--signal); }
.service-card .icon{ width:44px; height:44px; margin:18px 0 20px; color:var(--violet-2); }
.service-card h3{ color:var(--white); margin-bottom:10px; }
.service-card p{ font-size:0.95rem; }
.service-card a.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:0.85rem; font-weight:600; color:var(--signal); }

/* ---------- Portfolio ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filter-btn{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.03em;
  padding:10px 18px; border-radius:100px; border:1px solid rgba(255,255,255,0.14);
  background:transparent; color:var(--mist);
  transition:all .25s var(--ease);
}
.filter-btn:hover{ color:var(--white); border-color:rgba(255,255,255,0.3); }
.filter-btn.is-active{ background:var(--violet); border-color:var(--violet); color:var(--white); }

.work-card{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:var(--panel); transition:transform .4s var(--ease); }
.work-card:hover{ transform:translateY(-6px); }
.work-thumb{
  aspect-ratio:4/3; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.work-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35)); }
.work-thumb-mono{ font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:rgba(255,255,255,0.85); position:relative; z-index:1; letter-spacing:-0.02em; }
.work-body{ padding:22px 22px 26px; }
.work-tag{ font-family:var(--font-mono); font-size:0.72rem; color:var(--signal); text-transform:uppercase; letter-spacing:0.06em; }
.work-body h3{ margin-top:8px; color:var(--white); }
.work-body p{ margin-top:6px; font-size:0.9rem; }

/* ---------- Stats / achievements ---------- */
.stats-band{ background:linear-gradient(135deg, var(--violet-dim), var(--ink)); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); }
.stat-item{ text-align:left; padding:8px 0; }
.stat-item b{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); color:var(--white); display:block; }
.stat-item span{ font-family:var(--font-mono); font-size:0.78rem; color:var(--signal); text-transform:uppercase; letter-spacing:0.05em; }

/* ---------- Testimonials ---------- */
.testimonial-card{
  padding:32px 30px; border-radius:var(--radius); background:var(--panel); border:1px solid rgba(255,255,255,0.07);
  display:flex; flex-direction:column; gap:20px; height:100%;
}
.testimonial-quote{ font-size:1.02rem; color:var(--paper); line-height:1.7; }
.testimonial-quote::before{ content:'"'; color:var(--signal); font-family:var(--font-display); }
.testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--signal));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1rem;
}
.testimonial-person b{ display:block; font-size:0.92rem; color:var(--white); }
.testimonial-person span{ font-size:0.8rem; color:var(--mist-dark); }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:24px;
  padding:70px 56px;
  background:
    radial-gradient(ellipse 500px 300px at 90% 0%, rgba(23,230,192,0.25), transparent 60%),
    linear-gradient(135deg, #6a15a3, var(--violet));
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); max-width:560px; }
.cta-band p{ color:rgba(255,255,255,0.82); margin-top:14px; max-width:480px; }
@media (max-width:700px){ .cta-band{ padding:44px 28px; } }

/* ---------- Forms ---------- */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:0.82rem; font-family:var(--font-mono); color:var(--mist); margin-bottom:8px; letter-spacing:0.03em; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.03);
  color:var(--white); font-size:0.95rem; transition:border-color .25s;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--mist-dark); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--signal); outline:none; }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-hp{ position:absolute; left:-9999px; opacity:0; }
.form-status{ margin-top:16px; font-size:0.9rem; font-family:var(--font-mono); display:none; padding:12px 16px; border-radius:var(--radius-sm); }
.form-status.is-success{ display:block; background:rgba(23,230,192,0.12); color:var(--signal); border:1px solid rgba(23,230,192,0.3); }
.form-status.is-error{ display:block; background:rgba(220,60,60,0.1); color:#ff8080; border:1px solid rgba(220,60,60,0.3); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-soft); padding:80px 0 32px; border-top:1px solid rgba(255,255,255,0.06); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:56px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ margin-top:16px; font-size:0.92rem; max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--mist-dark); margin-bottom:18px; font-weight:500; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ font-size:0.92rem; color:var(--mist); transition:color .25s; }
.footer-col ul li a:hover{ color:var(--signal); }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
  transition:all .25s var(--ease);
}
.footer-social a:hover{ border-color:var(--signal); color:var(--signal); transform:translateY(-3px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(255,255,255,0.06); font-size:0.82rem; color:var(--mist-dark); flex-wrap:wrap; gap:12px; }

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:1200;
  width:60px; height:60px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,0.6);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:waPing 2.2s ease-out infinite;
}
@keyframes waPing{ 0%{ transform:scale(1); opacity:0.7; } 100%{ transform:scale(1.7); opacity:0; } }
.wa-float svg{ width:30px; height:30px; position:relative; z-index:1; }
.wa-tooltip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:var(--panel); color:var(--white); padding:8px 14px; border-radius:8px;
  font-size:0.82rem; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .25s; border:1px solid rgba(255,255,255,0.1);
}
.wa-float:hover .wa-tooltip{ opacity:1; }
@media (max-width:560px){ .wa-float{ width:54px; height:54px; bottom:18px; right:18px; } .wa-tooltip{ display:none; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:170px 0 90px;
  background:
    radial-gradient(ellipse 800px 400px at 85% 0%, rgba(136,27,204,0.4), transparent 60%),
    var(--ink);
  position:relative; overflow:hidden;
}
.breadcrumb{ font-family:var(--font-mono); font-size:0.78rem; color:var(--mist-dark); margin-top:20px; display:flex; gap:8px; align-items:center; }
.breadcrumb a{ color:var(--mist); }
.breadcrumb a:hover{ color:var(--signal); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:1; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Utility ---------- */
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; } .mt-64{ margin-top:64px; }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-12{ gap:12px; } .gap-20{ gap:20px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:40px; } }
.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.78rem; color:var(--mist); border:1px solid rgba(255,255,255,0.12); padding:6px 14px; border-radius:100px; }
.icon-circle{ width:52px; height:52px; border-radius:50%; background:rgba(136,27,204,0.14); display:flex; align-items:center; justify-content:center; color:var(--violet-2); flex-shrink:0; }
.logo-image {
    height: 50px;   /* Adjust as needed */
    width: auto;
    display: block;
}