/* ============================================================
   HOME.CSS — homepage redesign (cutout hero + ask-me chat).
   Isolated from main.css so case-study pages are unaffected.
   Fonts: Barlow (head) + Mulish (body). "Warm Sunset" palette.

   CONTENTS
     1. Tokens + base
     2. Hero shell + LEFT cutout headline (.hero-line-inner)
     3. RIGHT chat panel + floating widget (tablet/mobile)
     4. Sections shell + header nav (.grad-word accent)
     5. Work grid
     6. About
     7. Contact
     8. Scroll reveal + reduced motion
============================================================ */
:root{
  --bg:#FFFFFF; --bg-2:#F6F6F7; --surface:#FFFFFF; --surface-2:#EFEFF1;
  --text:#0A0A0A; --text-2:#444A52; --text-3:#6B7280;
  --border:rgba(10,10,10,0.08); --border-h:rgba(10,10,10,0.22);
  /* "Warm Sunset" palette — derived from the headline gradient */
  --coral:#FF8A4B; --rose:#B33A82; --plum:#6E3C97;
  --bubble-bot:#FFE8D6;  --bubble-bot-ink:#5A3A22;
  --bubble-user:#F9D4E3; --bubble-user-ink:#5A2742;
  --accent:#B33A82; --accent-rgb:179,58,130;  /* warm accent for the sections */
  --max-wide:1240px;
  --f-head:'Barlow',system-ui,sans-serif;
  --f-body:'Mulish',system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --r-md:14px; --r-lg:20px; --r-xl:999px;
  /* cursor-driven gradient position (updated by JS) */
  --gx:50%; --gy:40%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--f-body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.7; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ============================================================
   HERO — two columns: cutout headline (left) / chat (right)
============================================================ */
.hero{
  min-height:100dvh; display:grid;
  grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
  max-width:var(--max-wide); margin:0 auto; padding:96px 56px 64px;
}
@media (max-width:920px){
  /* stack to one column but keep the SAME horizontal padding as .container */
  .hero{ grid-template-columns:1fr; gap:40px; min-height:auto; padding:80px 56px 48px; }
}
@media (max-width:768px){
  .hero{ padding-left:28px; padding-right:28px; }
}

/* ---- LEFT: the cutout headline ------------------------------ */
/* container-type lets the headline size off THIS column's width (cqw),
   not the viewport — so it tracks its own column and never clips. */
.hero-left{ position:relative; container-type:inline-size; }

.hero-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-3); margin-bottom:24px;
}

/* The headline. The WARM GRADIENT lives here and is clipped to the
   text glyphs. background-position is driven by the cursor (--gx/--gy)
   so the colours pan behind the letters as you move the mouse. */
.hero-display{
  font-family:var(--f-head); font-weight:900;
  /* size scales with the COLUMN width (cqw) so the longest line
     ("out of the complex.") always fits and never clips.
     Lower --head-scale = smaller headline; raise it = bigger. */
  --head-scale:18cqw;
  font-size:clamp(40px, var(--head-scale), 150px);
  line-height:1.0; letter-spacing:-2px;
}
.hero-display .l1{
  font-weight:600;   /* "I design" — same weight as the "Let's make" headline */
  /* solid black instead of the gradient, to match the rest of the title */
  background:none; -webkit-text-fill-color:var(--text); color:var(--text);
}
.hero-display .l2,.hero-display .l3{ font-weight:900; }
.hero-line{ display:block; }
/* negative margin pulls the lines into a tight stack */
.hero-line + .hero-line{ margin-top:-0.24em; }
/* The gradient + text-clip live on the element that holds the text.
   Same coral -> rose -> plum gradient as the ".grad-word" accent (e.g.
   "clarity." in the About section) so the headline matches the rest of the site. */
