/* ============================================================
   Juraj Vas — premium personal brand site
   Design system: dark graphite + electric blue, grotesk type
   ============================================================ */

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

:root{
  /* ---- color ---- */
  --bg:        #0c0d10;
  --bg-2:      #111317;
  --surface:   #16181d;
  --surface-2: #1c1f26;
  --surface-3: #232730;
  --border:    rgba(255,255,255,.075);
  --border-2:  rgba(255,255,255,.14);

  --text:      #f3f5f8;
  --text-soft: #c5cad3;
  --muted:     #8b91a0;
  --muted-2:   #636978;

  --accent:      #2f6bff;
  --accent-2:    #5d8bff;
  --accent-deep: #1d4fd6;
  --accent-glow: rgba(47,107,255,.45);
  --accent-soft: rgba(47,107,255,.12);

  /* ---- type ---- */
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- metrics ---- */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 0px;
  --radius-lg: 0px;
  --radius-sm: 0px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.no-smooth{ scroll-behavior:auto; }

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:17px;
  overflow-x:hidden;
  letter-spacing:-.01em;
}

/* ambient gradient field */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(47,107,255,.16), transparent 60%),
    radial-gradient(700px 700px at 8% 18%, rgba(47,107,255,.07), transparent 55%);
  pointer-events:none; z-index:0;
  animation:bgdrift 26s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.08); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }

/* faint engineering grid overlay */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}

/* animated constellation canvas */
#bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
}

/* lift real content above the background layers */
.nav, header, main, section, footer{ position:relative; z-index:1; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* ---- layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1; }
section{ position:relative; z-index:1; }
.section{ padding-block:clamp(72px,11vw,150px); }
.section--tight{ padding-block:clamp(56px,8vw,96px); }

.eyebrow{
  font-family:var(--mono);
  font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--accent); display:inline-block;
}
.eyebrow--plain::before{ display:none; }

h1,h2,h3,h4{ line-height:1.02; letter-spacing:-.035em; font-weight:700; }
.h-display{ font-size:clamp(44px,8.5vw,104px); font-weight:800; letter-spacing:-.045em; line-height:.96; }
.h-1{ font-size:clamp(34px,5.4vw,68px); font-weight:700; }
.h-2{ font-size:clamp(26px,3.4vw,42px); font-weight:700; }
.h-3{ font-size:clamp(20px,2.2vw,27px); font-weight:600; letter-spacing:-.02em; }
.lead{ font-size:clamp(18px,2vw,23px); color:var(--text-soft); line-height:1.5; font-weight:400; }
.muted{ color:var(--muted); }
.accent{ color:var(--accent-2); }

.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,68px); }
.section-head .h-2{ margin-top:18px; }
.section-head .lead{ margin-top:18px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,13,16,.72);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--border);
}
.nav-inner{
  height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:-.03em; font-size:18px; }
.brand .mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:15px; color:#fff;
  box-shadow:0 6px 22px var(--accent-glow);
}
.brand .mark span{ transform:translateY(-.5px); }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-size:14.5px; color:var(--text-soft); padding:9px 14px; border-radius:9px;
  transition:color .2s, background .2s; font-weight:500;
}
.nav-links a:hover{ color:var(--text); background:var(--surface-2); }
.nav-links a.active{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:12px; }

