/* =========================================================
   Techi4u — design tokens
   Palette: near-black navy surface + a single electric-blue
   accent. No gradients-as-decoration; accent is reserved for
   CTAs, links and highlighted numbers so it keeps meaning.
   ========================================================= */
:root{
  --bg:        #0A0E14;   /* page base */
  --surface:   #10151E;   /* raised panels (cards, header) */
  --surface-2: #151B26;   /* nested panels inside a panel */
  --border:    rgba(255,255,255,0.09);
  --border-hover: rgba(79,140,255,0.45);

  --text:      #F4F6FA;   /* primary text */
  --text-dim:  #9AA4B2;   /* secondary text */
  --text-faint:#5C6572;   /* tertiary / metadata */

  --accent:      #4F8CFF; /* electric blue — CTAs, links, highlights */
  --accent-hover:#6FA0FF;
  --accent-dim:  #2C4A8C;
  --accent-wash: rgba(79,140,255,0.10);
  --good:        #37B893;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --ease: cubic-bezier(.16,.8,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg); overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3, .mono-face{ font-family:'Sora',sans-serif; letter-spacing:-0.01em; }
.code{ font-family:'JetBrains Mono',monospace; }

a{ color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }

/* ---------- background: static dot-grid, hero only ---------- */
#bgFallback{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:var(--bg);
}
#bgFallback::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:900px;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 80%);
}
#bgFallback::after{
  content:"";
  position:absolute; top:-10%; left:50%; width:900px; height:600px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, var(--accent-wash), transparent 70%);
  opacity:.8;
}

header, .hero, section, footer{ position:relative; z-index:1; }

/* ---------- scroll progress bar ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:60;
  background:var(--accent);
  transition:width .1s linear;
}

/* ---------- scroll reveals ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.stagger.in-view > *{ opacity:1; transform:translateY(0); }
.stagger.in-view > *:nth-child(1){ transition-delay:.03s; }
.stagger.in-view > *:nth-child(2){ transition-delay:.08s; }
.stagger.in-view > *:nth-child(3){ transition-delay:.13s; }
.stagger.in-view > *:nth-child(4){ transition-delay:.18s; }
.stagger.in-view > *:nth-child(5){ transition-delay:.23s; }
.stagger.in-view > *:nth-child(6){ transition-delay:.28s; }
.stagger.in-view > *:nth-child(7){ transition-delay:.33s; }
.stagger.in-view > *:nth-child(8){ transition-delay:.38s; }
.stagger.in-view > *:nth-child(9){ transition-delay:.43s; }
.stagger.in-view > *:nth-child(10){ transition-delay:.48s; }
.stagger.in-view > *:nth-child(n+11){ transition-delay:.5s; }

/* ---------- word-by-word hero reveal ---------- */
.split-words{
  font-size:clamp(32px, 5.6vw, 64px);
  line-height:1.12; font-weight:700; margin:0 0 22px;
  max-width:min(16ch, 100%);
}
@media (max-width:400px){
  .split-words{ font-size:clamp(30px, 8vw, 64px); }
}
.split-words .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-words .word > span{
  display:inline-block;
  transform:translateY(115%);
  animation:wordUp .8s var(--ease) forwards;
  animation-delay:calc(var(--i) * 0.05s + 0.1s);
}
@keyframes wordUp{ to{ transform:translateY(0); } }

.reveal-word{
  opacity:0; transform:translateY(16px);
  animation:fadeUpWord .7s var(--ease) forwards;
  animation-delay:calc(var(--wd) * 0.12s + 0.5s);
}
@keyframes fadeUpWord{ to{ opacity:1; transform:translateY(0); } }

/* ---------- marquee strip ---------- */
.marquee-strip{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface);
  padding:16px 0;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:16px;
  animation:marqueeScroll 26s linear infinite;
  font-family:'Sora',sans-serif; font-size:14.5px; font-weight:600;
  color:var(--text-dim); letter-spacing:.2px;
}
.marquee-track .dot{ color:var(--accent); font-size:13px; }
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- magnetic buttons ---------- */
.magnetic{ will-change:transform; transition:transform .2s var(--ease); }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

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

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{ font-family:'Sora',sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.01em; text-decoration:none; }
.brand span{ color:var(--accent); }
.navlinks{ display:flex; gap:30px; align-items:center; }
.navlinks a{ text-decoration:none; color:var(--text-dim); font-size:14.5px; white-space:nowrap; transition:color .2s ease; }
.navlinks a:hover{ color:var(--text); }
.wa-pill{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#08101F;
  padding:9px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:14px;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease, transform .2s var(--ease);
}
.wa-pill:hover{ background:var(--accent-hover); }
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); color:var(--text);
  width:40px; height:40px; border-radius:var(--radius-sm); font-size:18px; cursor:pointer;
}

