/* Daejhonnel Denton — portfolio
   Coronation Market and Software */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0A0C0B;
  --ink-2:#111514;
  --ink-3:#1A201E;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --paper:#F2EFE8;
  --mute:#9AA6A0;
  --mute-2:#6E7B75;
  --gold:#E0A33C;
  --gold-d:#B37B18;
  --go:#48C08A;
  --sky:#6FA8DC;
  --maxw:1180px;
  --sans:'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--gold); color:#0A0C0B}

/* ---------- grain + glow ---------- */
body::before{
  content:''; position:fixed; inset:-50%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 78% 6%, rgba(224,163,60,.13), transparent 62%),
    radial-gradient(40vw 40vw at 8% 44%, rgba(72,192,138,.09), transparent 64%),
    radial-gradient(52vw 52vw at 52% 104%, rgba(111,168,220,.07), transparent 66%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(-2.5%,2%,0) scale(1.06) } }
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  *{scroll-behavior:auto !important}
}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:2}
section{position:relative; z-index:2}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(10,12,11,.72); border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:22px; height:66px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-width:0}
.mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(145deg,var(--gold),var(--gold-d));
  display:grid; place-items:center; color:#0A0C0B;
  font-weight:800; font-size:14px; letter-spacing:-.02em;
  box-shadow:0 3px 14px rgba(224,163,60,.32);
}
.brand b{font-weight:600; font-size:15.5px; letter-spacing:-.015em; white-space:nowrap}
.brand .stack span{
  font-family:var(--mono); font-size:10.5px; color:var(--mute-2);
  text-transform:uppercase; letter-spacing:.13em; white-space:nowrap;
}
.brand .stack{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.nav a.link{
  text-decoration:none; font-size:14.5px; color:var(--mute);
  padding:7px 2px; position:relative; transition:color .2s;
}
.nav a.link:hover{color:var(--paper)}
.nav a.link.on{color:var(--paper)}
.nav a.link.on::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--gold);
}
.nav .cta{
  font-size:14px; text-decoration:none; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--paper); transition:.2s;
  white-space:nowrap;
}
.nav .cta:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.navlinks{display:flex; align-items:center; gap:22px}
@media(max-width:760px){
  .navlinks{gap:15px}
  .nav a.link{font-size:13px}
  .nav .cta{display:none}
}
@media(max-width:460px){ .nav .wrap{padding:0 16px} .navlinks{gap:12px} }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--gold); opacity:.6}
h1,h2,h3{letter-spacing:-.035em; line-height:1.03; margin:0; font-weight:600}
h1{font-size:clamp(46px,8.2vw,104px)}
h2{font-size:clamp(30px,4.6vw,52px); letter-spacing:-.03em; line-height:1.08}
h3{font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; line-height:1.2}
.it{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.lead{font-size:clamp(17px,2vw,21px); color:var(--mute); max-width:60ch; line-height:1.6}
p{margin:0 0 1.1em}
.dim{color:var(--mute)}
.small{font-size:14.5px}

/* ---------- hero ---------- */
.hero{padding:clamp(70px,12vw,138px) 0 clamp(56px,8vw,92px)}
.hero h1{margin-bottom:26px}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln i{
  display:block; font-style:normal;
  animation:rise 1s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 .ln:nth-child(2) i{animation-delay:.09s}
.hero h1 .ln:nth-child(3) i{animation-delay:.18s}
@keyframes rise{from{transform:translateY(105%); opacity:0} to{transform:none; opacity:1}}
.hero .lead{animation:fade .9s .38s both}
.hero .herobtns{animation:fade .9s .5s both}
@keyframes fade{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.herobtns{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:13px 22px; border-radius:999px; font-size:15px; font-weight:500;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--gold); color:#0A0C0B; box-shadow:0 6px 26px rgba(224,163,60,.26)}
.btn-p:hover{box-shadow:0 10px 34px rgba(224,163,60,.38)}
.btn-g{border:1px solid var(--line-2); color:var(--paper)}
.btn-g:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}

/* ticker */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:15px 0; position:relative; z-index:2;
  background:rgba(255,255,255,.012);
}
.ticker .row{display:flex; gap:0; width:max-content; animation:slide 42s linear infinite}
.ticker:hover .row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker b{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400; color:var(--mute-2); padding:0 26px; white-space:nowrap;
}
.ticker b::after{content:'—'; margin-left:26px; color:rgba(255,255,255,.14)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

/* ---------- generic sections ---------- */
.sec{padding:clamp(64px,9vw,110px) 0}
.sec-head{max-width:70ch; margin-bottom:clamp(34px,5vw,58px)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.stats div{background:var(--ink); padding:26px 22px}
.stats b{display:block; font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; font-weight:600; line-height:1}
.stats span{display:block; margin-top:9px; font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--mute-2)}
@media(max-width:780px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* ---------- work cards ---------- */
.cards{display:grid; gap:22px}
.card{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); border-radius:22px; background:var(--ink-2);
  transition:border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover{border-color:var(--line-2); transform:translateY(-4px)}
.card .glow{
  position:absolute; inset:0; opacity:0; transition:opacity .45s; pointer-events:none;
  background:radial-gradient(60% 90% at 20% 0%, rgba(224,163,60,.15), transparent 70%);
}
.card:hover .glow{opacity:1}
.card-in{position:relative; padding:clamp(28px,4vw,44px); display:grid; gap:26px; grid-template-columns:1.05fr .95fr; align-items:center}
@media(max-width:880px){ .card-in{grid-template-columns:1fr} }
.card .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.card h3{margin-bottom:12px}
.card p{color:var(--mute); font-size:16px; margin:0 0 20px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:rgba(255,255,255,.02);
}
.more{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--paper); margin-top:22px}
.more .arw{transition:transform .3s}
.card:hover .more .arw{transform:translateX(5px)}

/* device / screen mock */
.mock{
  position:relative; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(160deg,#141918,#0E1211); overflow:hidden; aspect-ratio:4/3;
}
.mock{background:linear-gradient(160deg,#141918,#0E1211)}
.mock .bar{height:32px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px; background:rgba(255,255,255,.02)}
.mock .bar i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.14)}
.mock .bar em{
  font-family:var(--mono); font-style:normal; font-size:10px; color:var(--mute-2);
  margin-left:10px; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mock .body{padding:16px; display:grid; gap:9px}
.sk{height:9px; border-radius:5px; background:rgba(255,255,255,.07)}
.sk.w70{width:70%} .sk.w45{width:45%} .sk.w90{width:90%} .sk.w55{width:55%}
.sk.gold{background:linear-gradient(90deg,rgba(224,163,60,.55),rgba(224,163,60,.12))}
.sk.go{background:linear-gradient(90deg,rgba(72,192,138,.5),rgba(72,192,138,.1))}
.mrow{display:flex; gap:9px}
.mbox{flex:1; height:46px; border-radius:9px; background:rgba(255,255,255,.045); border:1px solid var(--line)}

/* ---------- process / list ---------- */
.steps{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steprow{transition:background .3s}
.steprow + .steprow{border-top:1px solid var(--line)}
.steprow:hover{background:rgba(255,255,255,.025)}
.step{padding:28px 0; display:grid; grid-template-columns:70px 1fr 1fr; gap:26px; align-items:start; transition:background .3s}

.step .n{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.1em; padding-top:5px}
.step h3{font-size:21px}
.step p{color:var(--mute); font-size:15.5px; margin:0}
@media(max-width:760px){ .step{grid-template-columns:44px 1fr; gap:16px} .step p{grid-column:2} }

/* ---------- case study ---------- */
.case-hero{padding:clamp(56px,8vw,96px) 0 clamp(34px,5vw,54px)}
.back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); text-decoration:none; margin-bottom:30px; transition:color .2s}
.back:hover{color:var(--gold)}
.meta{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; border-top:1px solid var(--line); padding-top:26px; margin-top:40px}
.meta div span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2); margin-bottom:7px}
.meta div b{font-weight:500; font-size:15px}
@media(max-width:700px){ .meta{grid-template-columns:repeat(2,1fr); gap:18px} }

.prose{max-width:70ch}
.prose h2{margin:clamp(48px,6vw,76px) 0 20px}
.prose h3{margin:38px 0 12px}
.prose p{color:#D7D3CA; font-size:17.5px}
.prose ul{color:#D7D3CA; padding-left:20px; margin:0 0 1.2em}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--paper); font-weight:600}
.pull{
  border-left:2px solid var(--gold); padding:4px 0 4px 24px; margin:34px 0;
  font-family:var(--serif); font-style:italic; font-size:clamp(21px,3vw,28px);
  line-height:1.34; color:var(--paper); letter-spacing:-.01em;
}
code, .k{font-family:var(--mono); font-size:.88em; background:rgba(255,255,255,.06); padding:2px 6px; border-radius:5px; color:var(--gold)}
.panel{
  border:1px solid var(--line); border-radius:18px; background:var(--ink-2);
  padding:clamp(24px,3.5vw,34px); margin:38px 0;
}
.panel h3{margin:0 0 14px; font-size:19px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){ .grid2,.grid3{grid-template-columns:1fr} }
.tile{border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--ink-2); transition:border-color .3s, transform .3s}
.tile:hover{border-color:var(--line-2); transform:translateY(-3px)}
.tile h3{font-size:18px; margin-bottom:9px}
.tile p{color:var(--mute); font-size:15px; margin:0}
.tile .ic{font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.13em; text-transform:uppercase; margin-bottom:14px}

/* diagram */
.flow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--mute)}
.flow .node{border:1px solid var(--line-2); border-radius:9px; padding:9px 13px; background:rgba(255,255,255,.03); color:var(--paper); white-space:nowrap}
.flow .ar{color:var(--gold)}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,60px); align-items:start}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr} }
.portrait{
  border-radius:20px; overflow:hidden; border:1px solid var(--line); position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.portrait img{width:100%; filter:saturate(1.02)}
.portrait::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,12,11,.5))}

