:root{
    --bg-base:#FFFFFF;
    --bg-tint:#FFFEFA;
    --yellow:#F2E2B1;
    --yellow-soft:#F8EFD3;
    --yellow-line:#EADFB3;
    --card:#FFFFFF;
    --ink:#1B1508;
    --ink-soft:#67604C;
    --ink-faint:#9A927A;
    --line:rgba(27,21,8,0.09);
    --marketing:#C1790A;
    --dev:#2C2312;
    --shadow: 0 24px 50px -22px rgba(27,21,8,0.16);
    --shadow-lg: 0 30px 70px -25px rgba(27,21,8,0.22);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --maxw: 1120px;
    --ease: cubic-bezier(.22,1,.36,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Figtree', system-ui, sans-serif;
    color:var(--ink);
    background:var(--bg-base);
    min-height:100vh;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  section{position:relative;}

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
    position:relative;
    z-index:2;
  }

  /* ---------- ambient blobs ---------- */
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    background:radial-gradient(circle at 30% 30%, var(--yellow) 0%, rgba(242,226,177,0) 70%);
    z-index:0;
    pointer-events:none;
    opacity:0.9;
  }
  .blob-1{ width:560px; height:560px; top:-180px; right:-140px; animation: float-a 22s ease-in-out infinite; }
  .blob-2{ width:420px; height:420px; top:420px; left:-160px; animation: float-b 26s ease-in-out infinite; opacity:0.6; }
  .blob-3{ width:480px; height:480px; bottom:-160px; right:10%; animation: float-a 30s ease-in-out infinite reverse; opacity:0.55; }

  @keyframes float-a{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-30px, 40px) scale(1.08); }
  }
  @keyframes float-b{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(40px, -30px) scale(1.05); }
  }

  @media (prefers-reduced-motion: reduce){
    .blob{animation:none !important;}
  }

  /* ---------- focus ---------- */
  a:focus-visible, button:focus-visible{
    outline:2.5px solid var(--marketing);
    outline-offset:3px;
    border-radius:6px;
  }

  /* ---------- nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.7);
    backdrop-filter: blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
  }
  header.nav.scrolled{
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 30px -20px rgba(27,21,8,0.25);
    background:rgba(255,255,255,0.88);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:var(--maxw); margin:0 auto;
  }
  .brand{
    font-weight:800; font-size:1.05rem; letter-spacing:-0.02em;
    display:flex; align-items:center; gap:8px;
  }
  .brand-dot{
    width:9px;height:9px;border-radius:50%;
    background:linear-gradient(135deg, var(--marketing), var(--dev));
    display:inline-block;
    animation: pulse-dot 2.6s ease-in-out infinite;
  }
  @keyframes pulse-dot{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.35); opacity:0.7; }
  }
  nav.links{
    display:flex; gap:28px; align-items:center;
  }
  nav.links a{
    font-size:0.92rem; font-weight:600; color:var(--ink-soft);
    position:relative; padding-bottom:2px;
  }
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
    background:var(--marketing); transition:width .28s var(--ease);
  }
  nav.links a:hover{color:var(--ink);}
  nav.links a:hover::after{width:100%;}

  .lang-switch{
    display:flex; align-items:center; gap:2px;
    background:var(--yellow-soft); border:1px solid var(--yellow-line);
    border-radius:999px; padding:3px; position:relative;
  }
  .lang-switch button{
    font-family:inherit; font-size:0.78rem; font-weight:700;
    border:none; background:transparent; cursor:pointer;
    padding:6px 13px; border-radius:999px; color:var(--ink-faint);
    transition:color .25s ease; letter-spacing:0.03em;
    position:relative; z-index:2;
  }
  .lang-switch button.active{ color:var(--bg-base); }
  .lang-pill{
    position:absolute; top:3px; bottom:3px; left:3px;
    width:calc(50% - 3px);
    background:var(--ink); border-radius:999px;
    transition:transform .32s var(--ease);
    z-index:1;
  }
  .lang-switch[data-active="en"] .lang-pill{ transform:translateX(100%); }

  /* ---------- reveal on scroll ---------- */
  [data-reveal]{
    opacity:0; transform:translateY(26px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  [data-reveal].in-view{ opacity:1; transform:translateY(0); }
  [data-reveal="scale"]{ transform:translateY(20px) scale(0.96); }
  [data-reveal="scale"].in-view{ transform:translateY(0) scale(1); }

  /* ---------- hero ---------- */
  .hero{
    padding:96px 0 76px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:56px;
    align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.8rem; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-faint);
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:''; width:22px; height:1.5px; background:var(--marketing);
    display:inline-block;
  }
  h1.name{
    font-size:clamp(2.6rem, 6vw, 4.4rem);
    font-weight:900; letter-spacing:-0.03em; line-height:1.02;
    margin-bottom:16px;
    overflow:hidden;
  }
  h1.name span.reveal-text{
    display:inline-block;
    animation: rise-in .9s var(--ease) both;
    animation-delay:.05s;
  }
  @keyframes rise-in{
    from{ transform:translateY(115%); }
    to{ transform:translateY(0); }
  }
  .role-line{
    font-size:clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight:600; margin-bottom:22px; letter-spacing:-0.01em;
    opacity:0; animation: fade-up .7s var(--ease) .25s both;
  }
  .role-line .m{color:var(--marketing);}
  .role-line .d{color:var(--dev);}
  .role-line .amp{color:var(--ink-faint); font-weight:500;}

  p.bio{
    color:var(--ink-soft); font-size:1.03rem; max-width:520px; margin-bottom:34px;
    opacity:0; animation: fade-up .7s var(--ease) .38s both;
  }
  .cta-row{
    display:flex; gap:14px; flex-wrap:wrap;
    opacity:0; animation: fade-up .7s var(--ease) .5s both;
  }
  @keyframes fade-up{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:999px;
    font-weight:700; font-size:0.94rem;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease;
    cursor:pointer; border:none; font-family:inherit;
  }
  .btn-primary{
    background:var(--ink); color:var(--yellow);
    box-shadow:0 14px 28px -14px rgba(27,21,8,0.5);
  }
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 34px -14px rgba(27,21,8,0.55);}
  .btn-primary:active{transform:translateY(-1px) scale(.98);}
  .btn-ghost{
    background:transparent; color:var(--ink); border:1.5px solid var(--line);
  }
  .btn-ghost:hover{background:var(--yellow-soft); border-color:var(--yellow-line); transform:translateY(-3px);}

  .photo-wrap{
    position:relative; justify-self:center;
    width:min(320px, 82%);
    opacity:0; animation: fade-in-scale .9s var(--ease) .2s both;
  }
  @keyframes fade-in-scale{
    from{ opacity:0; transform:scale(.9); }
    to{ opacity:1; transform:scale(1); }
  }
  .photo-ring{
    position:absolute; inset:0;
    border-radius:28px;
    background:var(--ink);
    z-index:0;
    animation: ring-shift 7s ease-in-out infinite;
  }
  .photo-ring::after{
    content:'';
    position:absolute; inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg, var(--marketing), var(--dev));
    opacity:0.9;
  }
  @keyframes ring-shift{
    0%,100%{ transform:translate(16px, 16px); }
    50%{ transform:translate(20px, 11px); }
  }
  .accent-dot{
    position:absolute; top:-16px; left:-16px;
    width:34px; height:34px; border-radius:50%;
    background:var(--yellow);
    border:1px solid var(--yellow-line);
    z-index:2;
    animation: pulse-dot 2.6s ease-in-out infinite;
  }
  .photo-frame{
    position:relative; z-index:1;
    aspect-ratio: 1 / 1.08;
    border-radius:28px;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    display:flex; align-items:center; justify-content:center;
    animation: bob 6s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }
  .photo-frame img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
  }
  .photo-frame .avatar-placeholder{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, #FFFFFF 0%, var(--yellow-soft) 130%);
    color:var(--ink-faint); font-weight:800; font-size:3.6rem; letter-spacing:-0.03em;
  }
  .photo-caption{
    text-align:center; margin-top:16px; font-size:0.82rem; color:var(--ink-faint); font-weight:600;
  }

  .marquee-wrap{
    margin-top:38px;
    width:100%;
    max-width:560px;
    overflow:hidden;
    opacity:0; animation: fade-up .7s var(--ease) .62s both;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee-track{
    display:flex;
    align-items:center;
    gap:12px;
    width:max-content;
    animation: marquee-scroll 20s linear infinite;
  }
  .marquee-track:hover{ animation-play-state: paused; }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .logo-chip{
    display:flex; align-items:center; gap:9px;
    font-size:0.8rem; font-weight:700; color:var(--ink-soft);
    background:var(--yellow-soft); border:1px solid var(--yellow-line);
    padding:9px 17px 9px 12px; border-radius:999px;
    white-space:nowrap;
    transition:transform .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
  }
  .logo-chip:hover{
    transform:translateY(-3px);
    background:var(--ink); color:var(--yellow); border-color:var(--ink);
  }
  .logo-chip img, .logo-chip svg{
    width:18px; height:18px; flex-shrink:0; display:block;
  }

  /* ---------- section heading ---------- */
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    margin-bottom:38px; gap:20px; flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:800; letter-spacing:-0.02em;
  }
  .section-head p{color:var(--ink-faint); font-size:0.95rem; max-width:420px;}
  .section-num{
    font-size:0.8rem; font-weight:700; color:var(--marketing);
    letter-spacing:0.1em;
  }

  section.block{padding:70px 0;}
  section.block.alt{
    background:linear-gradient(180deg, var(--bg-tint), #fff);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  /* ---------- project tabs ---------- */
  .tab-row{
    display:inline-flex; gap:6px; background:var(--yellow-soft);
    border:1px solid var(--yellow-line); padding:5px; border-radius:999px;
    margin-bottom:34px; position:relative;
  }
  .tab-btn{
    font-family:inherit; border:none; background:transparent; cursor:pointer;
    padding:10px 20px; border-radius:999px; font-weight:700; font-size:0.88rem;
    color:var(--ink-faint); transition:color .3s ease; position:relative; z-index:2;
  }
  .tab-btn.active{ color:var(--yellow); }
  .tab-pill{
    position:absolute; top:5px; bottom:5px; left:5px;
    background:var(--ink); border-radius:999px;
    transition:transform .38s var(--ease), width .38s var(--ease);
    z-index:1;
  }

  .project-panel{display:none;}
  .project-panel.active{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}

  .card{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:28px;
    transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--yellow-line);
  }
  .card-top{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
  }
  .tag{
    font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
    padding:5px 10px; border-radius:999px;
  }
  .tag.marketing{background:rgba(193,121,10,0.12); color:var(--marketing);}
  .tag.dev{background:rgba(44,35,18,0.08); color:var(--dev);}
  .card-date{font-size:0.78rem; color:var(--ink-faint); font-weight:600;}
  .card h3{font-size:1.15rem; font-weight:800; margin-bottom:8px; letter-spacing:-0.01em;}
  .card p{font-size:0.9rem; color:var(--ink-soft); margin-bottom:20px; min-height:42px;}
  .learn-more{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; font-size:0.88rem; color:var(--ink);
    border-bottom:1.5px solid var(--ink); padding-bottom:2px;
    transition:gap .25s var(--ease), color .2s ease, border-color .2s ease;
  }
  .learn-more:hover{gap:11px; color:var(--marketing); border-color:var(--marketing);}
  .learn-more svg{width:14px; height:14px; transition:transform .25s var(--ease);}
  .learn-more:hover svg{transform:translateX(2px);}

  /* ---------- tools ---------- */
  .tools-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .tool-card{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:26px;
    display:flex; flex-direction:column; gap:14px;
    transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
  }
  .tool-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--yellow-line);}
  .tool-icon{
    width:42px; height:42px; border-radius:12px;
    background:linear-gradient(135deg, var(--marketing), var(--dev));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:1.1rem;
    transition:transform .3s var(--ease);
  }
  .tool-card:hover .tool-icon{ transform:rotate(-8deg) scale(1.08); }
  .tool-card h3{font-size:1.05rem; font-weight:800;}
  .tool-card p{font-size:0.87rem; color:var(--ink-soft); flex-grow:1;}

  .tools-cta {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transition: box-shadow .3s ease, transform .3s ease;
}

