:root{
  --bg1:#1b2540; --bg2:#111827; --bg3:#0b1220;
  --card:rgba(255,255,255,0.06); --card-b:rgba(255,255,255,0.12);
  --easing:cubic-bezier(.2,.8,.2,1);
  --header-h:64px;
  --fade-in:700ms; --fade-out:500ms;
  --page-w: 880px; 
}

html,body{height:100%;margin:0;font-family:'Josefin Sans',sans-serif;}
body{
  background:radial-gradient(1200px 800px at 50% 40%,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%)fixed;
  color:#e6e6e6;
  padding-top:var(--header-h);
}

#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ===== Header ===== */
header{
  position:fixed;left:0;right:0;top:0;height:var(--header-h);z-index:4;
  backdrop-filter:blur(8px) saturate(120%);
  background:color-mix(in oklab,#0b1220 65%,transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  max-width:var(--page-w);margin:0 auto;height:100%;
  padding:0 16px;display:flex;align-items:center;justify-content:space-between
}
.brand{font-weight:800;letter-spacing:.5px;opacity:.9}
nav ul{list-style:none;display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:0}
nav a{
  color:#e6e6e6;text-decoration:none;opacity:.85;
  padding:6px 10px;border-radius:10px;border:1px solid transparent
}
nav a:hover{opacity:1;border-color:rgba(255,255,255,.15)}
nav a[aria-current="page"]{
  opacity:1;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15)
}

/* ===== Hero ===== */
.hero-wrap{
  position:relative;z-index:1;max-width:var(--page-w);margin:0 auto;
  padding:18px 16px 38px;min-height:calc(100dvh - var(--header-h));
  display:grid;place-items:center;
  transition:opacity .35s ease,transform .35s ease
}
.hero{
  width:100%;
  padding:22px;
  text-align: center;
}

.hero h1 {
    font-family:'Big Shoulders Inline Text',cursive;
  font-weight:900;
  letter-spacing:6px;
  color:#d99129;
  text-align:center;
  padding:20px 0;
  font-size: 48px;
  
}

.hero h1, p {
  user-select: none;  
  -webkit-user-select: none; 
  -ms-user-select: none;
}

.brand {
      font-family:'Big Shoulders Inline Text',cursive;
      color: #d99129;
}

.brand span {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: #e6e6e6;
}

.btn{
  display:inline-block;margin-top:10px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;text-decoration:none;
  transition:transform .15s ease,background .2s ease
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.muted{opacity:.85;margin:.2rem 0 1rem 0}
h1{margin:.1rem 0 .35rem 0;font-size:clamp(1.8rem,3.2vw,2.4rem)}

.takeover{
  position:fixed;
  left:0; right:0;
  top:var(--header-h);
  height:calc(100dvh - var(--header-h));
  z-index:3;

  display:block;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  opacity:0;
  pointer-events:none;
  transition:opacity var(--fade-in) var(--easing);

  padding:20px 0 36px;
}

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.takeover::-webkit-scrollbar{display:none;}
.takeover{scrollbar-width:none;}

.takeover.show{
  opacity:1;
  pointer-events:auto;
}

.panel{
  width:100%;
  max-width:var(--page-w);
  margin:0 auto;
  background:rgba(8,11,18,0.65);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);

  opacity:0;
  transform:translateY(8px) scale(.985);
  transition:opacity var(--fade-in) var(--easing),transform var(--fade-in) var(--easing);
}
.takeover.show .panel{opacity:1;transform:none}

/* ===== Contact form bits ===== */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px}
.card h3{margin:0 0 6px 0;font-size:1.02rem}
.field{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#fff
}
textarea.field{min-height:120px}

/* ===== Projects grid & cards ===== */
.projects-grid{
  display:grid;
  gap:14px;
  margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Hard cap at 3 columns on huge screens (keeps it tight) */
@media (min-width: 1200px){
  .projects-grid{ grid-template-columns: repeat(3,1fr); }
}

.project-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  isolation:isolate;
  transition:transform .25s var(--easing),box-shadow .25s var(--easing)
}
.project-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.35)
}
.project-link{display:block;color:inherit;text-decoration:none}

.project-media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#0c1322;
}
.project-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.95) contrast(1.05);
  transition:transform .6s var(--easing),filter .6s var(--easing),opacity .6s var(--easing);
}
.project-card:hover .project-media img{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.1)
}