.tl{border-left:1px solid var(--line); padding-left:28px; margin-left:6px}
.tl .job{position:relative; padding-bottom:34px}
.tl .job::before{
  content:''; position:absolute; left:-34px; top:8px; width:10px; height:10px; border-radius:50%;
  background:var(--ink); border:1.5px solid var(--gold);
}
.tl .job:last-child{padding-bottom:0}
.tl .when{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2); margin-bottom:7px}
.tl .job h3{font-size:19px; margin-bottom:4px}
.tl .job .co{color:var(--gold); font-size:14.5px; margin-bottom:10px}
.tl .job p{color:var(--mute); font-size:15.5px; margin:0}

.skillset{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px}
.skillset h3{font-size:14px; font-family:var(--mono); font-weight:400; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.skillset ul{list-style:none; margin:0; padding:0}
.skillset li{color:var(--mute); font-size:15px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,56px); align-items:start}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr} }
.cline{display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding-left .25s}
.cline:hover{padding-left:8px}
.cline .ic{
  width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:17px;
}
.cline .t span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2)}
.cline .t b{font-weight:500; font-size:17px; letter-spacing:-.01em}
.cline .arw{margin-left:auto; color:var(--mute-2); transition:transform .25s, color .25s}
.cline:hover .arw{transform:translateX(4px); color:var(--gold)}