.lang-toggle{
  display:flex; align-items:center; border:1px solid var(--border-2); border-radius:999px; padding:3px; gap:2px;
}
.lang-toggle button{
  font-family:var(--mono); font-size:12px; font-weight:500; padding:5px 10px; border-radius:999px;
  color:var(--muted); transition:.2s; letter-spacing:.04em;
}
.lang-toggle button.active{ background:var(--text); color:var(--bg); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:12px 22px; border-radius:11px;
  transition:transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#fff; box-shadow:0 10px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border-2); }
.btn-ghost:hover{ background:var(--surface-3); transform:translateY(-2px); }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-lg{ padding:15px 28px; font-size:16.5px; }

.nav-burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-2); }
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:""; display:block; width:17px; height:1.6px; background:var(--text); border-radius:2px; transition:.25s;
}
.nav-burger span{ margin:0 auto; position:relative; }
.nav-burger span::before{ position:absolute; top:-5.5px; }
.nav-burger span::after{ position:absolute; top:5.5px; }
.nav.open .nav-burger span{ background:transparent; }
.nav.open .nav-burger span::before{ top:0; transform:rotate(45deg); }
.nav.open .nav-burger span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:148px; padding-bottom:clamp(60px,8vw,110px); overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero-kicker{ margin-bottom:26px; }
.hero h1{ margin-bottom:26px; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero .grad{
  background:linear-gradient(105deg,#fff 30%,var(--accent-2) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ max-width:560px; margin-bottom:36px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:30px; margin-top:46px; flex-wrap:wrap; }
.hero-meta .item .n{ font-size:30px; font-weight:800; letter-spacing:-.03em; }
.hero-meta .item .l{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-top:4px; }

/* portrait */
.portrait{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(47,107,255,.18), rgba(47,107,255,0) 45%),
    var(--surface);
  border:1px solid var(--border-2);
  overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.portrait .ph-stripes{ position:absolute; inset:0; }
.portrait .portrait-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
}
/* subtle gradient so the float-card / badge stay legible over the photo */
.portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,13,16,.05) 40%, rgba(12,13,16,.55) 100%);
}
.portrait .ph-label{
  position:absolute; left:18px; bottom:18px; font-family:var(--mono); font-size:12px; color:var(--muted);
  background:rgba(12,13,16,.6); padding:6px 10px; border-radius:7px; border:1px solid var(--border);
  backdrop-filter:blur(4px);
}
.portrait .badge{
  position:absolute; top:18px; right:18px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:0 8px 24px -6px var(--accent-glow);
}
.portrait .float-card{
  position:absolute; left:-26px; bottom:38px; z-index:2;
  background:rgba(22,24,29,.86); backdrop-filter:blur(10px);
  border:1px solid var(--border-2); border-radius:13px; padding:13px 16px;
  display:flex; align-items:center; gap:12px; box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
}
.float-card .dot{ width:9px; height:9px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.18); }
.float-card .t{ font-size:13.5px; font-weight:600; }
.float-card .s{ font-family:var(--mono); font-size:11px; color:var(--muted); }

/* striped placeholder (reusable) */
.ph-stripes{
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px);
}

/* logo strip */
.logos{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.logos-inner{ display:flex; align-items:center; gap:clamp(28px,6vw,72px); padding-block:30px; flex-wrap:wrap; justify-content:space-between; }
.logos .lbl{ font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.logos .row{ display:flex; align-items:center; gap:clamp(24px,5vw,56px); flex-wrap:wrap; }
.logos .row span{ font-weight:700; font-size:18px; color:var(--muted); letter-spacing:-.02em; opacity:.7; transition:.25s; }
.logos .row span:hover{ opacity:1; color:var(--text-soft); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.about-q{ display:flex; flex-direction:column; gap:30px; }
.about-q .qa{ border-left:2px solid var(--accent); padding-left:22px; }
.about-q .qa .q{ font-family:var(--mono); font-size:13px; color:var(--accent-2); letter-spacing:.04em; margin-bottom:8px; }
.about-q .qa .a{ font-size:18px; color:var(--text-soft); line-height:1.55; }
.about-q .qa .a b{ color:var(--text); font-weight:600; }
.about-statement{ font-size:clamp(22px,2.8vw,34px); font-weight:600; letter-spacing:-.025em; line-height:1.25; }
.about-statement .hl{ color:var(--accent-2); }

/* quick facts (GEO-extractable) */
.facts{ border:1px solid var(--border-2); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:clamp(26px,4vw,40px); }
.facts-head{ margin-bottom:24px; }
.facts-title{ font-size:clamp(22px,2.6vw,30px); font-weight:700; letter-spacing:-.03em; margin-top:10px; }
.facts-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.facts-list .fact{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--border); align-items:baseline; }
.facts-list .fact dt{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); }
.facts-list .fact dd{ font-size:16px; color:var(--text-soft); line-height:1.5; }
.facts-list .fact dd a{ color:var(--text); border-bottom:1px solid var(--border-2); }
.facts-list .fact dd a:hover{ color:var(--accent-2); }
@media (max-width:820px){
  .facts-list{ grid-template-columns:1fr; }
  .facts-list .fact{ grid-template-columns:130px 1fr; gap:14px; }
}
@media (max-width:520px){
  .facts-list .fact{ grid-template-columns:1fr; gap:4px; }
}

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.proj-card{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  overflow:hidden; transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
  display:flex; flex-direction:column; min-height:300px;
}
.proj-card:hover{ transform:translateY(-5px); border-color:var(--border-2); box-shadow:0 30px 70px -40px rgba(0,0,0,.9); }
.proj-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 200px at var(--mx,70%) -10%, var(--accent-soft), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.proj-card:hover::after{ opacity:1; }
.proj-visual{
  position:relative; aspect-ratio:16/10; background:var(--bg-2); border-bottom:1px solid var(--border); overflow:hidden;
}
.proj-visual .glow{ position:absolute; inset:0; background:radial-gradient(300px 160px at 70% 20%, var(--accent-soft), transparent 70%); }
.proj-visual .pv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.feat-vis.has-img{ position:relative; min-height:280px; }
.feat-vis.has-img .mock, .feat-vis.has-img .ph-note, .feat-vis.has-img .glow{ display:none; }
.feat-vis .pv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.proj-visual .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; background:rgba(12,13,16,.7); border:1px solid var(--border-2); color:var(--accent-2);
  backdrop-filter:blur(6px);
}
.proj-visual .ph-note{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:.04em;
}
.proj-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.proj-body .pc-title{ font-size:21px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.proj-body .pc-title .arr{ color:var(--muted); transition:.25s; }
.proj-card:hover .pc-title .arr{ color:var(--accent-2); transform:translate(3px,-3px); }
.proj-body .pc-desc{ color:var(--muted); font-size:15px; margin-top:9px; line-height:1.5; flex:1; }
.proj-body .pc-foot{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:11px; color:var(--text-soft); padding:5px 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); letter-spacing:.02em; }