.hero-line-inner{
  display:block; padding-bottom:0.1em;
  background:linear-gradient(120deg,#E85D2A,var(--rose) 58%,var(--plum));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-desc{
  margin-top:32px; max-width:440px; font-size:clamp(14px,1.3vw,16px);
  color:var(--text-2); line-height:1.7;
}
.hero-desc mark{ background:transparent; color:var(--text); font-weight:600; }

/* ============================================================
   RIGHT: "Ask anything about me" chat panel
============================================================ */
.chat{
  position:relative;
  height:min(760px,94vh);
  /* ===== LIVE-TWEAK KNOBS — edit these in DevTools on the .chat element ===== */
  --chat-w:440px;        /* width of the bubble column                          */
  --chat-x:0px;          /* nudge chat LEFT (negative) / RIGHT (positive)       */
  --chat-bottom:calc(30% + 130px); /* input/foot vertical anchor; convo grows UP. offset lifts it clear of the raised waving hand */
  /* how tall the conversation can get before it scrolls. The convo grows
     upward and stops ~50px below the 64px nav. The subtracted amount accounts
     for nav(64) + 50px gap + the input/foot below + the 130px raise above. */
  --log-max:min(350px, calc(100dvh - 470px));
  --m-size:760px;        /* mascot max width — bigger number = larger mascot    */
  --m-width:132%;        /* mascot width relative to the chat column            */
  --m-right:-55%;        /* mascot horizontal — more negative = further right / more table cropped */
  --m-bottom:0px;        /* mascot vertical — more negative = lower / feet off-edge */
  /* ========================================================================= */
}

/* the bubble + input stack moves as one unit, positioned via the knobs above.
   Anchored by its BOTTOM, so the input stays put and the conversation grows
   upward as messages are added. */
.chat-stack{
  position:absolute; right:0; left:auto; bottom:var(--chat-bottom); z-index:2;
  width:var(--chat-w); max-width:100%;
  transform:translateX(var(--chat-x));
}

/* conversation bubbles float on the page (no card box, like the mock).
   They live in the TOP band; the mascot owns the bottom band — so the two
   never overlap regardless of screen width. Messages are bottom-anchored
   so the conversation grows upward "from below". */
.chat-log{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:12px;
  padding:4px; width:100%;
  overflow-y:auto; scroll-behavior:smooth;
  max-height:var(--log-max);   /* grows upward to here, then scrolls */
  /* slim, on-brand scrollbar */
  scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.35) transparent;
}
/* Bottom-anchor the conversation WITHOUT justify-content:flex-end (which clips
   the overflowing top and kills scroll-up in Chromium). An auto top-margin on
   the first message pushes everything down when short, and collapses to 0 when
   the log overflows — so it scrolls cleanly and the top stays reachable. */
.chat-log > :first-child{ margin-top:auto; }
.chat-log::-webkit-scrollbar{ width:8px; }
.chat-log::-webkit-scrollbar-thumb{ background:rgba(var(--accent-rgb),.3); border-radius:999px; }
.chat-log::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.5); }
.chat-log::-webkit-scrollbar-track{ background:transparent; }
.msg{ display:flex; max-width:80%; }
.msg-bubble{
  font-family:var(--f-body); font-size:14px; line-height:1.55;
  padding:12px 16px; border-radius:18px; white-space:pre-wrap;
}
/* assistant (mascot) bubbles sit on the RIGHT, near the mascot;
   the visitor's messages sit on the LEFT */
