/* =========================================================
   YasiruIND.space — Stylesheet
   Fonts: Syne (headings) | DM Sans (body) | JetBrains Mono (HUD/code)
   ========================================================= */

/* ── Variables ── */
:root {
  --bg: #05070a;
  --bg2: #0a0d12;
  --text: #eef3ff;
  --muted: #98a0b3;
  --line: rgba(255,255,255,.13);
  --accent: #6fd6ff;
  --accent2: #7c75ff;
  --gold: #e7c98b;
  --radius: 28px;
  --max: 1240px;

  /* Liquid Glass tokens */
  --glass-bg: linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);
  --glass-border: rgba(255,255,255,.16);
  --glass-shine: rgba(255,255,255,.22);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.2);
  --glass-blur: blur(28px) saturate(180%);

  /* Font stacks */
  --font-head: 'Syne', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset & Base ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(ellipse at 75% 0%,#141a30 0%,#05070a 42%), var(--bg);
  color:var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x:hidden;
  /* Disable text selection on non-form elements */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

/* ── Noise overlay ── */
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  z-index:20
}

/* ── Scroll progress bar ── */
.progress{
  position:fixed;top:0;left:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--gold));
  z-index:1000;
  box-shadow: 0 0 12px rgba(111,214,255,.6);
}

/* ── Layout shell ── */
.section-shell{width:min(var(--max),calc(100% - 40px));margin:auto}

/* =========================================================
   LIQUID GLASS — Core System
   ========================================================= */