/* ---------- cta band ---------- */
.band{
  border:1px solid var(--line); border-radius:24px; padding:clamp(36px,6vw,64px);
  background:linear-gradient(150deg,rgba(224,163,60,.10),rgba(72,192,138,.05) 60%,transparent);
  text-align:center;
}
.band h2{margin-bottom:16px}
.band .lead{margin:0 auto}
.band .herobtns{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:44px 0 60px; margin-top:clamp(60px,8vw,100px); position:relative; z-index:2}
.fgrid{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
footer .small{color:var(--mute-2)}
.flinks{display:flex; gap:20px; flex-wrap:wrap}
.flinks a{font-size:14px; color:var(--mute); text-decoration:none; transition:color .2s}
.flinks a:hover{color:var(--gold)}

/* whatsapp float */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#06281A; text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.34);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px; height:27px}
@media print{ .wa,.nav{display:none} }

/* let panels and tile grids breathe wider than the reading measure */
@media(min-width:1080px){
  .prose > .panel, .prose > .grid2, .prose > .grid3, .prose > .pull{ width:calc(100% + 230px) }
}

/* --- small-screen nav + hero corrections --- */
.brand b{overflow:hidden; text-overflow:ellipsis}
.nav .wrap{gap:14px}
@media(max-width:600px){
  .brand .stack{display:none}
  .navlinks{gap:16px; margin-left:auto}
}
@media(max-width:400px){ .navlinks{gap:13px} .nav a.link{font-size:12.5px} }
@media(max-width:520px){
  h1{font-size:clamp(38px,10.5vw,54px)}
  .hero{padding-top:54px}
  .hero .lead{font-size:16.5px}
  .btn{padding:12px 18px; font-size:14.5px}
  .wa{width:48px; height:48px; right:14px; bottom:14px}
  .wa svg{width:24px; height:24px}
}
.hero h1 .ln{padding-bottom:.06em; margin-bottom:-.06em}

/* blend the portrait into the dark page */
.portrait::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(115% 92% at 50% 26%, transparent 42%, rgba(10,12,11,.42) 88%, rgba(10,12,11,.62)),
    linear-gradient(180deg, rgba(224,163,60,.06), transparent 40%);
}
.portrait::after{z-index:3}
.portrait img{filter:saturate(1.02) contrast(1.03)}