.msg.bot{ align-self:flex-end; }
.msg.bot .msg-bubble{
  background:var(--bubble-bot); color:var(--bubble-bot-ink); border-bottom-right-radius:6px;
}
.msg.user{ align-self:flex-start; }
.msg.user .msg-bubble{
  background:var(--bubble-user); color:var(--bubble-user-ink); border-bottom-left-radius:6px;
}
/* rich formatting inside assistant replies (bullets + highlighted keywords) */
.msg.bot .msg-bubble p{ margin:0 0 8px; }
.msg.bot .msg-bubble p:last-child{ margin-bottom:0; }
.msg.bot .msg-bubble ul{ margin:8px 0 0; padding-left:18px; list-style:none; }
.msg.bot .msg-bubble ul:first-child{ margin-top:0; }
.msg.bot .msg-bubble li{ position:relative; margin:5px 0; padding-left:14px; }
.msg.bot .msg-bubble li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:rgba(var(--accent-rgb),.7);
}
.msg.bot .msg-bubble strong{ font-weight:700; color:inherit; }
/* email rendered as a tap-to-mail button */
.msg-bubble .mail-btn{
  display:inline-flex; align-items:center; gap:5px;
  margin:2px 0; padding:5px 11px; border-radius:999px;
  background:rgba(var(--accent-rgb),.95); color:#fff;
  font-weight:600; font-size:13px; text-decoration:none;
  white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.msg-bubble .mail-btn:hover{
  background:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.35);
}
.msg-bubble .mail-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* typing indicator (styled as a right-aligned bot bubble) */
.typing{
  display:flex; gap:4px; padding:14px 16px;
  background:var(--bubble-bot); border-radius:18px 18px 6px 18px;
}
.typing span{
  width:7px; height:7px; border-radius:50%; background:var(--rose); opacity:.5;
  animation:blink 1.2s infinite both;
}
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* foot = chips + input + note, pinned to the bottom, above the mascot */
.chat-foot{ position:relative; z-index:3; width:100%; margin-top:14px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chip{
  font-family:var(--f-body); font-size:12px; font-weight:600; color:var(--rose);
  background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(var(--accent-rgb),0.25); border-radius:var(--r-xl);
  padding:8px 14px; cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.chip:hover{ border-color:var(--rose); color:var(--plum); background:#fff; }

.chat-input{
  display:flex; gap:6px; align-items:center;
  background:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:6px 6px 6px 18px;
}
.chat-input input{
  flex:1; font-family:var(--f-body); font-size:14px; color:var(--text);
  background:transparent; border:0; outline:none; padding:8px 0;
}
.chat-input input::placeholder{ color:var(--text-3); }
.chat-send{
  flex-shrink:0; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--coral),var(--rose)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease);
}
.chat-send:hover{ transform:scale(1.06); }
.chat-send:active{ transform:scale(.94); }
.chat-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.chat-note{ font-size:11px; color:var(--text-2); text-align:center; margin-top:10px; }

/* email gate (rendered inside a bot bubble after a few questions) */
.msg-bubble.gate{ max-width:none; }
.gate-text{ margin:0; }
.gate-form{ display:flex; gap:6px; margin-top:10px; }
.gate-input{
  flex:1; min-width:0; font-family:var(--f-body); font-size:13px; color:var(--text);
  background:rgba(255,255,255,0.9); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:8px 12px; outline:none;
}
.gate-input:focus{ border-color:var(--rose); }
.gate-btn{
  flex-shrink:0; font-family:var(--f-body); font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--rose)); border:0; border-radius:var(--r-xl);
  padding:8px 14px; cursor:pointer; transition:transform .15s var(--ease);
}
.gate-btn:hover{ transform:scale(1.04); }
.gate-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.gate-consent{ font-size:11px; color:var(--text-2); margin:8px 0 0; }
.gate-error{ color:var(--coral); font-weight:600; }

/* mascot — owns the bottom band, bleeds off the bottom-right edge (outside
   the container, on purpose), and crossfades working -> waving */
.mascot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.m-img{
  position:absolute; right:var(--m-right); bottom:var(--m-bottom);
  width:var(--m-width); max-width:var(--m-size); height:auto;
  transition:opacity 900ms var(--ease);
}
.m-waving{ opacity:0; }
.mascot.is-waving .m-working{ opacity:0; }
.mascot.is-waving .m-waving{ opacity:1; }

/* widget-only elements: hidden on desktop, shown in the mobile/tablet popup */
.chat-fab, .chat-panel-head{ display:none; }

/* ---- chat as a floating widget (tablet + mobile) ------------------------
   Below 920px the inline hero chat becomes a classic chat widget: a sticky
   circular launcher in the bottom-right corner, and a pop-up panel (waving
   avatar header on top, conversation + input below) toggled by `.chat-open`
   on <body>. The desktop inline composition is untouched. */