.liquid-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: hidden;
}
/* Shimmer highlight bar at top */
.liquid-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--glass-shine) 40%, rgba(111,214,255,.35) 60%, transparent 100%);
  pointer-events: none;
}
/* Subtle inner specular gloss */
.liquid-glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Legacy .glass for backward compat on glass-pill */
.glass {
  background: linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  border: 1px solid var(--line);
  box-shadow: 0 25px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* ── Glass Pill (eyebrow badges) ── */
.glass-pill {
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 20px rgba(0,0,0,.3);
  backdrop-filter: blur(18px);
  border-radius:999px;
  padding:9px 16px;
  font-size:10px;
  letter-spacing:.15em;
  font-family: var(--font-mono);
  color: #c5d4e8;
}

/* =========================================================
   LIQUID BUTTON
   ========================================================= */
.liquid-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(111,214,255,.12) 0%, rgba(124,117,255,.08) 100%) !important;
  border: 1px solid rgba(111,214,255,.35) !important;
  box-shadow:
    0 0 0 1px rgba(111,214,255,.1),
    0 8px 32px rgba(111,214,255,.12),
    inset 0 1px rgba(255,255,255,.2),
    inset 0 -1px rgba(0,0,0,.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #e8f6ff !important;
  overflow: hidden;
  transition: all .3s ease !important;
}
.liquid-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
.liquid-btn:hover::before { left: 100%; }
.liquid-btn:hover {
  background: linear-gradient(135deg, rgba(111,214,255,.18) 0%, rgba(124,117,255,.14) 100%) !important;
  border-color: rgba(111,214,255,.55) !important;
  box-shadow:
    0 0 0 1px rgba(111,214,255,.2),
    0 12px 40px rgba(111,214,255,.2),
    inset 0 1px rgba(255,255,255,.25),
    inset 0 -1px rgba(0,0,0,.1) !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3 {
  font-family: var(--font-head);
  font-weight: 700;
  margin-top: 0;
}
h1 { letter-spacing: -.06em; line-height: .96; }
h2 { letter-spacing: -.05em; line-height: 1; }
h3 { letter-spacing: -.04em; }
p { margin-top: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: #a5adbd;
  text-transform: uppercase;
}
.sep { opacity:.35; margin:0 4px }
.live-dot {
  display: inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(111,214,255,.9);
  vertical-align: middle;
}

.gradient-text {
  background: linear-gradient(100deg,#fff 0%,#8adfff 45%,#9f8cff 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav-wrap{position:fixed;z-index:100;top:18px;left:0;width:100%}
.nav {
  width:min(1120px,calc(100% - 26px));
  margin:auto;
  border-radius:20px;
  padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head)}
.brand-mark{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  font-size:11px;font-weight:800;
  font-family: var(--font-mono);
  background:linear-gradient(145deg,#151922,#090b10);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.4);
}
.brand-text{font-weight:700;letter-spacing:-.03em;font-size:15px}
.brand-text span, .footer strong span{color:var(--accent)}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{
  padding:9px 13px;border-radius:12px;
  color:#c5cdd9;font-size:13px;
  font-family: var(--font-body);
  font-weight: 500;
  transition:.25s;
}
.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}

.nav-cta {
  padding: 9px 16px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.nav-cta span{display:inline-block;margin-left:5px}

.menu-btn{
  display:none;border-radius:12px;
  width:42px;height:38px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  color:white;border:none;cursor:pointer;
}
.menu-btn span{width:16px;height:1px;background:#fff}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:890px;
  display:grid;grid-template-columns:1fr .92fr;
  align-items:center;gap:30px;padding-top:100px;
}
.hero-copy{position:relative;z-index:3}

.hero h1{
  font-size:clamp(54px,7.1vw,94px);
  margin:24px 0 25px;
  max-width:780px;
}
.hero-sub{
  max-width:650px;color:var(--muted);
  font-size:17px;line-height:1.8;
  font-weight: 300;
}
.hero-actions{display:flex;gap:12px;margin:34px 0}

.button{
  border:1px solid var(--line);border-radius:14px;
  padding:14px 20px;
  display:inline-flex;gap:12px;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
  font-family: var(--font-body);
  transition:transform .3s,box-shadow .3s,background .3s;
  cursor: pointer;
}
.button:hover{transform:translateY(-2px)}

.button-primary{
  background:#f5f7ff;color:#0a0c10;
  box-shadow:0 20px 55px rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
}
.button-primary:hover{
  box-shadow:0 24px 60px rgba(255,255,255,.18);
}
.button-ghost{
  background:rgba(255,255,255,.04);
  color: #d0d8e8;
}

.hero-meta{
  display:flex;gap:25px;
  color:#828a9b;font-size:11px;
  font-family: var(--font-mono);
  letter-spacing:.08em;
}
.hero-meta b{color:#dfe5f1;margin-right:6px}

/* Hero 3D Stage */
.hero-stage{
  position:relative;height:650px;
  display:grid;place-items:center;perspective:1000px;
}
.hero-glass{
  width:min(460px,80%);aspect-ratio:1;border-radius:50%;
  position:absolute;
  transform:rotateX(63deg) rotateZ(26deg);
  background:radial-gradient(circle at 30% 30%,rgba(139,223,255,.18),transparent 48%),
    linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.02));
  animation:float 7s ease-in-out infinite;
}
.orbital{
  position:absolute;
  border:1px solid rgba(128,198,255,.25);border-radius:50%;
  transform:rotateX(68deg) rotateZ(-13deg);
  box-shadow:0 0 65px rgba(88,147,255,.12);
}
.orbital-one{width:520px;height:300px}
.orbital-two{width:330px;height:520px;transform:rotateY(68deg) rotateZ(25deg)}

.hero-hud{
  position:absolute;right:0;top:25%;
  width:188px;border-radius:18px;padding:16px;display:grid;gap:14px;
}
.hero-hud div{display:flex;justify-content:space-between;align-items:center}
.hero-hud span{font-size:9px;color:#6d7483;letter-spacing:.14em;font-family:var(--font-mono)}
.hero-hud strong{font-size:10px;font-family:var(--font-mono)}
.hero-hud .status{color:#8ce7af}
.hero-chip{
  position:absolute;left:7%;bottom:14%;
  color:#c1d4e4;
  font-family:var(--font-mono);
  animation:float 5.5s ease-in-out infinite reverse;
}

/* =========================================================
   SECTIONS — Work, Services, Stack, About, Contact
   ========================================================= */
.content-section{padding:130px 0}

.section-head{
  display:grid;grid-template-columns:auto 1fr minmax(240px,360px);
  gap:24px;align-items:end;margin-bottom:45px;
}
.section-num{font-size:11px;color:#697184;padding-bottom:9px;font-family:var(--font-mono)}
.section-head h2{font-size:clamp(38px,5vw,63px);margin:8px 0 0}
.section-head p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}

/* ── Work Cards ── */
.work-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:20px}
.work-card{border-radius:var(--radius);overflow:hidden;min-height:440px}
.work-card.work-large{grid-row:span 2}

.work-visual{height:270px;position:relative;overflow:hidden}
.work-large .work-visual{height:480px}
.visual-tag{
  position:absolute;top:17px;left:17px;
  font-size:9px;letter-spacing:.17em;color:#8590a4;
  font-family:var(--font-mono);
}
.visual-grid{
  background:
    radial-gradient(circle at center,#1d3347,transparent 52%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
}
.visual-core{position:absolute;inset:0;display:grid;place-items:center}
.ring{
  width:190px;height:190px;border-radius:50%;
  border:1px solid rgba(138,215,255,.35);
  box-shadow:0 0 55px rgba(111,214,255,.1);
}
.ring.small{
  width:125px;height:125px;position:absolute;
  border-color:rgba(156,131,255,.42);
}
.crosshair{font-size:25px;color:#dff8ff;font-family:var(--font-mono)}
.visual-lines{background:radial-gradient(circle at 50% 30%,rgba(124,117,255,.22),transparent 55%),#080b11}
.code-lines{position:absolute;left:16%;right:16%;top:30%;display:grid;gap:13px}
.code-lines i{display:block;height:5px;border-radius:10px;background:rgba(255,255,255,.1)}
.code-lines i:nth-child(1){width:78%}
.code-lines i:nth-child(2){width:49%}
.code-lines i:nth-child(3){width:85%}
.code-lines i:nth-child(4){width:61%}
.code-lines i:nth-child(5){width:72%}
.visual-orbit{background:radial-gradient(circle at center,rgba(111,214,255,.15),transparent 42%),#080b11}
.orbit-dot{
  position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(111,214,255,.27);
  top:35%;left:40%;
  box-shadow:0 0 65px rgba(111,214,255,.1);
}
.orbit-dot:after{
  content:"";position:absolute;width:20px;height:20px;
  border-radius:50%;background:#dff8ff;
  top:22%;left:13%;
  box-shadow:0 0 25px #8cdfff;
}

.work-info{padding:22px 22px 24px}
.work-info span{
  font-size:10px;color:#757f92;
  text-transform:uppercase;letter-spacing:.16em;
  font-family:var(--font-mono);
}
.work-info h3{font-size:25px;margin:10px 0 8px}
.work-info p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}

/* ── Service Cards ── */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  padding:28px;border-radius:22px;
  min-height:310px;display:flex;flex-direction:column;
}
.service-index{
  font-size:10px;letter-spacing:.14em;color:#6f7789;
  font-family:var(--font-mono);
}
.service-card h3{font-size:25px;margin:55px 0 12px}
.service-card p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 20px}
.service-tags{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}
.service-tags span{
  font-size:9px;padding:7px 9px;border-radius:999px;
  background:rgba(255,255,255,.055);color:#aeb6c7;
  border:1px solid rgba(255,255,255,.09);
  font-family:var(--font-mono);
}

/* ── Stack Panel ── */
.stack-panel{
  padding:36px;border-radius:30px;
  display:grid;grid-template-columns:.7fr 1.3fr;
  gap:70px;align-items:center;
}
.stack-panel h2{font-size:44px;line-height:1.05;margin:12px 0 0}
.stack-cloud{display:flex;flex-wrap:wrap;gap:11px}
.stack-cloud span{
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:12px;color:#c7ceda;
  font-family:var(--font-mono);
  transition:.25s;cursor:default;
}
.stack-cloud span:hover{
  background:rgba(111,214,255,.08);
  border-color:rgba(111,214,255,.3);
  color:#dff8ff;
  transform:translateY(-2px);
  box-shadow: 0 4px 20px rgba(111,214,255,.12);
}

/* ── About Section ── */
.about-grid{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:center}
.about-copy h2{font-size:clamp(42px,5vw,65px);margin:13px 0 25px}
.about-copy > p{max-width:620px;color:var(--muted);line-height:1.8}
.quote{
  display:inline-block;margin-top:25px;
  padding:15px 17px;border-radius:16px;
  color:#cbd3df;font-size:13px;font-style:italic;
  line-height: 1.6;
}

.signal-card{border-radius:28px;padding:24px;max-width:500px;margin-left:auto}
.signal-top{
  display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:.14em;color:#737c8d;
  padding-bottom:18px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
}
.signal-body{padding-top:18px}
.signal-bar{
  height:8px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:24px;
}
.signal-bar span{
  display:block;width:78%;height:100%;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border-radius:99px;
  box-shadow:0 0 20px rgba(111,214,255,.35);
}
.signal-row{
  display:flex;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055);
  font-size:12px;color:#8d95a5;
}
.signal-row b{color:#dce3ee;font-size:10px;font-family:var(--font-mono)}

/* ── Contact Section ── */
.contact-section{
  display:grid;grid-template-columns:.83fr 1.17fr;
  gap:45px;align-items:start;
}
.contact-intro h2{font-size:clamp(45px,5.3vw,73px);margin:13px 0 22px}
.contact-intro p{color:var(--muted);line-height:1.8;max-width:480px}
.contact-intro strong{color:#dbe2ed}
.contact-note{margin-top:22px;color:#9faabd;font-size:9px}

.contact-form{border-radius:28px;padding:26px;display:grid;gap:16px}
.contact-form label{
  font-size:10px;letter-spacing:.1em;color:#8b93a4;
  display:grid;gap:8px;
  font-family:var(--font-mono);
}
.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.18);
  color:#eef3ff;
  border-radius:14px;padding:14px 15px;
  outline:none;transition:.2s;resize:vertical;
  font-family:var(--font-body);
  font-size:14px;
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(111,214,255,.55);
  box-shadow:0 0 0 4px rgba(111,214,255,.07);
  background:rgba(0,0,0,.25);
}
.contact-form textarea{min-height:170px}
.honeypot{position:absolute;left:-9999px;opacity:0}
.submit-btn{width:100%;border:none;cursor:pointer}
.submit-btn[disabled]{opacity:.6;cursor:wait;transform:none}

.form-status{min-height:20px;font-size:12px;color:#98a3b5;text-align:center;font-family:var(--font-mono)}
.form-status.success{color:#8ce7af}
.form-status.error{color:#ff9a9a}

/* ── Footer ── */
.footer{
  padding:45px 0 70px;
  border-top:1px solid rgba(255,255,255,.07);
}
.footer-line{display:flex;justify-content:space-between;align-items:flex-end}
.footer strong{font-family:var(--font-head);font-size:22px;font-weight:700}
.footer p{color:#727b8d;font-size:12px;margin:8px 0 0}
.footer-line > a{font-size:12px;color:#b0bac9}
.footer-bottom{
  display:flex;justify-content:space-between;
  margin-top:40px;color:#606979;
  font-size:10px;letter-spacing:.08em;
  font-family:var(--font-mono);
}

/* ── Mobile Menu ── */
.mobile-menu{
  position:fixed;z-index:90;top:78px;left:13px;right:13px;
  border-radius:18px;padding:10px;display:none;
}
.mobile-menu a{
  padding:15px;border-radius:13px;display:block;color:#cdd3df;
  font-family:var(--font-body);font-weight:500;
}
.mobile-menu a:hover{background:rgba(255,255,255,.06)}

/* =========================================================
   ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{opacity:1;transform:none}

@keyframes float {
  0%,100%{transform:translateY(0) rotateX(63deg) rotateZ(26deg)}
  50%{transform:translateY(-16px) rotateX(63deg) rotateZ(26deg)}
}
@keyframes shimmer {
  0%{left:-100%}100%{left:100%}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .mobile-menu.open{display:block}
  .hero{grid-template-columns:1fr;min-height:900px;padding-top:150px}
  .hero-stage{height:430px;margin-top:-80px}
  .hero-hud{right:3%;top:16%}
  .hero-chip{left:4%;bottom:10%}
  .section-head{grid-template-columns:auto 1fr}
  .section-head p{grid-column:2}
  .work-grid{grid-template-columns:1fr}
  .work-card.work-large{grid-row:auto}
  .work-large .work-visual{height:350px}
  .service-grid,.about-grid,.contact-section,.stack-panel{grid-template-columns:1fr}
  .stack-panel{gap:35px}
  .signal-card{margin-left:0}
  .contact-section{gap:30px}
}

@media (max-width:600px){
  .section-shell{width:min(100% - 26px,var(--max))}
  .nav-wrap{top:10px}
  .hero{padding-top:125px;min-height:800px}
  .hero h1{font-size:52px}
  .hero-sub{font-size:15px}
  .hero-stage{height:350px}
  .hero-hud{transform:scale(.85);right:-8%;top:9%}
  .orbital-one{width:360px;height:220px}
  .orbital-two{width:240px;height:360px}
  .hero-glass{width:320px}
  .section-head{grid-template-columns:auto 1fr}
  .section-head p{grid-column:1/-1}
  .content-section{padding:92px 0}
  .work-visual,.work-large .work-visual{height:310px}
  .service-card{min-height:280px}
  .service-card h3{margin-top:40px}
  .stack-panel{padding:24px}
  .stack-panel h2{font-size:34px}
  .about-copy h2,.contact-intro h2{font-size:48px}
  .contact-form{padding:18px}
  .footer-line,.footer-bottom{flex-direction:column;align-items:flex-start;gap:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .hero-glass,.hero-chip{animation:none}
}