/* device mock inside visual */
.mock{ position:absolute; inset:0; display:grid; place-items:center; }
.mock .phone{
  width:90px; height:170px; border-radius:18px; border:1px solid var(--border-2);
  background:linear-gradient(160deg,var(--surface-2),var(--bg)); position:relative; box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  transform:translateY(28px) rotate(-6deg);
}
.mock .phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:26px; height:4px; border-radius:3px; background:var(--border-2); }
.mock .phone .scr{ position:absolute; inset:14px 10px; border-radius:9px; background:radial-gradient(120px 80px at 60% 20%,var(--accent-soft),transparent),var(--bg-2); border:1px solid var(--border); }
.mock .board{
  width:150px; height:104px; border-radius:10px; border:1px solid var(--border-2);
  background:linear-gradient(160deg,#0f231a,#0c0d10); position:relative; transform:rotate(4deg) translateY(10px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85);
}
.mock .board .chipx{ position:absolute; width:34px; height:26px; border-radius:4px; background:var(--surface-3); border:1px solid var(--border-2); top:22px; left:30px; }
.mock .board .led{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); top:16px; right:24px; }
.mock .board .trace{ position:absolute; height:1px; background:var(--accent-soft); }

/* dashboard window mock (software) */
.mock .win{
  width:172px; height:114px; border:1px solid var(--border-2); position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--bg)); transform:rotate(-3deg) translateY(6px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85);
}
.mock .win::before{ content:""; position:absolute; top:0; left:0; right:0; height:20px; background:var(--surface-3); border-bottom:1px solid var(--border); box-shadow:8px 7px 0 -5px var(--accent) inset; }
.mock .win::after{ content:""; position:absolute; left:14px; right:14px; top:36px; height:54px; background:
  linear-gradient(var(--border-2),var(--border-2)) 0 0/40% 7px no-repeat,
  linear-gradient(var(--accent-soft),var(--accent-soft)) 0 16px/72% 7px no-repeat,
  linear-gradient(var(--border),var(--border)) 0 32px/55% 7px no-repeat,
  linear-gradient(var(--border),var(--border)) 0 48px/30% 7px no-repeat; }

/* AI orb mock */
.mock .orb{
  width:104px; height:104px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 38% 32%, var(--accent-2), var(--accent-deep) 58%, #0b1430 78%);
  box-shadow:0 0 70px -8px var(--accent-glow);
}
.mock .orb::after{ content:""; position:absolute; inset:-15px; border-radius:50%; border:1px solid var(--border-2); }

/* book mock */
.mock .bookm{
  width:96px; height:134px; position:relative; border:1px solid var(--border-2); border-left:4px solid var(--accent);
  background:linear-gradient(160deg,var(--surface-2),var(--bg)); transform:rotate(-5deg) translateY(6px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85);
}
.mock .bookm::after{ content:""; position:absolute; right:9px; top:16px; bottom:16px; width:1px; background:var(--border-2); }