@media (max-width:920px){
  .mascot{ display:none; }   /* desk scene isn't used in widget mode */

  /* the sticky launcher button */
  .chat-fab{
    display:block; position:fixed; right:18px; bottom:18px;
    width:62px; height:62px; padding:0; border:0; border-radius:50%;
    overflow:hidden; cursor:pointer; z-index:1001;
    background:linear-gradient(140deg,var(--coral),var(--rose));
    box-shadow:0 12px 30px rgba(179,58,130,.42);
    transition:transform .25s var(--ease);
  }
  .chat-fab img{ position:absolute; width:300%; max-width:none; height:auto; left:-78%; top:16%; }
  .chat-fab:hover{ transform:scale(1.06); }
  body.chat-open .chat-fab{ transform:scale(0); pointer-events:none; }

  /* the chat itself becomes the pop-up panel */
  .chat{
    position:fixed; right:16px; bottom:92px; left:auto; top:auto;
    width:min(384px, calc(100vw - 32px)); height:min(72vh, 560px);
    background:var(--bg); border-radius:20px; overflow:hidden;
    box-shadow:0 24px 60px rgba(20,10,30,.30);
    display:flex; flex-direction:column; z-index:1000;
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  body.chat-open .chat{ opacity:1; visibility:visible; transform:none; }

  /* panel header with the waving avatar */
  .chat-panel-head{
    display:flex; align-items:center; gap:10px; flex-shrink:0;
    padding:12px 14px; color:#fff;
    background:linear-gradient(135deg,var(--coral),var(--rose));
  }
  .cph-avatar{
    position:relative; width:42px; height:42px; border-radius:50%;
    overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.25);
  }
  .cph-avatar img{ position:absolute; width:300%; max-width:none; height:auto; left:-78%; top:12%; }
  .cph-text{ display:flex; flex-direction:column; line-height:1.15; }
  .cph-text strong{ font-family:var(--f-head); font-size:15px; font-weight:700; }
  .cph-text span{ font-size:11px; opacity:.9; }
  .cph-close{
    margin-left:auto; flex-shrink:0; width:32px; height:32px; border:0;
    border-radius:50%; background:transparent; color:#fff; font-size:24px; line-height:1;
    cursor:pointer; transition:background .2s;
  }
  .cph-close:hover{ background:rgba(255,255,255,.22); }

  /* conversation + input fill the panel in normal flow */
  .chat-stack{
    position:static; transform:none; left:auto; bottom:auto;
    width:auto; max-width:none;
    flex:1; min-height:0; display:flex; flex-direction:column;
    padding:12px 12px 14px;
  }
  .chat-log{ flex:1; min-height:0; max-height:none; }   /* fill, scroll inside */
  .chat-foot{ flex-shrink:0; margin-top:10px; }
  .chat-note{ margin-top:8px; }
}
@media (max-width:560px){
  .chat{ right:12px; bottom:84px; width:calc(100vw - 24px); height:min(76vh,600px); }
  .chat-fab{ right:14px; bottom:14px; width:58px; height:58px; }
}

/* ============================================================
   SECTIONS — header / work / about / contact
============================================================ */
.container{ width:100%; max-width:var(--max-wide); margin:0 auto; padding:0 28px; }
@media (min-width:768px){ .container{ padding:0 56px; } }

/* --- header --- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.8);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--border);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px;
}
.brand{ font-family:var(--f-head); font-weight:900; font-size:20px; letter-spacing:-1px; color:var(--text); display:inline-flex; align-items:center; }
.brand span{ color:var(--rose); }
.brand-sig{ height:38px; width:auto; display:block; opacity:.9; transition:opacity .2s; }
.brand:hover .brand-sig{ opacity:1; }
.nav-links{ display:flex; gap:32px; list-style:none; }
.nav-links a{ position:relative; font-size:15px; font-weight:500; color:var(--text-2); transition:color .2s; }
.nav-links a:hover{ color:var(--text); }
/* active section (scroll-spy) / current page */
.nav-links a.is-active,
.nav-links a[aria-current="page"]{ color:var(--rose); font-weight:700; }
.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-7px;
  height:2px; border-radius:2px; background:linear-gradient(90deg,var(--coral),var(--rose)); }
@media (max-width:640px){ .nav-links{ display:none; } }

.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--coral),var(--rose)); color:#fff;
  font-family:var(--f-body); font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:var(--r-xl); cursor:pointer; border:0;
  transition:transform .15s var(--ease);
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-primary.btn-sm{ padding:8px 16px; font-size:13px; }

/* shared section eyebrow — same treatment for Work / About / Contact */
.eyebrow{
  font-family:var(--f-body); font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--rose);
}