@media (max-width:720px){
  nav.wrap{ height:60px; }
  .nav-toggle{ display:block; }
  .navlinks{
    position:fixed; top:60px; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .navlinks.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .navlinks a{ padding:14px 28px; border-bottom:1px solid var(--border); }
  .navlinks .wa-pill{ margin:12px 28px; justify-content:center; }
}

/* ---------- HERO ---------- */
.hero{ padding:110px 0 68px; position:relative; overflow-x:hidden; }
@media (max-width:720px){ .hero{ padding:52px 0 48px; } }

.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface);
  padding:7px 14px 7px 10px;
  font-size:12.5px; color:var(--text-dim); border-radius:99px; margin-bottom:28px;
}
.hero-tag::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--good); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(55,184,147,0.18);
}

.hero p.lead{
  font-size:18px; color:var(--text-dim); max-width:min(54ch, 100%); margin:0 0 36px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; max-width:100%; }
.hero-ctas > a{ max-width:100%; }

.btn-primary{
  background:var(--accent); color:#08101F; padding:14px 26px;
  border-radius:var(--radius-sm); font-weight:600; text-decoration:none; font-size:15px;
  border:1px solid var(--accent);
  transition:background .22s ease, border-color .22s ease, transform .22s var(--ease), box-shadow .22s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 8px 24px -8px rgba(79,140,255,0.55); }
.btn-ghost{
  padding:14px 26px; border-radius:var(--radius-sm); font-weight:600; text-decoration:none;
  font-size:15px; border:1px solid var(--border); color:var(--text);
  transition:border-color .22s ease, color .22s ease, transform .22s var(--ease), background .22s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost:hover{ border-color:var(--border-hover); background:var(--surface); }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); margin-top:64px;
  border-radius:var(--radius-md); overflow:hidden;
}
.stat{ background:var(--surface); padding:24px 22px; }
.stat b{ display:block; font-family:'JetBrains Mono',monospace; font-size:27px; color:var(--accent); font-weight:500; }
.stat span{ font-size:13px; color:var(--text-dim); }
@media (max-width:640px){
  .stats{ grid-template-columns:1fr; margin-top:36px; }
  .stat{ padding:18px 20px; }
}
@media (max-width:480px){
  .wrap{ padding:0 18px; }
  section{ padding:56px 0; }
  .section-head h2{ font-size:26px; }
}

/* ---------- SECTION HEADS ---------- */
section{ padding:88px 0; border-top:1px solid var(--border); }
.section-head{ margin-bottom:48px; max-width:60ch; }
.section-head .kicker{
  color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.section-head h2{ font-size:33px; margin:10px 0 12px; font-weight:700; }
.section-head p{ color:var(--text-dim); font-size:15.5px; margin:0; }

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;
}
@media (max-width:480px){
  .services-grid{ grid-template-columns:1fr; }
}
.svc-card{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 24px 24px;
  background:var(--surface);
  transition:border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease;
  display:flex; flex-direction:column; height:100%;
}
.svc-card:hover{
  border-color:var(--border-hover); transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(79,140,255,0.35);
}
.svc-icon{
  width:42px; height:42px; border-radius:var(--radius-sm);
  background:var(--accent-wash); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.svc-icon svg{ width:22px; height:22px; }
.svc-code{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-faint);
  letter-spacing:1.5px; display:block; margin-bottom:8px;
}
.svc-card h3{ font-size:19px; margin:0 0 10px; font-weight:600; }
.svc-card p{ color:var(--text-dim); font-size:14.5px; margin:0 0 20px; flex-grow:1; }
.svc-book-btn{
  align-self:flex-start; margin-top:auto;
  background:none; border:1px solid var(--border); color:var(--text);
  padding:10px 16px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  font-family:'Inter',sans-serif; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .22s ease, color .22s ease, gap .22s ease;
}
.svc-book-btn:hover{ border-color:var(--accent); color:var(--accent); gap:9px; }
.svc-book-btn .arrow{ transition:transform .22s var(--ease); }
.svc-book-btn:hover .arrow{ transform:translateX(2px); }