.proj-card .mock > *{ transition:transform .4s var(--ease); }
.proj-card:hover .mock .phone{ transform:translateY(20px) rotate(-6deg) scale(1.04); }
.proj-card:hover .mock .board,
.proj-card:hover .mock .win,
.proj-card:hover .mock .bookm{ transform:rotate(0deg) translateY(2px) scale(1.04); }
.proj-card:hover .mock .orb{ transform:scale(1.06); }

/* category filter bar (projects page) */
.proj-filterbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:30px; }
.proj-filterbar .cat-row{ margin-bottom:0; }
.proj-count{ font-family:var(--mono); font-size:12.5px; color:var(--muted-2); letter-spacing:.04em; white-space:nowrap; }

/* span helpers */
.sp-6{ grid-column:span 6; } .sp-4{ grid-column:span 4; } .sp-3{ grid-column:span 3; } .sp-12{ grid-column:span 12; } .sp-8{ grid-column:span 8; }

/* featured project (projects page) */
.feat-card{ display:grid; grid-template-columns:1.1fr 1fr; min-height:0; }
.feat-vis{ aspect-ratio:auto; border-bottom:none; border-right:1px solid var(--border); }
.feat-body{ padding:clamp(28px,4vw,48px); }
@media (max-width:820px){ .feat-card{ grid-template-columns:1fr; } .feat-vis{ border-right:none; border-bottom:1px solid var(--border); min-height:240px; } }

/* ============================================================
   TIMELINE
   ============================================================ */
.tl{ position:relative; margin-top:20px; }
.tl::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--accent),var(--border) 60%,transparent); }
.tl-item{ position:relative; padding-left:38px; padding-bottom:40px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item .node{ position:absolute; left:-5px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
.tl-item.future .node{ border-color:var(--muted-2); }
.tl-item .yr{ font-family:var(--mono); font-size:13px; color:var(--accent-2); letter-spacing:.04em; }
.tl-item.future .yr{ color:var(--muted-2); }
.tl-item .tt{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin-top:5px; }
.tl-item .td{ color:var(--muted); margin-top:7px; max-width:560px; }

/* ============================================================
   BUILDING NOW
   ============================================================ */
.build-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.build-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); position:relative; overflow:hidden;
}
.build-card .live{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#37d67a; }
.build-card .live .dot{ width:7px; height:7px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.16); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(55,214,122,0); } }
.build-card h3{ margin-top:16px; }
.build-card p{ color:var(--muted); margin-top:10px; font-size:15.5px; }
.bar{ margin-top:22px; }
.bar .row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:8px; }
.bar .track{ height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.bar .fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-2)); width:0; transition:width 1.2s var(--ease); }

/* ============================================================
   BLOG / LESSONS
   ============================================================ */