.tools-cta:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.tools-cta-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(242,226,177,0.35);
  color: #b8963f;
}

.tools-cta-icon svg {
  width: 26px;
  height: 26px;
}

.tools-cta h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.tools-cta p {
  font-size: 15px;
  color: rgba(0,0,0,0.6);
  margin-bottom: 28px;
  line-height: 1.6;
}

.tools-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tools-cta-btn svg {
  width: 18px;
  height: 18px;
}
  .try-btn{
    align-self:flex-start;
    font-size:0.85rem; font-weight:700;
    padding:9px 18px; border-radius:999px;
    background:var(--ink); color:var(--yellow);
    display:inline-flex; align-items:center; gap:6px;
    transition:transform .22s var(--ease), background .22s ease;
  }
  .try-btn:hover{transform:translateY(-3px); background:var(--marketing);}

  /* ---------- contact ---------- */
  .contact-box{
    background:linear-gradient(135deg, var(--ink) 0%, #342813 100%);
    border-radius:var(--radius-lg);
    padding:56px;
    color:var(--yellow);
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .contact-box::before{
    content:''; position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(242,226,177,0.16), transparent 70%);
    top:-120px; right:-80px;
    animation: float-a 18s ease-in-out infinite;
  }
  .contact-box h2{
    font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:800; margin-bottom:14px; letter-spacing:-0.02em;
  }
  .contact-box p{color:rgba(242,226,177,0.75); font-size:0.98rem; max-width:420px;}
  .email-btn{
    margin-top:24px; display:inline-flex; align-items:center; gap:10px;
    background:var(--yellow); color:var(--ink); font-weight:800;
    padding:15px 26px; border-radius:999px; font-size:0.96rem;
    transition:transform .22s var(--ease), box-shadow .22s ease;
  }
  .email-btn:hover{transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(0,0,0,0.4);}
  .social-col{
    display:flex; flex-direction:column; gap:12px;
    position:relative; z-index:2;
  }
  .social-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-radius:14px;
    background:rgba(242,226,177,0.07);
    border:1px solid rgba(242,226,177,0.16);
    font-weight:700; font-size:0.92rem;
    transition:background .25s ease, transform .25s var(--ease);
  }
  .social-link:hover{background:rgba(242,226,177,0.16); transform:translateX(6px);}
  .social-link span.arrow{opacity:0.6; transition:transform .25s var(--ease);}
  .social-link:hover span.arrow{transform:translate(3px,-3px);}

  footer{
    padding:34px 0 46px;
    text-align:center;
    font-size:0.82rem;
    color:var(--ink-faint);
    font-weight:600;
  }

  /* ---------- responsive ---------- */
  @media (max-width: 880px){
    .hero-grid{grid-template-columns:1fr; text-align:left;}
    .photo-wrap{order:-1; width:min(240px, 60%); margin:0 auto 20px;}
    .project-panel.active{grid-template-columns:1fr;}
    .tools-grid{grid-template-columns:1fr 1fr;}
    .contact-box{grid-template-columns:1fr; padding:36px 26px;}
    nav.links{display:none;}
    .wrap{padding:0 20px;}
    .blob{filter:blur(50px);}
  }
  @media (max-width: 540px){
    .tools-grid{grid-template-columns:1fr;}
    .cta-row{flex-direction:column; align-items:stretch;}
    .contact-box{padding:30px 20px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
    [data-reveal]{ opacity:1 !important; transform:none !important; }
  }