/* ---------- WORK / PORTFOLIO ---------- */
.apps-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
}
@media (max-width:640px){
  .apps-grid{ grid-template-columns:1fr; }
}
.app-card{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 22px 20px;
  background:var(--surface);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.app-card:hover{
  border-color:var(--border-hover); transform:translateY(-3px);
  box-shadow:0 20px 40px -22px rgba(79,140,255,0.3);
}
.app-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.app-card-top h3{ font-size:16.5px; margin:0; line-height:1.3; font-weight:600; }
.app-rating{
  flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  color:var(--accent); background:var(--accent-wash); border-radius:99px; padding:4px 10px;
  white-space:nowrap;
}
.app-card p{ color:var(--text-dim); font-size:14px; margin:0; flex-grow:1; }
.app-card-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--border);
}
.app-downloads{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-faint); }
.app-link{
  font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:none;
  white-space:nowrap; transition:color .2s ease, transform .2s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.play-icon{ width:14px; height:14px; flex-shrink:0; }
.app-link:hover{ color:var(--accent-hover); transform:translateX(2px); }
.app-link-disabled{ color:var(--text-faint); cursor:default; }
.app-link-disabled:hover{ color:var(--text-faint); transform:none; }
.app-rating-soon{ color:var(--text-faint); background:rgba(255,255,255,0.05); }

/* ---------- APPROACH / PROCESS STEPPER ---------- */
.approach-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
.approach-grid::before{
  content:"";
  position:absolute; top:21px; left:calc(12.5% + 21px); right:calc(12.5% + 21px);
  height:1px; background:var(--border);
  z-index:0;
}
@media (max-width:860px){
  .approach-grid{ grid-template-columns:1fr; gap:28px; }
  .approach-grid::before{
    top:0; bottom:0; left:21px; right:auto; width:1px; height:auto;
  }
}
.approach-card{
  position:relative; z-index:1; padding:0 18px;
}
@media (max-width:860px){
  .approach-card{ padding:0 0 0 56px; }
}
.approach-node{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  margin-bottom:20px;
  transition:border-color .3s ease, background .3s ease;
}
.approach-card:hover .approach-node{
  border-color:var(--accent); background:var(--accent-wash);
}
@media (max-width:860px){
  .approach-node{ position:absolute; left:0; top:0; margin-bottom:0; }
}
.approach-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); font-weight:500;
}
.approach-card h3{ font-size:18px; margin:0 0 8px; font-weight:600; }
.approach-card p{ color:var(--text-dim); font-size:14px; margin:0; }

/* ---------- YOUTUBE CHANNEL ---------- */
.channel-panel{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; background:var(--surface);
}
@media (max-width:600px){
  .channel-panel{ padding:26px 20px; }
}
.channel-info{
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
  flex-wrap:wrap; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--border);
}
.channel-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.channel-stat{ display:flex; flex-direction:column; }
.channel-stat b{
  font-family:'JetBrains Mono',monospace; font-size:25px; color:var(--accent); font-weight:500;
}
.channel-stat span{ font-size:12.5px; color:var(--text-dim); }
.channel-desc{ color:var(--text-dim); font-size:14.5px; margin:14px 0 0; max-width:56ch; }
.channel-text{ flex:1 1 320px; min-width:0; }
.channel-info .btn-primary{ flex-shrink:0; align-self:center; }

.channel-videos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
.video-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2);
  transition:border-color .25s ease, transform .3s var(--ease);
  min-width:0;
}
.video-card:hover{ border-color:var(--border-hover); transform:translateY(-3px); }
.video-thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  background:var(--bg);
}
.video-title{
  display:block;
  font-size:13.5px; line-height:1.4; color:var(--text);
  padding:13px 14px;
  word-break:break-word;
  overflow-wrap:break-word;
}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--border); padding:52px 0 40px; }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.foot-brand b{ font-family:'Sora',sans-serif; font-size:18px; font-weight:700; }
.foot-meta{ color:var(--text-dim); font-size:14px; margin-top:8px; line-height:1.7; }
.foot-contact{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
@media (max-width:600px){
  .foot-contact{ align-items:stretch; width:100%; }
}
@media (max-width:480px){
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost{
    flex:1 1 100%; min-width:0; text-align:center; justify-content:center;
  }
}
.foot-contact a{ font-size:14px; text-decoration:none; color:var(--text-dim); transition:color .2s ease; }
.foot-contact a:hover{ color:var(--accent); }
.foot-contact a.wa-pill, .foot-contact a.btn-ghost{
  font-size:15px; justify-content:center; width:220px; max-width:100%;
}
.foot-contact a.wa-pill{ color:#08101F; }
.foot-contact a.wa-pill:hover{ color:#08101F; }
.foot-contact a.btn-ghost{ color:var(--text); text-align:center; }
.foot-contact a.btn-ghost:hover{ color:var(--text); border-color:var(--border-hover); }
@media (max-width:600px){
  .foot-contact a.wa-pill, .foot-contact a.btn-ghost{ width:100%; }
}
.foot-social{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; justify-content:flex-end;
}
@media (max-width:600px){
  .foot-social{ justify-content:flex-start; }
}
.foot-social a{ font-size:12.5px; }

.foot-copyright{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text-faint); text-align:center;
}