.cat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.plan-cell{ border:1px solid var(--border); border-radius:12px; padding:18px 20px; background:rgba(12,13,16,.4); }
.plan-cell .n{ display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--accent-2); }
.plan-cell .l{ display:block; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-top:4px; }
@media (max-width:680px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
.cat-pill{
  font-family:var(--mono); font-size:13px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--border-2); color:var(--text-soft); transition:.2s; letter-spacing:.02em;
}
.cat-pill:hover,.cat-pill.active{ background:var(--text); color:var(--bg); border-color:var(--text); }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:transform .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column;
}
.post-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.post-card .pc-vis{ aspect-ratio:16/9; position:relative; border-bottom:1px solid var(--border); }
.post-card .pc-vis .glow{ position:absolute; inset:0; background:radial-gradient(220px 120px at 30% 10%,var(--accent-soft),transparent); }
.post-card .pc-vis .pv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.post-card .pc-in{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.post-card .meta{ font-family:var(--mono); font-size:11.5px; color:var(--accent-2); letter-spacing:.04em; text-transform:uppercase; }
.post-card .pt{ font-size:18.5px; font-weight:700; letter-spacing:-.02em; margin-top:11px; line-height:1.2; }
.post-card .pe{ color:var(--muted); font-size:14.5px; margin-top:9px; flex:1; }
.post-card .pf{ font-family:var(--mono); font-size:12px; color:var(--muted-2); margin-top:16px; }

/* ============================================================
   MEDIA
   ============================================================ */
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.media-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  background:var(--surface); transition:.3s; display:flex; flex-direction:column; gap:14px; min-height:180px;
}
.media-card:hover{ border-color:var(--border-2); background:var(--surface-2); }
.media-card .type{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); }
.media-card .mt{ font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.3; flex:1; }
.media-card .src{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testi-card{
  border:1px dashed var(--border-2); border-radius:var(--radius); padding:26px;
  background:var(--surface); display:flex; flex-direction:column; gap:18px; min-height:200px;
}
.testi-card .quote{ font-size:16px; color:var(--muted); line-height:1.5; flex:1; }
.testi-card .who{ display:flex; align-items:center; gap:12px; }
.testi-card .who .av{ width:42px; height:42px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border-2); }
.testi-card .who .nm{ font-weight:600; font-size:14.5px; }
.testi-card .who .rl{ font-family:var(--mono); font-size:11.5px; color:var(--muted-2); }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta{
  border:1px solid var(--border-2); border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--surface-2),var(--bg-2));
  padding:clamp(40px,7vw,86px);
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(640px 360px at 82% 0%, rgba(47,107,255,.22), transparent 60%);
  pointer-events:none;
}
.cta-inner{ position:relative; max-width:620px; }
.cta h2{ margin:18px 0; }
.cta .lead{ margin-bottom:32px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-bottom:9px; }
.field input,.field textarea,.field select{
  width:100%; background:var(--surface); border:1px solid var(--border-2); border-radius:11px;
  padding:14px 16px; color:var(--text); font-family:inherit; font-size:15.5px; transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.field textarea{ resize:vertical; min-height:130px; }
.contact-aside .ci{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-aside .ci:last-child{ border-bottom:none; }
.contact-aside .ci .ic{ width:40px; height:40px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border-2); display:grid; place-items:center; flex-shrink:0; color:var(--accent-2); }
.contact-aside .ci .k{ font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.contact-aside .ci .v{ font-size:16px; font-weight:600; margin-top:3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--border); margin-top:40px; padding-block:56px 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer .brand{ margin-bottom:16px; }
.footer p.fdesc{ color:var(--muted); font-size:14.5px; max-width:300px; }
.footer h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; font-weight:500; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ color:var(--text-soft); font-size:14.5px; transition:.2s; }
.footer ul a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:48px; padding-top:26px; border-top:1px solid var(--border); flex-wrap:wrap; }
.footer-bottom .cp{ font-family:var(--mono); font-size:12.5px; color:var(--muted-2); }
.footer-bottom .soc{ display:flex; gap:8px; }
.footer-bottom .soc a{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border-2); display:grid; place-items:center; color:var(--text-soft); transition:.2s; }
.footer-bottom .soc a:hover{ background:var(--surface-2); color:var(--text); border-color:var(--text); }

/* ============================================================
   PAGE HEADER (subpages)
   ============================================================ */
.pagehead{ padding-top:140px; padding-bottom:clamp(30px,5vw,60px); }
.pagehead .crumb{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:20px; }
.pagehead .crumb a:hover{ color:var(--text-soft); }
.pagehead h1{ max-width:880px; }
.pagehead .lead{ margin-top:22px; max-width:680px; }

/* ============================================================
   ARTICLE
   ============================================================ */