.project-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;
  background:linear-gradient(to top,rgba(8,11,18,.72) 40%,rgba(8,11,18,.25) 70%,transparent 100%);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--easing),transform .35s var(--easing)
}
.project-card:hover .project-overlay{opacity:1;transform:none}
.project-overlay h3{margin:0 0 6px 0;font-size:0.98rem;letter-spacing:.2px}
.project-overlay p{margin:0 0 10px 0;opacity:.9;font-size:.9rem}

.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges span{
  display:inline-block;
  padding:6px 10px;
  font-size:.72rem;
  letter-spacing:.2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px)
}

.panel-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.panel-actions .btn{flex:0 0 auto}

/* ===== Fullscreen Loader ===== */
#loader{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(1200px 800px at 50% 40%, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  transition: opacity 600ms var(--easing), visibility 600ms var(--easing);
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-brand{
  display:inline-flex; align-items:baseline; gap:.25rem;
  font-weight:800; letter-spacing:.08em; text-decoration:none; color:#efe0d8;
  font-size:clamp(26px,5vw,42px);
  text-transform:uppercase;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.45));
}
.loader-brand .dim{ opacity:.7; font-weight:700; text-transform:none; letter-spacing:.04em; }
.cursor{
  display:inline-block; margin-left:.2rem;
  animation:blink 1s steps(1,end) infinite;
  opacity:.9;
}
@keyframes blink { 50% { opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #loader { transition:none; }
  .cursor { animation:none; }
}

/* Loader typing style */
#loader-typing{
  font-family:'Big Shoulders Inline Text',cursive;
  font-weight:900;
  font-size:clamp(26px,5vw,42px);
  letter-spacing:6px;
  color:#d99129;
}
.loader-brand{
  font-family:'Big Shoulders Inline Text',cursive;
  font-weight:900;
  letter-spacing:6px;
  color:#d99129;
  text-align:center;
  padding:20px 0;
}
.loader-brand:hover{ color:#ffae42; }
.loader-brand .dim{
  font-family:'Big Shoulders Inline Text',cursive;
  font-weight:200;
  font-size:clamp(14px,3vw,18px);
  letter-spacing:6px;
  color:#efe0d8;
}
.loader-brand .cursor{
  margin-left:4px;color:#efe0d8;animation:cursorBlink .7s infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* ===================== Responsive ===================== */

/* Laptops / small desktops */
@media (max-width: 1200px){
  :root{ --page-w: 820px; }
}

/* Tablets (landscape/portrait) */
@media (max-width: 992px){
  :root{ --header-h: 60px; --page-w: 760px; }
  nav ul{ gap:10px; }
  nav a{ padding:6px 9px; }
  .hero{ padding:20px; }
  .panel{ padding:18px; }
  .projects-grid{ gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  h1{ font-size:clamp(1.7rem,4.2vw,2.2rem); }
}

/* Large phones / small tablets */
@media (max-width: 768px){
  :root{ --header-h: 56px; --page-w: 92vw; }
  .header-inner{ padding:0 14px; }
  .brand{ font-size:.95rem; }
  nav ul{ gap:10px; }
  nav a{ padding:6px 10px; border-radius:10px; }
  .hero-wrap{ padding:18px 14px 34px; }
  .hero{ padding:18px; border-radius:16px; }
  .btn{ padding:10px 12px; }
  .panel{ padding:16px; border-radius:16px; }
  .projects-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
  .project-overlay h3{ font-size:.98rem; }
  .project-overlay p{ font-size:.88rem; }
  .panel-actions{ flex-wrap:wrap; }
  .panel-actions .btn{ flex:1 1 auto; text-align:center; }
}

/* Phones */
@media (max-width: 560px){
  :root{ --header-h: 54px; --page-w: 94vw; }
  body{ padding-top: var(--header-h); }
  .brand{ display:none; }             /* keep nav clean on tiny screens */
  .header-inner{ justify-content:center; }
  nav ul{ gap:8px; }
  nav a{ padding:6px 9px; font-size:.95rem; }
  .hero{ padding:14px; }
  h1{ font-size:clamp(1.5rem,6vw,2rem); }
  .projects-grid{ grid-template-columns:1fr; gap:12px; }
  .project-overlay{ padding:12px; }
  .project-overlay h3{ font-size:.95rem; }
  .project-overlay p{ font-size:.85rem; }
  .badges span{ padding:5px 8px; font-size:.7rem; }
  .panel{ padding:14px; border-radius:14px; }
  .btn{ width:100%; }                /* comfy thumbs */
}

/* Very small phones */
@media (max-width: 380px){
  nav a{ padding:6px 8px; font-size:.9rem; }
  #loader-typing, .loader-brand{ font-size:28px; letter-spacing:5px; }
  .loader-brand .dim{ font-size:14px; letter-spacing:5px; }
}

/* === FIX: mobile viewport + panel width + stray overflow === */

/* Safer box model & no accidental horizontal scroll */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Use small-viewport units to avoid iOS URL bar jump */
.hero-wrap {
  min-height: calc(100svh - var(--header-h)) !important;
  padding-bottom: 24px !important;
}
.takeover {
  top: var(--header-h) !important;
  height: calc(100svh - var(--header-h)) !important;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important;
}

/* Tighter max widths site-wide */
:root { --panel-w: 760px; } /* desktop cap */
.header-inner,
.hero-wrap,
.panel {
  max-width: var(--panel-w) !important;
  width: min(100%, var(--panel-w)) !important;
}

/* Trim interior padding so content doesn't force extra height */
.hero   { padding: 18px !important; border-radius: 16px !important; }
.panel  { padding: 16px !important; border-radius: 16px !important; }
.panel-actions { margin-top: 12px !important; }

/* Projects grid: keep it narrow & predictable */
.projects-grid {
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
@media (min-width: 1200px){
  .projects-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Responsive caps: reduce panel width on smaller screens */
@media (max-width: 1200px){ :root{ --panel-w: 720px; } }
@media (max-width: 992px) { :root{ --panel-w: 680px; } }
@media (max-width: 768px) { :root{ --panel-w: 92vw;  } }
@media (max-width: 560px) { :root{ --panel-w: 94vw;  } }

/* Tiny phones: one-column projects, smaller text/padding */
@media (max-width: 560px){
  .projects-grid { grid-template-columns: 1fr !important; }
  .project-overlay { padding: 10px !important; }
  .project-overlay h3 { font-size: .95rem !important; }
  .project-overlay p  { font-size: .85rem !important; }
  .badges span { padding: 4px 7px !important; font-size: .68rem !important; }
}

/* Contact grid */
/* Tighter panel just for Contact */
.panel.contact-panel{
  max-width: 880px;      /* was wider; this centers nicely */
  padding: 20px 20px 18px;
}
.panel.contact-panel .panel-head .title{ margin: 0 0 6px 0; }
.panel.contact-panel .muted{ margin: 0 0 12px 0; }

/* Contact grid layout (3 cols desktop, 2 tablet, 1 mobile) */
.cta-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){
  .panel.contact-panel{ max-width: 760px; }
  .cta-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .panel.contact-panel{ max-width: 96vw; padding: 16px; border-radius: 18px; }
  .cta-grid{ grid-template-columns:1fr; gap:12px; }
}

/* Cards */

.panel.contact-panel {
  padding-top: calc(var(--header-h) + 16px); 
}
.contact-card{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  text-decoration:none; color:#e6e6e6;
  transition:transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s;
}
.contact-card.primary{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.18);
}
.contact-card.ghost{ background:rgba(255,255,255,.035); }

.icon-wrap{
  width:42px; height:42px; flex:0 0 42px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.icon-wrap i{ font-size:1.15rem; opacity:.95; }

/* Brand accents (soft, not neon) */
.contact-card[data-brand="whatsapp"] .icon-wrap{
  background:linear-gradient(180deg, rgba(37,211,102,.22), rgba(37,211,102,.10));
  border-color:rgba(37,211,102,.28);
}
.contact-card[data-brand="linkedin"] .icon-wrap{
  background:linear-gradient(180deg, rgba(10,102,194,.22), rgba(10,102,194,.10));
  border-color:rgba(10,102,194,.28);
}
.contact-card[data-brand="github"] .icon-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.22);
}
.contact-card[data-brand="mail"] .icon-wrap{
  background:linear-gradient(180deg, rgba(217,145,41,.20), rgba(217,145,41,.08));
  border-color:rgba(217,145,41,.26);
}

/* Hover/focus motion (respect reduced motion) */
.contact-card:hover,
.contact-card:focus-visible{
  transform: translateY(-2px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  outline:none;
}
@media (prefers-reduced-motion: reduce){
  .contact-card:hover, .contact-card:focus-visible{ transform:none; }
}

/* Make footer buttons sit tighter */
.panel.contact-panel .panel-actions{ margin-top: 14px; }