/* gradient accent word — ties the section headings to the hero gradient */
.grad-word{
  display:inline-block; padding-bottom:0.08em;  /* room so descenders (g, y) aren't clipped */
  background:linear-gradient(120deg,#E85D2A,var(--rose) 58%,var(--plum));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* --- work --- */
.work{ padding:200px 0 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
}
.sec-count{ font-size:12px; color:var(--text-3); }

/* colorful card grid — each project is a coloured tile (less text-heavy) */
.project-grid{
  list-style:none; display:grid; gap:18px; margin-top:44px;
  grid-template-columns:repeat(3,1fr);   /* clean 3×2 on desktop */
}
@media (max-width:840px){ .project-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .project-grid{ grid-template-columns:1fr; } }
.project-card{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:240px; padding:24px; border-radius:var(--r-lg); overflow:hidden; color:#fff;
  background-color:var(--row-color,var(--rose));
  background-image:linear-gradient(150deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.30) 130%);
  transition:transform .35s var(--ease);
}
.project-card:hover{ transform:translateY(-5px); }
.project-card::after{    /* soft decorative blob */
  content:''; position:absolute; right:-44px; bottom:-44px;
  width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,0.12);
}
/* photo-cover variant — a project screenshot behind the card, with a dark
   top+bottom scrim so the white kicker/title stay readable over it.
   The scrim is shared via --pc-scrim; the image URL is set per card below
   (kept here in the stylesheet so the ../img/ path resolves correctly). */
.project-card.pc-cover{
  --pc-scrim: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.68) 100%);
  background-size:cover;
  background-position:center;
}
.project-card.pc-admin{   background-image: var(--pc-scrim), url('../img/Admintoolcover.png'); }
.project-card.pc-teacher{ background-image: var(--pc-scrim), url('../img/teacherportalcover.png'); }
.project-card.pc-shopper{   background-image: var(--pc-scrim), url('../img/shopperappcover.png'); background-position:right center; }
.project-card.pc-peduli{  background-image: var(--pc-scrim), url('../img/pedulilindungicover.png'); }
.project-card.pc-moodlet{ background-image: var(--pc-scrim), url('../img/Moodletcover.png'); }
.project-card.pc-cover::after{ background:rgba(255,255,255,0.50); }  /* stronger so it reads over the photo */
.pc-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.pc-num{ font-family:var(--f-head); font-weight:800; font-size:14px; opacity:.9; }
.pc-cat{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.9; }
.pc-bottom{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.pc-name{ font-family:var(--f-head); font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.5px; line-height:1.05; }
.pc-arrow{ font-size:24px; flex-shrink:0; transition:transform .35s var(--ease); }
.project-card:hover .pc-arrow{ transform:translate(4px,-4px); }

/* --- about --- */
.about{ padding:200px 0 0; }
.about-eyebrow{ margin-bottom:20px; }
.about-headline{
  font-family:var(--f-head); font-size:clamp(40px,8vw,68px);
  font-weight:900; letter-spacing:-2px; line-height:1.06;
  max-width:820px; margin-bottom:64px;
}
.about-headline em{ font-style:italic; font-weight:300; color:var(--text-2); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:48px; } }
.about-body{ display:flex; flex-direction:column; gap:18px; }
.about-body p{ color:var(--text-2); line-height:1.85; }
.about-body mark{ background:transparent; color:var(--text); font-weight:600; }
.about-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.skills{ display:flex; flex-direction:column; gap:30px; }
.skill-block h4{ font-family:var(--f-head); font-size:14px; font-weight:700; margin-bottom:14px; color:var(--text); }
.skill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.sk{ font-size:13px; color:var(--text-2); padding:7px 15px; border:1px solid var(--border); border-radius:var(--r-xl); transition:border-color .2s,color .2s; }
.sk.strong{ color:var(--rose); border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.06); }
.sk.code{ color:var(--plum); border-style:dashed; border-color:var(--plum); }

/* --- contact --- */
.contact{ padding:200px 0 200px; text-align:center; }
.contact-eyebrow{ margin-bottom:28px; }
.contact-headline{
  font-family:var(--f-head); font-size:clamp(42px,7vw,100px);
  font-weight:600; letter-spacing:-2px; line-height:1.06; margin-bottom:48px;
}
.contact-headline .grad-word{ display:block; padding-bottom:0.12em; font-weight:800; }

/* icon buttons */
.contact-icons{ display:flex; align-items:center; justify-content:center; gap:18px; }
.contact-icon{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-h); color:var(--text);
  transition:transform .2s var(--ease), background .25s, color .25s, border-color .25s;
}
.contact-icon:hover{
  transform:translateY(-3px); border-color:transparent; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--rose));
}
.contact-icon svg{ width:22px; height:22px; }

/* --- scroll reveal --- */
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.fade-up.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
  .hero-line-inner{ transform:none; }
  .fade-up{ opacity:1; transform:none; }
}