.article{ max-width:760px; margin-inline:auto; }
.article .a-meta{ font-family:var(--mono); font-size:13px; color:var(--accent-2); letter-spacing:.04em; text-transform:uppercase; }
.article h1{ font-size:clamp(32px,4.6vw,54px); margin:18px 0 24px; letter-spacing:-.035em; }
.article .a-by{ display:flex; align-items:center; gap:13px; padding-bottom:30px; border-bottom:1px solid var(--border); margin-bottom:40px; }
.article .a-by .av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); }
.article .a-by .nm{ font-weight:600; }
.article .a-by .dt{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.prose > *{ margin-bottom:24px; }
.prose h2{ font-size:clamp(24px,3vw,32px); margin-top:46px; margin-bottom:18px; letter-spacing:-.025em; }
.prose h3{ font-size:22px; margin-top:32px; margin-bottom:12px; }
.prose p{ font-size:18.5px; color:var(--text-soft); line-height:1.72; }
.prose ul,.prose ol{ padding-left:22px; color:var(--text-soft); font-size:18.5px; line-height:1.7; }
.prose li{ margin-bottom:10px; }
.prose blockquote{
  border-left:3px solid var(--accent); padding:6px 0 6px 24px; margin-left:0;
  font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--text); line-height:1.4;
}
.prose code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2); border:1px solid var(--border); padding:2px 7px; border-radius:6px; }
.prose .callout{ background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius); padding:24px 26px; }
.prose .callout .ck{ font-family:var(--mono); font-size:12px; color:var(--accent-2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.prose .callout p{ font-size:16.5px; margin-bottom:0; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:flex; flex-direction:column; gap:0; max-width:820px; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; padding:26px 0; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.faq-q .pm{ flex-shrink:0; width:24px; height:24px; position:relative; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--accent-2); border-radius:2px; transition:.3s; }
.faq-q .pm::before{ top:11px; left:3px; right:3px; height:2px; }
.faq-q .pm::after{ left:11px; top:3px; bottom:3px; width:2px; }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a p{ color:var(--muted); font-size:16.5px; padding-bottom:26px; line-height:1.6; max-width:680px; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }
.no-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ============================================================
   COMING SOON OVERLAY
   ============================================================ */
body.cs-locked{ overflow:hidden; }
body.cs-locked .nav,
body.cs-locked > header,
body.cs-locked > section,
body.cs-locked > .logos,
body.cs-locked > .footer{
  filter:blur(13px) saturate(115%);
  transform:scale(1.02);
  pointer-events:none;
  user-select:none;
  transition:filter .6s var(--ease), opacity .6s var(--ease);
}
.cs-overlay{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(47,107,255,.20), transparent 60%),
    radial-gradient(700px 700px at 8% 18%, rgba(47,107,255,.10), transparent 55%),
    rgba(9,10,13,.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:opacity .55s var(--ease), visibility .55s;
}
.cs-overlay.hidden{ opacity:0; visibility:hidden; }
.cs-card{
  width:min(620px,100%);
  border:1px solid var(--border-2);
  background:linear-gradient(180deg, rgba(28,31,38,.92), rgba(17,19,23,.92));
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  padding:clamp(34px,5vw,58px);
  text-align:center;
  position:relative;
  opacity:1;
}
.cs-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
@keyframes csIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.cs-mark{
  width:54px; height:54px; margin:0 auto 26px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:20px; color:#fff;
  box-shadow:0 12px 34px -8px var(--accent-glow);
}
.cs-eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:18px;
}
.cs-title{ font-size:clamp(30px,5vw,48px); font-weight:800; letter-spacing:-.04em; line-height:1; }
.cs-text{
  color:var(--text-soft); font-size:clamp(15.5px,1.8vw,18px); line-height:1.6;
  max-width:440px; margin:18px auto 0;
}
.cs-row{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; }
.cs-dot{ width:9px; height:9px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.16); animation:pulse 2s infinite; }
.cs-status{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cs-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.cs-foot{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.03em;
}
@media (max-width:540px){
  .cs-actions{ width:100%; }
  .cs-actions .btn{ flex:1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.mobile-only{ display:none; }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:420px; }
  .about-grid{ grid-template-columns:1fr; }
  .build-grid{ grid-template-columns:1fr; }
  .post-grid,.media-grid,.testi-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .sp-6,.sp-4,.sp-3,.sp-8{ grid-column:span 6; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav-links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(12,13,16,.96); backdrop-filter:blur(16px); padding:16px var(--gut) 24px;
    border-bottom:1px solid var(--border); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav.open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:13px 12px; font-size:16px; }
  .nav-burger{ display:grid; place-items:center; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1; }
  .post-grid,.media-grid,.testi-grid{ grid-template-columns:1fr; }
  .proj-grid .sp-6,.proj-grid .sp-4,.proj-grid .sp-3,.proj-grid .sp-8,.proj-grid .sp-12{ grid-column:span 12; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-meta{ gap:22px; }
  .desktop-only{ display:none; }
  .mobile-only{ display:block; }
}

/* ============================================================
   SHARP EDGES — no rounded corners (boxes/pills squared off)
   True circular indicators (dots, avatars) stay round.
   ============================================================ */
.brand .mark,
.nav-links a,
.lang-toggle,
.lang-toggle button,
.btn,
.nav-burger,
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after,
.portrait,
.portrait .ph-label,
.portrait .badge,
.portrait .float-card,
.proj-card,
.proj-visual .tag,
.chip,
.mock .phone,
.mock .phone::before,
.mock .phone .scr,
.mock .board,
.mock .board .chipx,
.build-card,
.bar .track,
.bar .fill,
.cat-pill,
.post-card,
.media-card,
.testi-card,
.cta,
.field input,
.field textarea,
.field select,
.contact-aside .ci .ic,
.plan-cell,
.footer-bottom .soc a,
.faq-q .pm::before,
.faq-q .pm::after{
  border-radius:0 !important;
}