:root{--bg:#080b12;--bg2:#0d111b;--card:#111725;--text:#f7f8fb;--muted:#9da6b5;--line:rgba(255,255,255,.11);--blue:#2e7df6;--blue2:#7eb5ff;--lime:#c6ff00;--light:#f2f4f8;--dark:#0b0f17;--max:1200px;--radius:28px;--font-title:'Manrope',sans-serif;--font-body:'Inter',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.skip-link{position:absolute;left:-9999px;top:10px;background:#fff;color:#000;padding:10px;z-index:999}.skip-link:focus{left:10px}.site-header{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(8,11,18,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#1846ae);display:grid;place-items:center;font:800 20px var(--font-title);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}.brand-copy{display:grid;line-height:1.05}.brand-copy strong{font:700 17px var(--font-title);letter-spacing:.01em}.brand-copy small{margin-top:4px;color:var(--muted);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.desktop-nav{display:flex;align-items:center;gap:34px;margin-left:auto}.desktop-nav a{position:relative;color:#c9cfda;font-size:13px;font-weight:600}.desktop-nav a:hover,.desktop-nav a.active{color:#fff}.desktop-nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--blue)}.header-actions{display:flex;align-items:center;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 22px;border-radius:14px;font-weight:600;font-size:14px;border:1px solid transparent;transition:.22s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 30px rgba(46,125,246,.24)}.btn-outline{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.03)}.btn-light{background:#fff;color:#0b1020}.btn-compact{min-height:44px;padding:0 17px}.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;color:#111;border-radius:12px;padding:12px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:#111;margin:4px 0}.mobile-menu{position:absolute;left:16px;right:16px;top:70px;background:#111725;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 24px 70px rgba(0,0,0,.45)}.mobile-menu a{display:block;padding:13px 14px;border-radius:10px}.mobile-menu a:hover{background:rgba(255,255,255,.06)}
.hero{min-height:760px;height:100vh;max-height:950px;position:relative;display:flex;align-items:center;overflow:hidden;padding-top:78px;background:radial-gradient(circle at 70% 40%,#15263d 0,transparent 42%),linear-gradient(120deg,#080b12 0,#0b111c 55%,#090c13 100%)}.hero-pattern{position:absolute;width:720px;height:720px;left:38%;top:8%;border-radius:50%;opacity:.34;background:repeating-radial-gradient(ellipse at center,transparent 0 15px,rgba(255,255,255,.06) 16px 17px);transform:rotate(-20deg) scaleX(1.2)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;position:relative;z-index:2}.hero-copy{padding:40px 0}.eyebrow{font:700 12px var(--font-title);letter-spacing:.18em;color:#cbd7e7;display:flex;align-items:center;gap:10px;margin-bottom:18px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(198,255,0,.12)}.hero h1,.inner-hero h1,.page-hero h1,.contact-page h1{font:800 clamp(54px,6.4vw,96px)/.94 var(--font-title);letter-spacing:-.055em;margin:0}.hero h1 span,.inner-hero h1 span,.page-hero h1 span,.contact-page h1 span{color:var(--blue2)}.hero-lead{max-width:620px;color:#b7c0cf;font-size:18px;margin:26px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-meta{margin-top:30px;display:flex;align-items:center;gap:12px;color:#8792a3;font-size:12px}.hero-meta .divider{width:34px;height:1px;background:rgba(255,255,255,.22)}.hero-visual{height:680px;align-self:end;position:relative}.hero-visual img{height:100%;width:auto;max-width:none;position:absolute;right:-18px;bottom:0;object-fit:contain;filter:contrast(1.03) saturate(.92);-webkit-mask-image:linear-gradient(to bottom,black 0 86%,transparent 100%),linear-gradient(to right,transparent 0,black 10% 90%,transparent 100%);mask-image:linear-gradient(to bottom,black 0 86%,transparent 100%)}.portrait-halo{position:absolute;right:20px;top:11%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(46,125,246,.26),transparent 66%);filter:blur(5px)}.floating-card{position:absolute;background:rgba(10,14,23,.7);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px 15px;z-index:3;box-shadow:0 20px 50px rgba(0,0,0,.25)}.floating-card strong{display:block;font-size:12px}.floating-card small{display:block;color:#8f9aac;font-size:10px;margin-top:2px}.floating-card-one{left:5%;top:23%}.floating-card-two{right:0;bottom:20%}.scroll-hint{position:absolute;left:24px;bottom:80px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#778397;font-size:9px;letter-spacing:.22em}.scroll-hint span{writing-mode:vertical-rl}.scroll-hint i{width:1px;height:42px;background:linear-gradient(#6e7a8c,transparent)}.ticker{height:74px;background:var(--blue);color:#fff;display:flex;align-items:center;overflow:hidden;border-block:1px solid rgba(255,255,255,.22)}.ticker-track{display:flex;gap:42px;white-space:nowrap;min-width:max-content;animation:ticker 25s linear infinite;font:700 18px var(--font-title)}@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding:110px 0}.split-grid{display:grid;grid-template-columns:280px 1fr;gap:70px}.section-kicker{font:700 12px var(--font-title);letter-spacing:.16em;color:#8e99ab}.section-kicker span,.section-no{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;margin-right:12px;color:var(--blue2)}.about{background:#0a0e16}.about-main h2,.section-head h2,.journey-copy h2,.resources-copy h2,.project-detail h2,.timeline-section h2,.empty-state h2{font:700 clamp(34px,4.2vw,62px)/1.08 var(--font-title);letter-spacing:-.045em;margin:0 0 25px}.about-main h2 em{color:var(--blue2);font-style:normal}.about-main p,.journey-copy p,.resources-copy p,.project-detail p{color:#a5afbf;max-width:790px}.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:5px}.focus-section{background:#f4f6f9;color:#10141c}.section-head{display:grid;grid-template-columns:280px 1fr;gap:70px;align-items:end;margin-bottom:50px}.section-head>div p,.label{font:700 11px var(--font-title);letter-spacing:.16em;color:#717c8c;margin-top:12px}.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.focus-card{min-height:310px;background:#fff;border:1px solid #dde2ea;border-radius:24px;padding:28px;display:flex;flex-direction:column;box-shadow:0 15px 40px rgba(16,24,40,.05);transition:.2s}.focus-card:hover{transform:translateY(-6px);border-color:#b7c4d8}.focus-card>span{font:700 12px var(--font-title);color:#2e7df6}.focus-card h3{font:700 25px var(--font-title);margin:auto 0 14px}.focus-card p{color:#677181;font-size:14px;margin:0}.journey{background:#0a0e16}.journey-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:65px;align-items:center}.journey-media{position:relative}.journey-media:after{content:'';position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(126,181,255,.38);border-radius:24px;z-index:0}.journey-media img{border-radius:24px;position:relative;z-index:1;filter:saturate(.82)}.journey-copy{padding-left:10px}.mini-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.mini-points span,.project-tags span,.feature-list span{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:11px;color:#c8d0dc}.projects-preview{background:#0d121c}.project-feature{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:linear-gradient(135deg,#101828,#0b101a)}.project-copy{padding:50px}.project-badge{display:inline-flex;background:rgba(46,125,246,.13);border:1px solid rgba(126,181,255,.35);color:#9ac5ff;border-radius:999px;padding:7px 11px;font:700 10px var(--font-title);letter-spacing:.15em}.project-copy h3{font:800 clamp(40px,4vw,64px) var(--font-title);letter-spacing:-.045em;margin:20px 0 15px}.project-copy p{color:#9fa9b9}.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.project-visual{background:radial-gradient(circle at 50% 50%,rgba(46,125,246,.3),transparent 55%);min-height:480px;display:grid;place-items:center;padding:35px}.app-window{width:min(570px,95%);border-radius:18px;background:#f9fafc;color:#111;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:perspective(1000px) rotateY(-7deg) rotateX(2deg);overflow:hidden}.app-top{height:42px;background:#eef1f6;display:flex;align-items:center;gap:7px;padding:0 14px}.app-top span{width:8px;height:8px;border-radius:50%;background:#c3c8d1}.app-top b{font:600 10px var(--font-body);margin-left:8px;color:#596273}.app-body{display:grid;grid-template-columns:70px 1fr;min-height:310px}.app-body aside{background:#0f172a;padding:18px 14px}.app-body aside i{display:block;height:10px;background:#29334a;border-radius:4px;margin:0 0 14px}.app-main{padding:24px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-row span{height:65px;background:#edf3ff;border-radius:10px}.chart{height:110px;margin:16px 0;background:linear-gradient(180deg,#d9e8ff,#f7f9fc);border-radius:12px;position:relative;overflow:hidden}.chart:after{content:'';position:absolute;left:0;right:0;bottom:27px;height:2px;background:#2e7df6;transform:skewY(-8deg)}.rows{display:grid;gap:8px}.rows i{height:14px;border-radius:6px;background:#edf0f5}.resources-preview{background:#f4f6f9;color:#10141c}.resources-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.resources-copy p{color:#6b7482}.resources-copy .section-no{border-color:#d5dbe4}.resource-cards{display:grid;gap:12px}.resource-card{min-height:116px;background:#fff;border:1px solid #dfe4eb;border-radius:18px;padding:22px;display:grid;grid-template-columns:50px 1fr;align-items:center}.resource-card span{grid-row:1/3;color:#2e7df6;font:700 12px var(--font-title)}.resource-card strong{font:700 18px var(--font-title)}.resource-card small{color:#7b8492}.cta-section{background:var(--blue);padding:72px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-inner p{font:700 11px var(--font-title);letter-spacing:.16em;margin:0 0 8px}.cta-inner h2{font:700 clamp(30px,4vw,56px)/1.05 var(--font-title);letter-spacing:-.04em;max-width:780px;margin:0}.site-footer{padding:55px 0 90px;background:#070a10;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:40px}.footer-brand{margin-bottom:18px}.footer-grid p{color:#7f8998;max-width:440px}.footer-links{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:10px 30px;align-content:start}.footer-links a{color:#b9c1ce;font-size:13px}.footer-bottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#667181;font-size:11px}.mobile-bottom-nav{display:none}
.inner-hero{min-height:760px;padding-top:130px;background:radial-gradient(circle at 75% 35%,#1a2a45 0,transparent 38%)}.inner-hero-grid{display:grid;grid-template-columns:1fr .72fr;align-items:center;min-height:620px}.inner-hero p,.page-hero p,.contact-page p{max-width:650px;color:#aab4c3;font-size:17px}.inner-portrait{height:620px;overflow:hidden;position:relative}.inner-portrait:before{content:'';position:absolute;inset:10% 0 0;border-radius:50% 50% 12% 12%;background:linear-gradient(145deg,rgba(46,125,246,.24),rgba(255,255,255,.02))}.inner-portrait img{height:100%;width:100%;object-fit:contain;position:relative;z-index:1;-webkit-mask-image:linear-gradient(#000 0 92%,transparent)}.profile-story{background:#0a0e16}.timeline-section{background:#f4f6f9;color:#10141c}.timeline{border-top:1px solid #d9dee6}.timeline article{display:grid;grid-template-columns:80px 1fr;padding:28px 0;border-bottom:1px solid #d9dee6}.timeline article>span{color:#2e7df6;font:700 12px var(--font-title)}.timeline h3{font:700 24px var(--font-title);margin:0 0 8px}.timeline p{color:#697381;margin:0}.page-hero{padding:180px 0 110px;background:radial-gradient(circle at 80% 20%,rgba(46,125,246,.24),transparent 35%)}.page-hero p{margin-top:24px}.project-detail{background:#0a0e16}.project-detail-grid{display:grid;grid-template-columns:1.1fr .7fr;gap:70px;align-items:start}.project-detail .lead{font-size:20px;color:#d7dde7}.feature-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.project-side{position:relative}.project-side img{border-radius:24px;max-height:650px;width:100%;object-fit:cover;object-position:top}.quote-card{position:absolute;left:-35px;right:25px;bottom:25px;background:rgba(10,14,23,.86);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:16px;padding:18px;font:600 14px var(--font-title)}.upcoming{background:#f4f6f9;color:#10141c}.placeholder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.placeholder-grid article{background:#fff;border:1px solid #dfe4eb;border-radius:20px;padding:30px}.placeholder-grid span{color:#2e7df6;font:700 12px var(--font-title)}.placeholder-grid h3{font:700 24px var(--font-title);margin:28px 0 8px}.placeholder-grid p{color:#707a88}.empty-state{max-width:780px;border:1px solid var(--line);border-radius:26px;padding:50px}.empty-state>span{color:var(--blue2);font:700 11px var(--font-title);letter-spacing:.16em}.empty-state p{color:#9aa4b4}.contact-page{padding:150px 0 100px;min-height:100vh;background:radial-gradient(circle at 75% 40%,rgba(46,125,246,.25),transparent 35%)}.contact-grid{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:60px}.email-card{margin-top:35px;display:grid;grid-template-columns:1fr auto;gap:5px 20px;border:1px solid var(--line);padding:20px;border-radius:18px;max-width:560px;background:rgba(255,255,255,.03)}.email-card small{font-size:10px;letter-spacing:.15em;color:#7f8b9d}.email-card strong{grid-column:1;font-size:17px}.email-card span{grid-column:2;grid-row:1/3;align-self:center;font-size:24px;color:var(--blue2)}.contact-visual img{border-radius:28px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.12s}
@media(max-width:1050px){.desktop-nav{gap:20px}.desktop-nav a{font-size:12px}.hero-grid{grid-template-columns:1fr 1fr}.hero-visual{height:590px}.floating-card{display:none}.focus-grid{grid-template-columns:repeat(2,1fr)}.split-grid,.section-head{grid-template-columns:220px 1fr;gap:40px}.journey-grid,.resources-grid,.project-detail-grid{gap:35px}}
@media(max-width:820px){body{padding-bottom:68px}.container{width:min(var(--max),calc(100% - 32px))}.desktop-nav,.header-actions .btn{display:none}.menu-toggle{display:block}.header-inner{height:66px}.site-header{background:rgba(8,11,18,.94)}.hero{height:auto;min-height:900px;padding-top:95px;align-items:stretch}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:30px 0 0;z-index:4}.hero h1{font-size:clamp(48px,13vw,74px)}.hero-lead{font-size:16px;max-width:90%}.hero-meta{display:none}.hero-visual{height:510px;margin-top:-25px}.hero-visual img{right:50%;transform:translateX(50%);height:520px}.portrait-halo{right:50%;transform:translateX(50%);width:390px;height:390px}.hero-pattern{left:-30%;top:40%;width:600px;height:600px}.scroll-hint{display:none}.ticker{height:58px}.ticker-track{font-size:14px;gap:28px}.section{padding:75px 0}.split-grid,.section-head,.journey-grid,.resources-grid,.project-feature,.inner-hero-grid,.project-detail-grid,.contact-grid{grid-template-columns:1fr}.section-head{gap:22px}.section-kicker{margin-bottom:10px}.focus-grid{grid-template-columns:1fr 1fr}.focus-card{min-height:250px}.journey-grid{gap:40px}.journey-copy{padding:0}.project-copy{padding:32px}.project-visual{min-height:370px;padding:25px}.app-window{transform:none}.resources-grid{gap:35px}.cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-bottom{gap:12px;flex-direction:column}.mobile-bottom-nav{position:fixed;z-index:1100;left:10px;right:10px;bottom:8px;height:58px;background:rgba(12,17,27,.93);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:repeat(4,1fr);padding:4px}.mobile-bottom-nav a{display:grid;place-items:center;align-content:center;gap:1px;color:#7f8998;border-radius:13px}.mobile-bottom-nav a.active{background:rgba(46,125,246,.15);color:#a9cfff}.mobile-bottom-nav span{font-size:16px;line-height:1}.mobile-bottom-nav small{font-size:9px}.inner-hero{padding-top:100px}.inner-hero-grid{min-height:auto}.inner-portrait{height:520px}.page-hero{padding:135px 0 75px}.page-hero h1,.contact-page h1{font-size:clamp(46px,12vw,68px)}.project-side{max-width:520px}.quote-card{left:18px}.contact-page{padding-top:130px}.contact-visual{order:-1}.contact-visual img{max-height:420px;width:100%;object-fit:cover;object-position:center 28%}}
@media(max-width:540px){.container{width:calc(100% - 26px)}.brand-copy small{display:none}.hero{min-height:850px}.hero-copy{padding-top:10px}.eyebrow{font-size:10px}.hero h1{font-size:50px}.hero-lead{font-size:15px;line-height:1.65;max-width:100%}.hero-actions .btn{width:100%}.hero-visual{height:430px}.hero-visual img{height:445px}.focus-grid{grid-template-columns:1fr}.focus-card{min-height:220px}.about-main h2,.section-head h2,.journey-copy h2,.resources-copy h2,.project-detail h2,.timeline-section h2,.empty-state h2{font-size:35px}.section-head>div{display:flex;align-items:center;gap:8px}.section-head>div p{margin:0}.project-copy{padding:26px}.project-visual{min-height:280px}.app-body{min-height:220px}.journey-media:after{display:none}.resource-card{grid-template-columns:40px 1fr}.footer-links{grid-template-columns:1fr 1fr}.inner-portrait{height:460px}.timeline article{grid-template-columns:50px 1fr}.empty-state{padding:30px}.email-card strong{font-size:14px;word-break:break-all}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   HOMEPAGE HERO — v0.3.0
   Tuned against the real desktop render.
   ========================================================= */
.hero-home .hero-glow{position:absolute;inset:0;pointer-events:none}
.hero-home .meta-item{display:inline-flex;align-items:center;gap:8px}
.hero-home .meta-item svg{width:16px;height:16px;fill:none;stroke:#4f91ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hero-home .floating-card{display:flex;align-items:center;gap:12px}
.hero-home .floating-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#245cb7,#0f3778);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);flex:0 0 auto}
.hero-home .floating-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:821px){
  :root{--max:1260px}
  .site-header{background:rgba(6,10,17,.93);border-bottom-color:rgba(255,255,255,.09)}
  .header-inner{height:74px}
  .desktop-nav{gap:31px}
  .desktop-nav a{font-size:12px;font-weight:600}
  .desktop-nav a.active:after{bottom:-13px}
  .header-actions .btn{min-height:44px;border-radius:13px;padding-inline:20px}

  .hero-home{
    height:clamp(670px,78vh,720px);
    min-height:670px;
    max-height:720px;
    padding-top:74px;
    background:
      radial-gradient(circle at 72% 45%,rgba(31,78,140,.27) 0,rgba(15,42,77,.13) 24%,transparent 49%),
      radial-gradient(circle at 30% 70%,rgba(16,56,112,.10),transparent 35%),
      linear-gradient(118deg,#070b12 0%,#09111d 52%,#0a1220 100%);
  }
  .hero-home .hero-grid{height:100%;grid-template-columns:54% 46%;gap:0;align-items:center}
  .hero-home .hero-copy{align-self:center;padding:8px 0 0;position:relative;z-index:5}
  .hero-home .eyebrow{font-size:11px;margin-bottom:15px;letter-spacing:.19em;color:#e6edf8}
  .hero-home .status-dot{width:7px;height:7px;box-shadow:0 0 0 5px rgba(198,255,0,.10),0 0 18px rgba(198,255,0,.5)}
  .hero-home h1{font-size:clamp(72px,5.55vw,92px);line-height:.91;letter-spacing:-.062em;max-width:590px}
  .hero-home h1 span{color:#6ea8ff;text-shadow:0 10px 45px rgba(46,125,246,.11)}
  .hero-home .hero-lead{font-size:16px;line-height:1.7;max-width:575px;margin:22px 0 25px;color:#b9c5d7}
  .hero-home .hero-actions{gap:12px}
  .hero-home .hero-actions .btn{min-height:52px;padding-inline:23px;border-radius:14px}
  .hero-home .hero-meta{margin-top:25px;gap:13px;color:#8f9caf}
  .hero-home .hero-meta .divider{width:26px;background:rgba(255,255,255,.28)}

  .hero-home .hero-pattern{
    width:790px;height:790px;left:39%;top:-7%;opacity:.28;
    background:repeating-radial-gradient(circle at center,transparent 0 17px,rgba(92,142,209,.10) 18px 19px);
    transform:none;
  }
  .hero-home .hero-glow{background:linear-gradient(90deg,rgba(5,8,14,.78) 0%,rgba(5,8,14,.26) 38%,transparent 56%);z-index:1}
  .hero-home .hero-visual{height:100%;align-self:stretch;position:relative;z-index:3;overflow:visible}
  .hero-home .portrait-halo{right:4%;top:12%;width:500px;height:500px;background:radial-gradient(circle,rgba(46,125,246,.22) 0,rgba(46,125,246,.08) 39%,transparent 69%);filter:blur(9px)}
  .hero-home .hero-person{
    position:absolute;
    right:16px;
    top:34px;
    bottom:auto;
    height:760px;
    width:auto;
    max-width:none;
    object-fit:contain;
    filter:contrast(1.025) saturate(.97) drop-shadow(0 30px 42px rgba(0,0,0,.36));
    -webkit-mask-image:none;
    mask-image:none;
    transform:none;
  }

  .hero-home .floating-card{
    min-width:210px;
    padding:12px 15px 12px 12px;
    border-radius:15px;
    background:rgba(7,14,25,.85);
    border:1px solid rgba(165,192,229,.25);
    box-shadow:0 18px 55px rgba(0,0,0,.30),0 12px 25px rgba(13,78,174,.08);
  }
  .hero-home .floating-card:after{content:'';position:absolute;left:50%;bottom:-2px;width:62px;height:2px;transform:translateX(-50%);background:#2e7df6;filter:blur(3px);opacity:.75}
  .hero-home .floating-card strong{font-size:12px;color:#fff}
  .hero-home .floating-card small{font-size:9px;color:#95a4b9;margin-top:1px}
  .hero-home .floating-card-one{left:-14%;top:31%}
  .hero-home .floating-card-two{right:-3%;bottom:18%}

  .hero-home .scroll-hint{left:24px;bottom:46px}
  .ticker{height:64px;background:linear-gradient(90deg,#173f85 0%,#245cae 43%,#173f85 100%);border-block-color:rgba(255,255,255,.16)}
  .ticker-track{gap:0;font-size:15px;animation-duration:32s}
  .ticker-track span{display:inline-flex;align-items:center;padding:0 27px;position:relative}
  .ticker-track span:not(:last-child):after{content:'';width:1px;height:23px;background:rgba(255,255,255,.30);position:absolute;right:0}
}

@media (min-width:1400px){
  .hero-home .hero-grid{grid-template-columns:53% 47%}
  .hero-home .hero-person{right:22px;height:775px;top:27px}
  .hero-home .floating-card-one{left:-10%;top:31%}
  .hero-home .floating-card-two{right:-2%;bottom:18%}
}

@media (max-width:1200px) and (min-width:821px){
  .hero-home .hero-grid{grid-template-columns:53% 47%}
  .hero-home h1{font-size:72px}
  .hero-home .hero-lead{font-size:15px;max-width:520px}
  .hero-home .hero-person{height:700px;right:-4px;top:54px}
  .hero-home .floating-card-one{left:-8%;top:31%}
  .hero-home .floating-card-two{right:-2%;bottom:18%}
}

@media (max-width:980px) and (min-width:821px){
  .hero-home h1{font-size:66px}
  .hero-home .hero-person{height:655px;right:-28px;top:68px}
  .hero-home .floating-card{display:none}
}

@media (max-width:820px){
  .hero-home{background:radial-gradient(circle at 50% 70%,rgba(32,80,147,.28),transparent 38%),linear-gradient(180deg,#070b12,#0a1220)}
  .hero-home .hero-pattern{opacity:.20}
  .hero-home .hero-copy{text-align:left}
  .hero-home .hero-visual{overflow:hidden}
  .hero-home .hero-person{content:url('../img/alfie-hero-cutout.webp');max-width:none;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(0,0,0,.35));-webkit-mask-image:none;mask-image:none}
  .hero-home .floating-card{display:none}
  .hero-home .meta-item svg{display:none}
}

@media (max-width:540px){
  .hero-home .hero-visual{height:455px;margin-top:-8px}
  .hero-home .hero-person{height:500px;right:50%;transform:translateX(50%);bottom:-38px;top:auto}
}

/* =========================================================
   FACTUAL CONTENT LAYER — v0.4.0
   All public copy is limited to supplied/verified information.
   ========================================================= */
.hero-role{display:inline-flex;align-items:center;margin:18px 0 0;padding:7px 11px;border:1px solid rgba(126,181,255,.24);border-radius:999px;color:#d9e7fb;background:rgba(46,125,246,.08);font-size:12px;font-weight:600}
.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:30px 0 6px}.fact-grid article{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);padding:20px;min-height:132px;display:flex;flex-direction:column}.fact-grid small{color:#7f8b9e;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.fact-grid strong{font:700 18px var(--font-title);margin:12px 0 4px}.fact-grid span{color:#9ba7b9;font-size:12px;line-height:1.55}
.achievements-preview{background:#f4f6f9;color:#111722}.achievement-list{display:grid;border-top:1px solid #d9dfe8;margin-bottom:26px}.achievement-item{display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:center;padding:25px 0;border-bottom:1px solid #d9dfe8}.achievement-year{font:800 28px var(--font-title);color:#2e7df6}.achievement-item h3{font:700 18px/1.35 var(--font-title);margin:0 0 7px;max-width:760px}.achievement-item p{margin:0;color:#697485;font-size:13px}.level-badge{font:700 10px var(--font-title);letter-spacing:.08em;text-transform:uppercase;color:#1557bb;background:#e7f0ff;border:1px solid #bdd4f9;border-radius:999px;padding:8px 10px;white-space:nowrap}.achievements-preview .text-link{color:#111722;border-bottom-color:#9aa6b5}
.verified-points{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.verified-points span{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:11px;color:#c8d0dc;background:rgba(255,255,255,.025)}
.profile-table{display:grid;border-top:1px solid var(--line)}.profile-table>div{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}.profile-table span{color:#7f8b9b;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.profile-table strong{font:600 16px/1.6 var(--font-body);color:#eef3fa}.factual-timeline article>span{font-size:11px;line-height:1.2;text-align:center}.source-note{margin-top:28px;padding:15px 18px;border-left:3px solid var(--blue);background:rgba(46,125,246,.07);color:#8e9bac;font-size:12px;line-height:1.7}.project-detail .source-note{max-width:760px}.clean-project-side:after{display:none}.clean-project-side img{border-radius:26px}
.achievement-page-list{display:grid;gap:14px}.achievement-card{display:grid;grid-template-columns:145px 1fr;gap:32px;align-items:center;padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#101725,#0b1019)}.achievement-card-year{font:800 clamp(34px,4vw,58px) var(--font-title);color:#6ea8ff}.achievement-card h2{font:700 clamp(20px,2vw,28px)/1.35 var(--font-title);margin:0 0 10px}.achievement-card p{margin:0 0 5px;color:#d7deea}.achievement-card span{color:#8d9aae;font-size:12px}
.involvement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.involvement-card{min-height:260px;border:1px solid var(--line);border-radius:22px;padding:28px;background:linear-gradient(145deg,#101725,#0a0f18)}.involvement-card>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(126,181,255,.28);border-radius:50%;color:#7eb5ff;font:700 11px var(--font-title)}.involvement-card h2{font:700 21px/1.3 var(--font-title);margin:55px 0 12px}.involvement-card p{margin:0;color:#98a5b7;font-size:13px}.document-note{padding-top:0}.notice-box{border:1px solid rgba(126,181,255,.2);border-radius:20px;padding:24px;background:rgba(46,125,246,.06)}.notice-box strong{font:700 13px var(--font-title);color:#dbe9ff}.notice-box p{color:#94a1b3;font-size:13px;margin:8px 0 0;max-width:850px}.contact-facts{display:grid;gap:7px;margin-top:24px;color:#8f9bad;font-size:12px}.footer-trust{max-width:650px!important;font-size:11px!important;color:#6f7b8c!important;margin-top:14px!important}

@media(max-width:900px){.achievement-item{grid-template-columns:90px 1fr}.achievement-item .level-badge{grid-column:2;justify-self:start}.involvement-grid{grid-template-columns:1fr 1fr}.achievement-card{grid-template-columns:110px 1fr}.profile-table>div{grid-template-columns:170px 1fr}}
@media(max-width:620px){.fact-grid{grid-template-columns:1fr}.achievement-item{grid-template-columns:1fr;gap:8px}.achievement-item .level-badge{grid-column:1}.achievement-year{font-size:24px}.involvement-grid{grid-template-columns:1fr}.achievement-card{grid-template-columns:1fr;gap:12px;padding:24px}.achievement-card-year{font-size:34px}.profile-table>div{grid-template-columns:1fr;gap:5px;padding:18px 0}.hero-role{font-size:10px}.verified-points span{font-size:10px}}

/* =========================================================
   LIGHT CONTENT SYSTEM — v0.5.0
   Design rule: one dark content section per page only.
   The hero remains dark; all content below it is light.
   ========================================================= */
:root{
  --paper:#ffffff;
  --paper-soft:#f6f8fb;
  --paper-blue:#f2f6fc;
  --ink:#101722;
  --ink-soft:#5f6b7b;
  --light-line:#dfe5ed;
  --light-blue:#2e7df6;
}

body{background:var(--paper);color:var(--ink)}
main{background:var(--paper)}

/* Dark area: hero only */
.hero,.inner-hero,.page-hero,.contact-page{color:#f7f8fb}
.hero p,.inner-hero p,.page-hero p,.contact-page p{color:#aab4c3}
.hero .eyebrow,.inner-hero .eyebrow,.page-hero .eyebrow,.contact-page .eyebrow{color:#cbd7e7}

/* Every standard section becomes light */
.section,.about,.journey,.projects-preview,.project-detail,.profile-story,.timeline-section,
.achievements-preview,.resources-preview,.upcoming,.document-note{
  background:var(--paper);
  color:var(--ink);
}
.achievements-preview,.projects-preview,.timeline-section,.document-note{background:var(--paper-soft)}

.section-kicker{color:#6e7a8a}
.section-kicker span,.section-no{border-color:#d8e0ea;color:var(--light-blue);background:#fff}
.section-head>div p,.label{color:#6e7988}
.about-main h2,.section-head h2,.journey-copy h2,.resources-copy h2,.project-detail h2,.timeline-section h2,.empty-state h2{color:var(--ink)}
.about-main h2 em{color:var(--light-blue)}
.about-main p,.journey-copy p,.resources-copy p,.project-detail p{color:var(--ink-soft)}
.text-link{color:#162033;border-bottom-color:#9aa8ba}
.text-link:hover{color:var(--light-blue);border-bottom-color:var(--light-blue)}

/* Homepage profile facts */
.fact-grid article{background:#fff;border-color:var(--light-line);box-shadow:0 12px 35px rgba(24,39,62,.045)}
.fact-grid small{color:#7b8797}
.fact-grid strong{color:#172131}
.fact-grid span{color:#667385}

/* Homepage achievements */
.achievements-preview{color:var(--ink)}
.achievement-list{border-top-color:#d8e0e9}
.achievement-item{border-bottom-color:#d8e0e9}
.achievement-item h3{color:#172131}
.achievement-item p{color:#687586}
.achievements-preview .text-link{color:#172131;border-bottom-color:#a7b1bf}

/* Homepage involvement */
.journey-media:after{border-color:#c8d8ee}
.journey-media img{filter:saturate(.9);box-shadow:0 20px 55px rgba(23,39,63,.10)}
.verified-points span,.mini-points span{
  border-color:#d7e0eb;
  color:#3f4d5f;
  background:#f8fafc;
}

/* Homepage project card: light, not a second dark section */
.project-feature{
  border-color:#dce4ee;
  background:#fff;
  box-shadow:0 20px 60px rgba(24,39,62,.07);
}
.project-copy h3{color:#111a28}
.project-copy p{color:#637083}
.project-tags span,.feature-list span{
  border-color:#d6e0ec;
  color:#445267;
  background:#f8fafc;
}
.project-visual{
  background:radial-gradient(circle at 50% 50%,rgba(46,125,246,.16),transparent 58%),#f3f7fd;
}
.project-badge{color:#1d5dbf;background:#edf5ff;border-color:#bfd7fb}

/* Profile page */
.profile-table{border-top-color:#dce3ec}
.profile-table>div{border-bottom-color:#dce3ec}
.profile-table span{color:#758194}
.profile-table strong{color:#182231}
.timeline{border-top-color:#d8e0e9}
.timeline article{border-bottom-color:#d8e0e9}
.timeline h3{color:#182231}
.timeline p{color:#687586}

/* Achievement page cards */
.achievement-card{
  background:#fff;
  border-color:#dce4ee;
  box-shadow:0 12px 36px rgba(22,38,61,.05);
}
.achievement-card-year{color:var(--light-blue)}
.achievement-card h2{color:#151f2e}
.achievement-card p{color:#465365}
.achievement-card span{color:#778396}

/* Involvement page cards */
.involvement-card{
  background:#fff;
  border-color:#dce4ee;
  box-shadow:0 12px 34px rgba(22,38,61,.045);
}
.involvement-card>span{border-color:#bcd3f5;color:#2671e4;background:#f1f6fd}
.involvement-card h2{color:#172131}
.involvement-card p{color:#667486}
.notice-box{border-color:#cbdcf4;background:#edf5ff}
.notice-box strong{color:#1755af}
.notice-box p{color:#5e6e82}

/* Project page */
.project-detail .lead{color:#273449}
.source-note{background:#edf5ff;color:#5e6d81;border-left-color:var(--light-blue)}
.clean-project-side img{box-shadow:0 18px 55px rgba(22,38,61,.10)}

/* Source empty state */
.empty-state{border-color:#dce4ee;background:#fff;box-shadow:0 14px 40px rgba(22,38,61,.05)}
.empty-state>span{color:#2671e4}
.empty-state p{color:#667486}

/* CTA is accent blue, not dark */
.cta-section{background:#2e7df6;color:#fff}

/* Footer is intentionally light so it does not become another dark section */
.site-footer{background:#f7f9fc;color:#172131;border-top:1px solid #dce4ee}
.site-footer .brand-copy strong{color:#172131}
.site-footer .brand-copy small{color:#6f7b8c}
.site-footer .footer-grid p{color:#687586}
.site-footer .footer-links a{color:#445267}
.site-footer .footer-links a:hover{color:#1d67d5}
.site-footer .footer-bottom{border-top-color:#dce4ee;color:#7a8696}
.site-footer .footer-trust{color:#778497!important}

/* Contact hero stays the one dark section on contact page */
.contact-page .email-card{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.contact-page .email-card small{color:#8996a9}
.contact-page .email-card strong{color:#fff}
.contact-page .contact-facts{color:#9ba8ba}

/* Mobile bottom navigation can remain a compact navigation control */
@media(max-width:820px){
  body{background:#fff}
  .section,.about,.journey,.projects-preview,.project-detail,.profile-story,.timeline-section,.achievements-preview,.document-note{color:var(--ink)}
}

/* =========================================================
   DESKTOP FIRST VIEWPORT — v0.5.1
   Goal: before the first scroll, desktop shows the dark hero only.
   Ticker and all light sections begin below the fold.
   ========================================================= */
@media (min-width:821px){
  .hero-home{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    max-height:none;
    box-sizing:border-box;
  }

  .hero-home .hero-grid{
    height:100%;
    min-height:0;
  }

  /* Keep the portrait balanced within varying desktop heights. */
  .hero-home .hero-person{
    height:clamp(560px,82dvh,760px);
    top:clamp(22px,3.5dvh,38px);
  }

  .hero-home .hero-copy{
    max-height:calc(100dvh - 110px);
  }

  /* The ticker intentionally starts after the first viewport. */
  .ticker{
    position:relative;
    z-index:4;
  }
}

/* =========================================================
   PAGE SEPARATION — v0.6.0
   Homepage = introduction only. Detail data lives on own pages.
   ========================================================= */
.single-project-list{max-width:900px}
.project-list-card{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:34px;border:1px solid var(--light-line);border-radius:24px;background:#fff;box-shadow:0 14px 42px rgba(22,38,61,.055)}
.project-list-card h2{font:700 clamp(28px,3.2vw,44px)/1.1 var(--font-title);margin:15px 0 10px;color:var(--ink)}
.project-list-card p{margin:0;color:var(--ink-soft);max-width:590px}
.smartkokum-panel{min-height:360px;border:1px solid var(--light-line);border-radius:28px;background:linear-gradient(145deg,#f7faff,#edf4ff);display:flex;flex-direction:column;justify-content:flex-end;padding:34px;box-shadow:0 18px 55px rgba(22,38,61,.08)}
.smartkokum-panel>span{font:700 11px var(--font-title);letter-spacing:.16em;color:#2671e4}
.smartkokum-panel strong{font:700 clamp(28px,3vw,42px)/1.1 var(--font-title);color:#142033;margin:12px 0}
.smartkokum-panel p{color:#667486;margin:0}
@media(max-width:820px){.mobile-bottom-nav{grid-template-columns:repeat(5,1fr)}.mobile-bottom-nav small{font-size:8px}.project-list-card{align-items:flex-start;flex-direction:column;padding:26px}.smartkokum-panel{min-height:280px}}

/* =========================================================
   PREMIUM TYPOGRAPHY SYSTEM — v0.7.0
   Display: Manrope | Body & UI: Inter
   Refines hierarchy without changing the established layout.
   ========================================================= */
html{font-synthesis:none}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.68;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}

/* Display hierarchy */
.hero h1,.inner-hero h1,.page-hero h1,.contact-page h1,
.about-main h2,.section-head h2,.journey-copy h2,.resources-copy h2,
.project-detail h2,.timeline-section h2,.empty-state h2,
.project-copy h3,.project-list-card h2,.smartkokum-panel strong{
  font-family:var(--font-title);
  text-wrap:balance;
}
.hero h1,.inner-hero h1,.page-hero h1,.contact-page h1{
  font-weight:800;
  letter-spacing:-.052em;
}
.about-main h2,.section-head h2,.journey-copy h2,.resources-copy h2,
.project-detail h2,.timeline-section h2,.empty-state h2{
  font-weight:750;
  letter-spacing:-.038em;
}

/* Small UI should feel precise, not tiny */
.desktop-nav a{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:650;
  letter-spacing:-.012em;
}
.brand-copy strong{
  font-family:var(--font-title);
  font-size:17px;
  font-weight:750;
  letter-spacing:-.018em;
}
.brand-copy small{
  font-family:var(--font-body);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
}
.btn{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:650;
  letter-spacing:-.008em;
}
.eyebrow,.section-kicker,.section-head>div p,.label,.project-badge,.smartkokum-panel>span{
  font-family:var(--font-body);
  font-weight:700;
}

/* Homepage first-screen typography */
.hero-home .eyebrow{
  font-size:11.5px;
  line-height:1.2;
  letter-spacing:.20em;
}
.hero-role{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.005em;
}
.hero-home .hero-lead{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  letter-spacing:-.014em;
}
.hero-home .hero-meta{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:-.006em;
}
.hero-home .floating-card strong{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.01em;
}
.hero-home .floating-card small{
  font-family:var(--font-body);
  font-size:10px;
  line-height:1.4;
  font-weight:450;
  letter-spacing:-.005em;
}
.ticker-track{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.012em;
}

/* Reading typography on light sections and footer */
.about-main p,.journey-copy p,.resources-copy p,.project-detail p,
.project-copy p,.project-list-card p,.smartkokum-panel p,
.achievement-card p,.involvement-card p,.notice-box p{
  line-height:1.72;
  letter-spacing:-.008em;
}
.site-footer .footer-grid p{
  font-size:13.5px;
  line-height:1.72;
}
.site-footer .footer-links a{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.008em;
}
.site-footer .footer-bottom{
  font-size:11.5px;
  letter-spacing:-.003em;
}
.site-footer .footer-trust{
  font-size:11.5px!important;
  line-height:1.7!important;
}

@media (min-width:821px){
  .hero-home h1{
    letter-spacing:-.052em;
  }
  .hero-home .hero-lead{
    font-size:17px;
    max-width:590px;
  }
  .desktop-nav a{font-size:13.5px}
}

@media (max-width:1200px) and (min-width:821px){
  .hero-home .hero-lead{font-size:16px}
  .desktop-nav a{font-size:13px}
}

@media (max-width:820px){
  body{font-size:16px;line-height:1.66}
  .hero-home .eyebrow{font-size:10.5px}
  .hero-role{font-size:11px}
  .hero-home .hero-lead{font-size:16px;line-height:1.68}
  .mobile-menu a{font-size:15px;font-weight:600}
  .site-footer .footer-grid p{font-size:13px}
}



/* =========================================================
   PREMIUM HERO PORTRAIT + 15PX MINIMUM TYPE — v0.8.0
   New supplied portrait is presented as an editorial hero card.
   No visible homepage copy is set below 15px.
   ========================================================= */
:root{
  --font-title:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
}

/* Minimum readable typography for the public homepage */
.site-header .brand-copy small,
.site-header .desktop-nav a,
.site-header .btn,
.hero-home .btn,
.mobile-menu a,
.hero-home .eyebrow,
.hero-home .hero-role,
.hero-home .hero-meta,
.hero-home .floating-card strong,
.hero-home .floating-card small,
.ticker-track,
.site-footer .brand-copy small,
.site-footer .footer-grid p,
.site-footer .footer-links a,
.site-footer .footer-bottom,
.site-footer .footer-trust,
.mobile-bottom-nav small{
  font-size:15px!important;
}

.site-header .brand-copy strong{font-size:18px}
.site-header .desktop-nav a{font-weight:650;letter-spacing:-.012em}
.site-header .btn{font-weight:700}
.hero-home .eyebrow{line-height:1.25;letter-spacing:.17em}
.hero-home .hero-role{line-height:1.5;padding:8px 13px}
.hero-home .hero-lead{font-size:18px;line-height:1.72;max-width:620px}
.hero-home .hero-meta{line-height:1.5}
.hero-home .floating-card strong{line-height:1.35}
.hero-home .floating-card small{line-height:1.45;margin-top:3px}
.ticker-track{line-height:1.35}
.site-footer .footer-grid p{line-height:1.72}
.site-footer .footer-trust{line-height:1.72!important}
.site-footer .footer-bottom{line-height:1.5}

/* Premium portrait presentation */
.hero-home .hero-visual{isolation:isolate}
.hero-home .portrait-halo{
  right:-2%;
  top:11%;
  width:560px;
  height:560px;
  background:radial-gradient(circle,rgba(54,132,255,.34) 0,rgba(29,87,173,.14) 40%,transparent 70%);
  filter:blur(14px);
}
.hero-home .hero-photo-frame{
  position:absolute;
  right:4px;
  bottom:0;
  width:min(555px,100%);
  height:calc(100% - 44px);
  max-height:690px;
  min-height:560px;
  overflow:hidden;
  border:1px solid rgba(139,184,255,.25);
  border-radius:34px 34px 10px 10px;
  background:#d9dee3;
  box-shadow:
    0 42px 95px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 64px rgba(46,125,246,.11);
  z-index:2;
}
.hero-home .hero-photo-frame:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,12,23,.15),transparent 20%,transparent 80%,rgba(5,12,23,.13)),
    linear-gradient(180deg,transparent 62%,rgba(5,10,18,.30) 100%);
}
.hero-home .hero-photo-frame:after{
  content:'';
  position:absolute;
  left:8%;right:8%;bottom:-1px;
  height:3px;
  z-index:3;
  background:linear-gradient(90deg,transparent,#4b97ff 35%,#8fc0ff 50%,#4b97ff 65%,transparent);
  box-shadow:0 -7px 28px rgba(46,125,246,.45);
}
.hero-home .hero-person{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:50% 10%!important;
  transform:none!important;
  filter:contrast(1.035) saturate(.96) brightness(.985)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.hero-home .hero-photo-shine{
  position:absolute;
  z-index:3;
  pointer-events:none;
  width:38%;
  height:130%;
  top:-20%;
  right:-15%;
  transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  opacity:.55;
}
.hero-home .floating-card{z-index:5}
.hero-home .floating-card-one{left:-12%;top:29%}
.hero-home .floating-card-two{right:-2%;bottom:17%}

@media (min-width:1400px){
  .hero-home .hero-photo-frame{right:22px;width:575px;max-height:720px}
  .hero-home .floating-card-one{left:-9%;top:30%}
}

@media (max-width:1200px) and (min-width:821px){
  .site-header .desktop-nav{gap:22px}
  .hero-home .hero-photo-frame{right:0;width:500px;min-height:535px;height:calc(100% - 58px)}
  .hero-home .floating-card-one{left:-8%;top:30%}
  .hero-home .hero-lead{font-size:17px}
}

@media (max-width:980px) and (min-width:821px){
  .site-header .desktop-nav a{font-size:15px!important}
  .hero-home .hero-photo-frame{right:-34px;width:465px;min-height:520px}
  .hero-home .floating-card{display:none}
}

@media (max-width:820px){
  .hero-home{min-height:980px}
  .hero-home .hero-visual{height:515px;margin-top:14px;overflow:visible}
  .hero-home .hero-photo-frame{
    left:50%;right:auto;bottom:0;
    transform:translateX(-50%);
    width:min(560px,94vw);
    height:500px;
    min-height:0;
    border-radius:28px 28px 8px 8px;
  }
  .hero-home .hero-person{object-position:50% 8%!important}
  .hero-home .portrait-halo{right:50%;transform:translateX(50%);top:7%;width:440px;height:440px}
  .hero-home .floating-card{display:none}
  .hero-home .eyebrow,
  .hero-home .hero-role,
  .hero-home .hero-lead{font-size:15px!important}
  .mobile-menu a{font-size:15px!important}
  .mobile-bottom-nav{height:72px;bottom:6px}
  .mobile-bottom-nav small{line-height:1.05;letter-spacing:-.035em}
}

@media (max-width:540px){
  .hero-home{min-height:930px}
  .hero-home .hero-visual{height:455px;margin-top:10px}
  .hero-home .hero-photo-frame{width:calc(100vw - 32px);height:440px;border-radius:24px 24px 8px 8px}
  .hero-home .hero-person{object-position:50% 8%!important}
  .hero-home .hero-actions .btn{font-size:15px!important}
  .site-footer .footer-links a,
  .site-footer .footer-grid p,
  .site-footer .footer-trust,
  .site-footer .footer-bottom{font-size:15px!important}
}

/* =========================================================
   PREMIUM BALANCED HERO — v0.9.0
   Goal: integrate the supplied studio portrait into the dark hero
   without allowing the bright photo panel to dominate or overlap copy.
   ========================================================= */
@media (min-width:821px){
  .hero-home{
    min-height:720px;
    background:
      radial-gradient(circle at 73% 43%,rgba(43,112,218,.25) 0,rgba(20,61,117,.12) 27%,transparent 52%),
      radial-gradient(circle at 18% 78%,rgba(25,75,151,.08),transparent 34%),
      linear-gradient(116deg,#060a11 0%,#08111e 52%,#0a1424 100%);
  }

  .hero-home .hero-grid{
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    gap:48px;
  }

  .hero-home .hero-copy{
    width:100%;
    max-width:520px;
    padding-right:0;
  }

  .hero-home h1{
    font-size:clamp(70px,5.4vw,88px);
    max-width:500px;
  }

  .hero-home .hero-role{
    max-width:100%;
    white-space:normal;
  }

  .hero-home .hero-lead{
    max-width:510px;
    margin-top:22px;
  }

  .hero-home .hero-visual{
    min-width:0;
    height:100%;
    overflow:visible;
  }

  .hero-home .portrait-halo{
    width:560px;
    height:560px;
    right:4%;
    top:50%;
    transform:translateY(-48%);
    background:radial-gradient(circle,rgba(53,130,255,.32) 0,rgba(37,100,201,.14) 38%,transparent 70%);
    filter:blur(18px);
    opacity:.9;
  }

  .hero-home .hero-photo-frame{
    top:50%;
    right:0;
    bottom:auto;
    transform:translateY(-47%);
    width:min(560px,100%);
    height:clamp(575px,72dvh,640px);
    min-height:0;
    max-height:640px;
    border-radius:30px;
    border:1px solid rgba(138,183,255,.30);
    background:#d7dde3;
    box-shadow:
      0 42px 100px rgba(0,0,0,.42),
      0 14px 42px rgba(29,87,178,.18),
      0 0 0 1px rgba(255,255,255,.045) inset;
    isolation:isolate;
  }

  .hero-home .hero-photo-frame:before{
    background:
      linear-gradient(90deg,rgba(7,15,27,.18) 0%,transparent 15%,transparent 84%,rgba(7,15,27,.12) 100%),
      linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 24%,transparent 68%,rgba(5,11,20,.28) 100%);
    box-shadow:inset 0 0 54px rgba(4,11,21,.12);
  }

  .hero-home .hero-photo-frame:after{
    left:12%;
    right:12%;
    height:2px;
    opacity:.78;
  }

  .hero-home .hero-person{
    object-fit:cover!important;
    object-position:50% 8%!important;
    filter:contrast(1.035) saturate(.94) brightness(.96)!important;
  }

  .hero-home .hero-photo-shine{
    width:28%;
    right:-9%;
    opacity:.32;
  }

  .hero-home .floating-card{
    min-width:205px;
    padding:12px 15px 12px 12px;
    background:rgba(8,16,29,.88);
    border-color:rgba(154,194,249,.27);
    box-shadow:0 18px 46px rgba(0,0,0,.34),0 8px 24px rgba(34,104,211,.10);
  }

  .hero-home .floating-card-one{
    left:-24px;
    top:22%;
  }

  .hero-home .floating-card-two{
    right:-28px;
    bottom:17%;
  }
}

@media (min-width:1400px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:56px}
  .hero-home .hero-copy{max-width:530px}
  .hero-home .hero-photo-frame{right:8px;width:575px;height:640px}
  .hero-home .floating-card-one{left:-24px}
  .hero-home .floating-card-two{right:-24px}
}

@media (max-width:1200px) and (min-width:981px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:34px}
  .hero-home .hero-copy{max-width:470px}
  .hero-home h1{font-size:68px}
  .hero-home .hero-lead{max-width:455px;font-size:16px}
  .hero-home .hero-photo-frame{width:500px;height:590px;right:0}
  .hero-home .floating-card-one{left:-18px}
  .hero-home .floating-card-two{right:-12px}
}

@media (max-width:980px) and (min-width:821px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:26px}
  .hero-home .hero-copy{max-width:430px}
  .hero-home h1{font-size:62px}
  .hero-home .hero-lead{max-width:420px;font-size:15px}
  .hero-home .hero-photo-frame{width:435px;height:555px;right:-16px}
  .hero-home .floating-card{display:none}
}

@media (max-width:820px){
  .hero-home .hero-visual{overflow:visible}
  .hero-home .hero-photo-frame{
    width:min(560px,calc(100vw - 32px));
    height:500px;
    border-radius:26px;
    border-color:rgba(138,183,255,.28);
    box-shadow:0 30px 72px rgba(0,0,0,.38),0 10px 30px rgba(31,100,207,.15);
  }
  .hero-home .hero-person{
    content:normal!important;
    object-fit:cover!important;
    object-position:50% 7%!important;
    filter:contrast(1.025) saturate(.95) brightness(.97)!important;
  }
}

@media (max-width:540px){
  .hero-home .hero-photo-frame{height:430px;border-radius:22px}
  .hero-home .hero-visual{height:448px}
}

/* =========================================================
   PREMIUM SYSTEM REFINEMENT — v1.0.0
   One-pass visual polish for the full public profile site.
   Keeps existing structure/content and uses existing imagery only.
   ========================================================= */
:root{
  --bg:#060a11;
  --bg2:#0a1220;
  --card:#0f1827;
  --text:#f8fafc;
  --muted:#9daabd;
  --line:rgba(255,255,255,.105);
  --blue:#2f80ff;
  --blue2:#72adff;
  --lime:#bfff18;
  --light:#f5f7fb;
  --dark:#0a1019;
  --paper:#ffffff;
  --paper-soft:#f6f8fb;
  --paper-blue:#eef5ff;
  --ink:#111927;
  --ink-soft:#607084;
  --light-line:#dde5ef;
  --max:1280px;
  --radius:28px;
  --font-title:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
}

html{background:#fff}
body{
  font-size:16px;
  line-height:1.7;
  letter-spacing:-.008em;
  background:#fff;
}
::selection{background:rgba(47,128,255,.26);color:inherit}
.container{width:min(var(--max),calc(100% - 56px))}
:focus-visible{outline:3px solid rgba(114,173,255,.62);outline-offset:4px}

/* Header */
.site-header{
  background:rgba(5,9,16,.86);
  border-bottom:1px solid rgba(255,255,255,.085);
  box-shadow:0 10px 35px rgba(0,0,0,.12);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.header-inner{height:82px;gap:28px}
.brand{gap:13px}
.brand-mark{
  width:42px;height:42px;border-radius:13px;
  background:linear-gradient(145deg,#3d8cff 0%,#2367d8 48%,#16489f 100%);
  color:#06101f;
  border:1px solid rgba(151,195,255,.5);
  box-shadow:0 12px 26px rgba(33,106,222,.22),inset 0 1px 0 rgba(255,255,255,.27);
}
.site-header .brand-copy strong{color:#f8fafc;font-size:18px!important;font-weight:760;letter-spacing:-.018em}
.site-header .brand-copy small{color:#9aa8ba;font-size:15px!important;font-weight:600;letter-spacing:.16em}
.desktop-nav{gap:30px}
.desktop-nav a{
  color:#b7c0cd;
  font-size:15px!important;
  font-weight:650;
  padding:10px 0;
  transition:color .18s ease,transform .18s ease;
}
.desktop-nav a:hover{color:#fff;transform:translateY(-1px)}
.desktop-nav a.active{color:#fff}
.desktop-nav a.active:after{
  left:0;right:0;bottom:-10px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,#2f80ff,#86baff);
  box-shadow:0 0 16px rgba(47,128,255,.45);
}
.header-actions .btn-primary{
  min-height:50px;
  padding-inline:22px;
  border-radius:14px;
  background:linear-gradient(135deg,#3688ff,#2470e9);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 14px 32px rgba(37,111,229,.25),inset 0 1px 0 rgba(255,255,255,.16);
}

/* Buttons */
.btn{
  min-height:52px;
  padding:0 22px;
  border-radius:14px;
  font-size:15px!important;
  font-weight:700;
  letter-spacing:-.012em;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,#3588ff 0%,#2877ef 56%,#2269db 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 16px 36px rgba(35,108,224,.24),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{box-shadow:0 20px 44px rgba(35,108,224,.31),inset 0 1px 0 rgba(255,255,255,.20)}
.btn-outline{background:rgba(255,255,255,.035);border-color:rgba(191,208,232,.29);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(191,208,232,.42)}

/* Homepage hero */
.hero-home{
  background:
    radial-gradient(circle at 72% 43%,rgba(42,116,231,.28) 0%,rgba(24,72,145,.13) 30%,transparent 55%),
    radial-gradient(circle at 10% 70%,rgba(41,92,171,.10),transparent 31%),
    linear-gradient(118deg,#050910 0%,#07101d 48%,#0a1526 100%);
}
.hero-home:before{
  content:'';position:absolute;inset:82px 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(100,158,244,.18),transparent);
  pointer-events:none;
}
.hero-home .hero-pattern{
  width:760px;height:760px;left:39%;top:2%;opacity:.23;
  background:repeating-radial-gradient(ellipse at center,transparent 0 17px,rgba(128,176,244,.095) 18px 19px);
  transform:rotate(-17deg) scaleX(1.17);
}
.hero-home .hero-glow{
  background:
    linear-gradient(90deg,rgba(5,9,16,.94) 0%,rgba(5,9,16,.30) 43%,transparent 64%),
    radial-gradient(circle at 84% 80%,rgba(43,119,238,.08),transparent 30%);
}
.hero-home .hero-grid{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:72px}
.hero-home .hero-copy{max-width:560px;padding-block:44px}
.hero-home .eyebrow{
  font-size:15px!important;
  font-weight:750;
  letter-spacing:.17em;
  color:#d7e0ec;
  margin-bottom:20px;
}
.hero-home .status-dot{width:8px;height:8px;box-shadow:0 0 0 5px rgba(191,255,24,.08),0 0 18px rgba(191,255,24,.55)}
.hero-home h1{
  font-size:clamp(72px,5.8vw,92px);
  line-height:.93;
  letter-spacing:-.058em;
  max-width:540px;
  text-shadow:0 10px 34px rgba(0,0,0,.17);
}
.hero-home h1 span{
  color:#72adff;
  background:linear-gradient(180deg,#83b8ff 0%,#5e9eff 52%,#4b8ff2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-home .hero-role{
  display:inline-flex;
  max-width:100%;
  margin-top:17px;
  padding:9px 14px;
  border:1px solid rgba(101,158,239,.38);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(20,40,68,.62),rgba(12,25,44,.52));
  color:#cbd7e6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-size:15px!important;
  font-weight:600;
}
.hero-home .hero-lead{
  max-width:535px;
  margin:23px 0 27px;
  color:#b5c0d0;
  font-size:17px!important;
  line-height:1.72;
}
.hero-home .hero-actions{gap:12px}
.hero-home .hero-meta{
  margin-top:25px;
  color:#93a0b2;
  font-size:15px!important;
  gap:13px;
}
.hero-home .hero-meta .divider{width:28px;background:rgba(255,255,255,.21)}
.hero-home .meta-item{gap:9px;transition:color .18s ease}
.hero-home a.meta-item:hover{color:#d4e4fb}
.hero-home .meta-item svg{width:17px;height:17px;stroke:#5ba0ff}

/* Make the supplied studio portrait feel integrated rather than pasted on. */
.hero-home .hero-visual{height:min(640px,calc(100dvh - 150px));min-height:540px;align-self:center}
.hero-home .portrait-halo{
  width:610px;height:610px;right:-1%;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(48,128,255,.27) 0%,rgba(32,91,184,.12) 42%,transparent 70%);
  filter:blur(21px);opacity:.95;
}
.hero-home .hero-photo-frame{
  top:50%;right:0;bottom:auto;
  transform:translateY(-50%);
  width:min(590px,100%);
  height:auto!important;
  min-height:0!important;max-height:none!important;
  aspect-ratio:851/805;
  border-radius:30px;
  border:1px solid rgba(161,197,247,.42);
  background:#dbe0e5;
  box-shadow:
    0 44px 100px rgba(0,0,0,.40),
    0 18px 48px rgba(25,81,166,.16),
    0 0 0 1px rgba(255,255,255,.045) inset;
  overflow:hidden;
}
.hero-home .hero-photo-frame:before{
  background:
    linear-gradient(90deg,rgba(6,14,25,.16),transparent 16%,transparent 84%,rgba(6,14,25,.12)),
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 28%,transparent 72%,rgba(5,11,20,.23));
  box-shadow:inset 0 0 50px rgba(2,9,18,.10);
}
.hero-home .hero-photo-frame:after{
  left:10%;right:10%;bottom:0;height:2px;opacity:.72;
  background:linear-gradient(90deg,transparent,#4b98ff 36%,#a5ceff 50%,#4b98ff 64%,transparent);
  box-shadow:0 -7px 24px rgba(47,128,255,.35);
}
.hero-home .hero-person{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 50%!important;
  filter:contrast(1.025) saturate(.96) brightness(.975)!important;
}
.hero-home .hero-photo-shine{width:24%;right:-7%;opacity:.24}
.hero-home .floating-card{
  min-width:215px;
  padding:13px 16px 13px 13px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(10,19,33,.94),rgba(13,25,44,.87));
  border:1px solid rgba(158,196,247,.27);
  box-shadow:0 20px 50px rgba(0,0,0,.34),0 8px 28px rgba(33,101,207,.12),inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-home .floating-icon{width:40px;height:40px;background:linear-gradient(145deg,#2c70dc,#134a9f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(33,98,195,.2)}
.hero-home .floating-card strong,.hero-home .floating-card small{font-size:15px!important}
.hero-home .floating-card strong{color:#f6f9fd;font-weight:750}
.hero-home .floating-card small{color:#91a0b5;margin-top:1px}
.hero-home .floating-card-one{left:-34px;top:20%}
.hero-home .floating-card-two{right:-26px;bottom:13%}

/* Ticker */
.ticker{
  height:62px;
  background:linear-gradient(90deg,#1f58a9 0%,#286bc8 42%,#1f58a9 100%);
  border-block:1px solid rgba(255,255,255,.17);
  box-shadow:0 10px 30px rgba(22,79,159,.12);
}
.ticker-track{gap:34px;font-size:15px!important;font-weight:700;letter-spacing:-.012em;animation-duration:34s}
.ticker-track span{display:inline-flex;align-items:center;opacity:.97}

/* Full light content system */
.section{padding:96px 0}
.page-hero,.inner-hero,.contact-page{
  background:
    radial-gradient(circle at 78% 28%,rgba(45,122,240,.24),transparent 38%),
    linear-gradient(118deg,#050910,#091423 60%,#0b1729);
}
.page-hero{padding:158px 0 88px}
.page-hero .container{max-width:980px;margin-left:auto;margin-right:auto}
.page-hero p,.inner-hero p,.contact-page p{font-size:17px!important;line-height:1.72;color:#aeb9c9}
.page-hero .eyebrow,.inner-hero .eyebrow,.contact-page .eyebrow{font-size:15px!important}
.page-hero h1,.inner-hero h1,.contact-page h1{letter-spacing:-.052em}

.section-kicker,.section-head>div p,.label,.project-badge,.smartkokum-panel>span,
.profile-table span,.factual-timeline article>span,.achievement-card span,
.involvement-card>span,.source-note,.notice-box strong,.contact-facts,
.resource-card small,.mini-points span,.project-tags span,.feature-list span,
.focus-card>span,.focus-card p,.achievement-item p,.level-badge,.verified-points span{
  font-size:15px!important;
}

.focus-card,.resource-card,.achievement-card,.involvement-card,.project-list-card,.empty-state,.project-feature,.smartkokum-panel{
  border-color:#dfe6ef;
  box-shadow:0 14px 40px rgba(20,37,61,.055);
}
.focus-card,.resource-card,.achievement-card,.involvement-card,.project-list-card,.empty-state{
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
.focus-card,.resource-card,.achievement-card,.involvement-card,.project-list-card{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.focus-card:hover,.resource-card:hover,.achievement-card:hover,.involvement-card:hover,.project-list-card:hover{
  transform:translateY(-4px);
  border-color:#cbd9eb;
  box-shadow:0 22px 54px rgba(20,45,78,.09);
}
.focus-card p,.about-main p,.journey-copy p,.resources-copy p,.project-detail p,
.project-copy p,.project-list-card p,.smartkokum-panel p,.achievement-card p,
.involvement-card p,.notice-box p,.source-note,.profile-table strong,.timeline p{
  font-size:16px!important;
  line-height:1.74;
}
.profile-table>div{padding:24px 0}
.profile-table span{font-weight:700;letter-spacing:.09em}
.profile-table strong{font-weight:600}
.timeline article{padding-block:28px}
.timeline h3{font-size:20px}
.achievement-card{border-radius:24px;padding:32px}
.involvement-card{border-radius:24px;padding:30px;min-height:275px}
.project-list-card{border-radius:26px;padding:36px}
.notice-box{border-radius:20px;padding:26px}
.source-note{border-radius:0 16px 16px 0;padding:18px 20px}

/* Inner portrait and contact image */
.inner-portrait img,.contact-visual img,.clean-project-side img,.journey-media img{
  box-shadow:0 28px 70px rgba(8,20,39,.18);
}
.inner-portrait{border-radius:28px;overflow:hidden;border:1px solid rgba(151,190,244,.25)}
.contact-visual img{border-radius:28px;border:1px solid rgba(151,190,244,.22)}
.email-card{border-radius:20px!important;box-shadow:0 18px 46px rgba(0,0,0,.16)}
.email-card small,.email-card strong{font-size:15px!important}

/* Footer */
.site-footer{
  padding:62px 0 30px;
  background:linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%);
  border-top:1px solid #dce4ed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.footer-grid{grid-template-columns:minmax(0,1fr) 300px;gap:96px;align-items:start}
.footer-brand{margin-bottom:16px}
.site-footer .brand-mark{width:40px;height:40px}
.site-footer .brand-copy strong{color:#111927;font-size:18px!important}
.site-footer .brand-copy small{color:#6f7d90;font-size:15px!important;letter-spacing:.15em}
.site-footer .footer-grid p{max-width:560px;color:#647286;font-size:15px!important;line-height:1.72;margin-block:10px}
.site-footer .footer-trust{max-width:590px!important;color:#738094!important;font-size:15px!important}
.footer-links{gap:14px 34px;padding-top:5px}
.site-footer .footer-links a{font-size:15px!important;font-weight:560;color:#344258;transition:color .18s ease,transform .18s ease}
.site-footer .footer-links a:hover{color:#1f6ed7;transform:translateX(2px)}
.footer-bottom{margin-top:42px;padding-top:24px;border-top-color:#dbe3ec;color:#768397;font-size:15px!important}

/* Responsive balance */
@media (min-width:1400px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:82px}
  .hero-home .hero-copy{max-width:570px}
  .hero-home .hero-photo-frame{width:610px}
  .hero-home .floating-card-one{left:-38px;top:19%}
  .hero-home .floating-card-two{right:-24px;bottom:13%}
}

@media (max-width:1200px) and (min-width:981px){
  .container{width:min(var(--max),calc(100% - 42px))}
  .desktop-nav{gap:22px}
  .hero-home .hero-grid{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:38px}
  .hero-home .hero-copy{max-width:500px}
  .hero-home h1{font-size:68px}
  .hero-home .hero-lead{font-size:16px!important;max-width:470px}
  .hero-home .hero-photo-frame{width:510px}
  .hero-home .floating-card-one{left:-20px}
  .hero-home .floating-card-two{right:-12px}
}

@media (max-width:980px) and (min-width:821px){
  .container{width:calc(100% - 36px)}
  .desktop-nav{gap:17px}
  .header-actions .btn{padding-inline:16px}
  .hero-home .hero-grid{grid-template-columns:minmax(0,49fr) minmax(0,51fr);gap:26px}
  .hero-home .hero-copy{max-width:430px}
  .hero-home h1{font-size:60px}
  .hero-home .hero-lead{font-size:15px!important}
  .hero-home .hero-photo-frame{width:430px}
  .hero-home .floating-card{display:none}
}

@media (max-width:820px){
  .container{width:calc(100% - 32px)}
  .header-inner{height:68px}
  .site-header .brand-copy strong{font-size:17px!important}
  .site-header .brand-copy small{display:none}
  .menu-toggle{display:block;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
  .menu-toggle span{background:#fff}
  .mobile-menu{top:74px;background:rgba(9,17,29,.97);border-color:rgba(255,255,255,.10);box-shadow:0 30px 70px rgba(0,0,0,.42)}
  .mobile-menu a{font-size:15px!important;color:#d8e0ec}
  .hero-home{min-height:980px;padding-top:104px}
  .hero-home .hero-grid{gap:18px}
  .hero-home .hero-copy{padding:18px 0 0;max-width:none}
  .hero-home h1{font-size:clamp(52px,14vw,72px)}
  .hero-home .hero-role{font-size:15px!important}
  .hero-home .hero-lead{font-size:16px!important;max-width:680px}
  .hero-home .hero-meta{display:none}
  .hero-home .hero-visual{height:min(86vw,520px);min-height:360px;margin-top:6px}
  .hero-home .hero-photo-frame{
    left:50%;right:auto;top:50%;bottom:auto;
    transform:translate(-50%,-50%);
    width:min(600px,calc(100vw - 32px));
    height:auto!important;aspect-ratio:851/805;
    border-radius:24px;
  }
  .hero-home .portrait-halo{right:50%;transform:translate(50%,-50%);width:88vw;height:88vw}
  .hero-home .floating-card{display:none}
  .ticker{height:58px}
  .ticker-track{gap:28px}
  .section{padding:76px 0}
  .page-hero{padding:126px 0 68px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .footer-links{padding-top:0}
  .site-footer{padding:48px 0 94px}
  .mobile-bottom-nav{
    height:70px;bottom:8px;left:10px;right:10px;
    background:rgba(8,15,26,.94);border-color:rgba(255,255,255,.12);
    box-shadow:0 20px 50px rgba(0,0,0,.28);
  }
  .mobile-bottom-nav small{font-size:15px!important;line-height:1;letter-spacing:-.035em}
}

@media (max-width:540px){
  .container{width:calc(100% - 26px)}
  .hero-home{min-height:900px}
  .hero-home .hero-copy{padding-top:8px}
  .hero-home .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-home .hero-actions .btn{width:100%;padding-inline:14px}
  .hero-home .hero-visual{height:88vw;min-height:330px;max-height:455px}
  .hero-home .hero-photo-frame{width:calc(100vw - 26px);border-radius:21px}
  .footer-links{grid-template-columns:1fr 1fr;gap:13px 22px}
  .footer-bottom{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   v1.0.1 — Compact Premium Footer
   Fokus: kurangkan ruang kosong tanpa mengorbankan bacaan.
   ========================================================= */
.site-footer{
  position:relative;
  overflow:hidden;
  padding:34px 0 18px;
  background:
    radial-gradient(circle at 78% -70%,rgba(46,125,246,.09),transparent 40%),
    linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%);
  border-top:1px solid #dce4ed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
.site-footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(46,125,246,.22) 18%,rgba(46,125,246,.78) 50%,rgba(46,125,246,.22) 82%,transparent 100%);
  pointer-events:none;
}
.footer-grid{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:64px;
  align-items:center;
}
.footer-brand{margin-bottom:9px}
.site-footer .brand-mark{
  width:38px;height:38px;
  border-radius:11px;
  box-shadow:0 10px 25px rgba(46,125,246,.18);
}
.site-footer .footer-grid p{
  max-width:650px;
  margin:4px 0;
  color:#647286;
  font-size:15px!important;
  line-height:1.52;
}
.site-footer .footer-trust{
  max-width:720px!important;
  margin-top:7px!important;
  color:#748195!important;
  font-size:15px!important;
  line-height:1.55!important;
}
.footer-links{
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:8px 26px;
  padding-top:0;
  align-content:center;
}
.site-footer .footer-links a{
  position:relative;
  padding:4px 0;
  font-size:15px!important;
  font-weight:600;
  color:#344258;
  transition:color .18s ease,transform .18s ease;
}
.site-footer .footer-links a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:#2e7df6;
  transition:width .18s ease;
}
.site-footer .footer-links a:hover{color:#1f6ed7;transform:translateX(2px)}
.site-footer .footer-links a:hover::after{width:22px}
.footer-bottom{
  margin-top:21px;
  padding-top:15px;
  border-top:1px solid #dbe3ec;
  color:#788598;
  font-size:15px!important;
  line-height:1.4;
}

@media (max-width:820px){
  .site-footer{padding:34px 0 90px}
  .footer-grid{grid-template-columns:1fr;gap:23px;align-items:start}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
  .footer-bottom{margin-top:20px;padding-top:15px;gap:8px}
}

@media (max-width:540px){
  .site-footer{padding-top:30px}
  .footer-brand{margin-bottom:8px}
  .site-footer .footer-grid p,.site-footer .footer-trust{line-height:1.5!important}
  .footer-grid{gap:20px}
  .footer-links{gap:7px 18px}
  .footer-bottom{margin-top:18px;padding-top:14px}
}

/* =========================================================
   v1.0.2 — PREMIUM PROFILE PAGE REFINEMENT
   Tighter editorial rhythm, elevated portrait treatment,
   denser biodata and cleaner professional record section.
   No image assets are generated or replaced.
   ========================================================= */

/* Profile hero: balanced editorial composition */
.profile-page-hero{
  min-height:620px;
  padding-top:104px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 78% 36%,rgba(54,132,255,.24),transparent 34%),
    radial-gradient(circle at 58% 110%,rgba(28,91,178,.14),transparent 34%),
    linear-gradient(118deg,#050910 0%,#081321 56%,#0a1729 100%);
}
.profile-page-hero::before{
  content:'';
  position:absolute;
  width:620px;height:620px;
  right:7%;top:4%;
  border-radius:50%;
  opacity:.22;
  background:repeating-radial-gradient(circle,transparent 0 17px,rgba(126,181,255,.12) 18px 19px);
  pointer-events:none;
}
.profile-page-hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,155,245,.58),transparent);
}
.profile-page-hero .inner-hero-grid{
  min-height:516px;
  grid-template-columns:minmax(0,1fr) minmax(390px,.72fr);
  gap:86px;
  align-items:center;
  position:relative;
  z-index:1;
}
.profile-page-hero .reveal:first-child{max-width:640px;padding:20px 0 32px}
.profile-page-hero .eyebrow{
  margin-bottom:18px;
  color:#cbd7e7;
  letter-spacing:.19em;
}
.profile-page-hero .eyebrow::before{
  content:'';
  width:34px;height:1px;
  background:linear-gradient(90deg,#2e7df6,rgba(46,125,246,.15));
}
.profile-page-hero h1{
  max-width:660px;
  font-size:clamp(58px,5.5vw,84px);
  line-height:.96;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.profile-page-hero h1 span{
  background:linear-gradient(95deg,#6fa9ff 0%,#4a8ef5 72%,#7cb3ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profile-page-hero p{
  margin:22px 0 0;
  max-width:590px;
  color:#aeb9c9;
  font-size:16px!important;
  line-height:1.65;
}

/* Premium portrait frame using existing image only */
.profile-page-hero .inner-portrait{
  width:min(430px,100%);
  height:510px;
  justify-self:end;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(150,190,246,.30);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(46,125,246,.08));
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 70px rgba(46,125,246,.10);
  isolation:isolate;
}
.profile-page-hero .inner-portrait::before{
  inset:auto -12% -28% -12%;
  height:82%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(47,126,246,.27) 0%,rgba(47,126,246,.10) 42%,transparent 70%);
  filter:blur(2px);
  z-index:0;
}
.profile-page-hero .inner-portrait::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%),
    linear-gradient(180deg,transparent 72%,rgba(4,10,18,.22) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.profile-page-hero .inner-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 12%;
  filter:saturate(.94) contrast(1.02);
  -webkit-mask-image:none;
  mask-image:none;
}

/* Biodata: compact premium card system */
.profile-biodata{
  padding:78px 0 82px;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
}
.profile-biodata .split-grid{
  grid-template-columns:170px minmax(0,1fr);
  gap:54px;
  align-items:start;
}
.profile-biodata .section-kicker{
  display:flex;
  align-items:center;
  gap:2px;
  padding-top:7px;
  color:#738095;
}
.profile-biodata .section-kicker span{
  width:36px;height:36px;
  margin-right:10px;
  background:#fff;
  box-shadow:0 8px 22px rgba(24,55,95,.06);
}
.profile-biodata .about-main{
  max-width:920px;
}
.profile-biodata .about-main h2{
  font-size:clamp(42px,4vw,58px);
  margin-bottom:24px;
  color:#111927;
}
.profile-biodata .profile-table{
  border:1px solid #e1e7ef;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  box-shadow:0 20px 55px rgba(22,43,72,.06);
}
.profile-biodata .profile-table>div{
  grid-template-columns:190px minmax(0,1fr);
  gap:30px;
  padding:18px 24px;
  border-bottom:1px solid #e7ecf2;
  align-items:center;
  transition:background .18s ease;
}
.profile-biodata .profile-table>div:last-child{border-bottom:0}
.profile-biodata .profile-table>div:hover{background:#f7faff}
.profile-biodata .profile-table span{
  color:#6f7d91;
  font-size:15px!important;
  letter-spacing:.075em;
  font-weight:750;
}
.profile-biodata .profile-table strong{
  color:#162033;
  font-size:16px!important;
  line-height:1.55;
  font-weight:650;
}

/* Professional record: denser, premium and easier to scan */
.profile-record{
  padding:82px 0 86px;
  background:
    radial-gradient(circle at 92% 10%,rgba(46,125,246,.07),transparent 25%),
    linear-gradient(180deg,#f5f8fc 0%,#f2f6fb 100%);
  border-top:1px solid #e1e8f1;
}
.profile-record .section-head{
  grid-template-columns:170px minmax(0,1fr);
  gap:54px;
  margin-bottom:34px;
  align-items:start;
}
.profile-record .section-head>div{
  padding-top:6px;
}
.profile-record .section-head>div p{
  font-size:15px!important;
  margin-top:10px;
  color:#718096;
}
.profile-record .section-no{
  width:36px;height:36px;
  background:#fff;
  box-shadow:0 8px 22px rgba(24,55,95,.06);
}
.profile-record .section-head h2{
  max-width:820px;
  font-size:clamp(40px,4vw,56px);
  line-height:1.05;
  margin:0;
  color:#111927;
}
.profile-record .timeline{
  margin-left:224px;
  border:1px solid #dfe6ef;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 52px rgba(22,43,72,.055);
}
.profile-record .timeline article{
  grid-template-columns:100px minmax(0,1fr);
  gap:20px;
  padding:20px 24px;
  border-bottom:1px solid #e5eaf1;
  align-items:start;
}
.profile-record .timeline article:last-child{border-bottom:0}
.profile-record .timeline article>span{
  text-align:left;
  padding-top:2px;
  color:#2e7df6;
  font-size:15px!important;
  font-weight:800;
}
.profile-record .timeline h3{
  margin:0 0 5px;
  color:#172236;
  font-size:18px;
  line-height:1.35;
}
.profile-record .timeline p{
  color:#68778b;
  font-size:15px!important;
  line-height:1.62;
}
.profile-record .source-note{
  margin:18px 0 0 224px;
  max-width:none;
  padding:15px 18px;
  border-left:2px solid #2e7df6;
  border-radius:0 14px 14px 0;
  background:rgba(46,125,246,.07);
  color:#617187;
  font-size:15px!important;
  line-height:1.55;
}

/* Profile footer should feel attached to the page, not like a separate block */
.profile-record + .site-footer{
  border-top-color:#dbe5f0;
}

@media (max-width:1050px){
  .profile-page-hero .inner-hero-grid{gap:48px;grid-template-columns:minmax(0,1fr) minmax(340px,.72fr)}
  .profile-page-hero .inner-portrait{width:390px;height:480px}
  .profile-biodata .split-grid,.profile-record .section-head{grid-template-columns:145px minmax(0,1fr);gap:34px}
  .profile-record .timeline,.profile-record .source-note{margin-left:179px}
}

@media (max-width:820px){
  .profile-page-hero{min-height:auto;padding:106px 0 46px}
  .profile-page-hero::before{width:480px;height:480px;right:-34%;top:18%}
  .profile-page-hero .inner-hero-grid{grid-template-columns:1fr;gap:28px;min-height:auto}
  .profile-page-hero .reveal:first-child{padding:8px 0 0}
  .profile-page-hero h1{font-size:clamp(50px,12vw,70px)}
  .profile-page-hero p{font-size:15px!important}
  .profile-page-hero .inner-portrait{width:min(520px,100%);height:auto;aspect-ratio:4/5;justify-self:center;border-radius:24px}
  .profile-biodata{padding:62px 0 66px}
  .profile-biodata .split-grid,.profile-record .section-head{grid-template-columns:1fr;gap:20px}
  .profile-biodata .section-kicker,.profile-record .section-head>div{padding-top:0}
  .profile-biodata .about-main h2,.profile-record .section-head h2{font-size:clamp(36px,9vw,48px)}
  .profile-biodata .profile-table>div{grid-template-columns:160px minmax(0,1fr);gap:20px;padding:17px 19px}
  .profile-record{padding:64px 0 70px}
  .profile-record .section-head{margin-bottom:24px}
  .profile-record .timeline,.profile-record .source-note{margin-left:0}
}

@media (max-width:540px){
  .profile-page-hero{padding-top:92px}
  .profile-page-hero .eyebrow{font-size:15px!important;letter-spacing:.13em}
  .profile-page-hero .eyebrow::before{width:24px}
  .profile-page-hero h1{font-size:clamp(46px,13vw,60px)}
  .profile-page-hero .inner-portrait{aspect-ratio:4/4.75;border-radius:20px}
  .profile-biodata .profile-table{border-radius:18px}
  .profile-biodata .profile-table>div{grid-template-columns:1fr;gap:4px;padding:15px 17px}
  .profile-biodata .profile-table span{font-size:15px!important}
  .profile-record .timeline{border-radius:18px}
  .profile-record .timeline article{grid-template-columns:1fr;gap:5px;padding:17px 18px}
  .profile-record .timeline article>span{padding:0}
  .profile-record .source-note{border-radius:0 12px 12px 0;padding:14px 16px}
}

/* =========================================================
   v1.0.3 — PROFILE EDITORIAL BALANCE
   Rebuilds the profile information area into one consistent
   editorial system: compact rail + restrained heading + card.
   Existing image assets remain unchanged.
   ========================================================= */

/* Shared profile section composition */
.profile-biodata,
.profile-record{
  position:relative;
  overflow:hidden;
}
.profile-biodata{
  padding:68px 0 72px;
  background:
    radial-gradient(circle at 88% 8%,rgba(46,125,246,.045),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
}
.profile-record{
  padding:72px 0 76px;
  background:
    radial-gradient(circle at 8% 8%,rgba(46,125,246,.045),transparent 26%),
    linear-gradient(180deg,#f4f7fb 0%,#f7f9fc 100%);
  border-top:1px solid #e5ebf2;
}
.profile-section-shell{
  width:min(1080px,calc(100% - 56px));
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:38px;
  align-items:start;
}
.profile-section-rail{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding-top:7px;
  color:#172236;
}
.profile-section-rail::after{
  content:'';
  position:absolute;
  left:18px;
  top:52px;
  width:1px;
  height:72px;
  background:linear-gradient(180deg,#b9d2f8,rgba(185,210,248,0));
}
.profile-section-number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #d9e4f2;
  border-radius:50%;
  background:#fff;
  color:#2e7df6;
  box-shadow:0 8px 22px rgba(31,67,112,.06);
  font:800 12px/1 var(--font-title);
  letter-spacing:.02em;
}
.profile-section-rail strong{
  display:block;
  padding-top:2px;
  font:750 13px/1.3 var(--font-title);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#536174;
}
.profile-section-rail small{
  display:block;
  margin-top:6px;
  color:#98a4b4;
  font:500 12px/1.35 var(--font-body);
}
.profile-section-content{
  width:100%;
  max-width:860px;
  min-width:0;
}
.profile-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 22px;
  padding:0 2px;
}
.profile-section-heading p{
  order:2;
  margin:0 0 6px;
  color:#8995a6;
  font:750 12px/1.3 var(--font-title);
  letter-spacing:.14em;
}
.profile-section-heading h2{
  order:1;
  margin:0;
  color:#121b2a;
  font:750 clamp(34px,3.35vw,46px)/1.04 var(--font-title);
  letter-spacing:-.045em;
}
.profile-section-heading h2 em{
  font-style:normal;
  color:#2e7df6;
}

/* Biodata card */
.profile-biodata .profile-info-card{
  display:block;
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:18px;
  background:#fff;
  box-shadow:
    0 18px 46px rgba(22,43,72,.055),
    0 1px 0 rgba(255,255,255,.85) inset;
}
.profile-biodata .profile-info-card>div{
  position:relative;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:28px;
  align-items:center;
  min-height:64px;
  padding:15px 22px;
  border:0;
  border-bottom:1px solid #e8edf3;
  background:#fff;
}
.profile-biodata .profile-info-card>div:last-child{border-bottom:0}
.profile-biodata .profile-info-card>div::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#2e7df6;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.profile-biodata .profile-info-card>div:hover{
  background:#f8fbff;
}
.profile-biodata .profile-info-card>div:hover::before{
  transform:scaleY(1);
}
.profile-biodata .profile-info-card span{
  color:#7c899a;
  font:750 12px/1.35 var(--font-title);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.profile-biodata .profile-info-card strong{
  color:#172236;
  font:650 15px/1.55 var(--font-body);
}

/* Professional record card */
.profile-record .profile-timeline-card{
  position:relative;
  display:block;
  margin:0;
  overflow:hidden;
  border:1px solid #dce5ef;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 48px rgba(22,43,72,.05);
}
.profile-record .profile-timeline-card::before{
  content:'';
  position:absolute;
  left:49px;
  top:38px;
  bottom:38px;
  width:1px;
  background:linear-gradient(180deg,#8cb9fb 0%,#d6e4f8 50%,#8cb9fb 100%);
  opacity:.9;
}
.profile-record .profile-timeline-card article{
  position:relative;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:22px;
  align-items:start;
  min-height:96px;
  padding:22px 24px;
  border:0;
  border-bottom:1px solid #e6ecf3;
}
.profile-record .profile-timeline-card article:last-child{border-bottom:0}
.profile-record .profile-timeline-card article>div{
  padding-top:1px;
}
.profile-record .timeline-marker{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:28px;
  padding-left:19px!important;
  color:#2e7df6!important;
  font:800 13px/1.3 var(--font-title)!important;
  text-align:left!important;
}
.profile-record .timeline-marker::before{
  content:'';
  position:absolute;
  left:19px;
  top:50%;
  width:9px;
  height:9px;
  border:3px solid #fff;
  border-radius:50%;
  background:#2e7df6;
  box-shadow:0 0 0 1px #83b5ff,0 4px 12px rgba(46,125,246,.25);
  transform:translate(-50%,-50%);
}
.profile-record .timeline-marker{
  padding-left:36px!important;
}
.profile-record .profile-timeline-card h3{
  margin:0 0 5px;
  color:#162033;
  font:720 17px/1.35 var(--font-title);
  letter-spacing:-.01em;
}
.profile-record .profile-timeline-card p{
  margin:0;
  color:#6d7a8c;
  font:450 15px/1.6 var(--font-body);
}
.profile-record .profile-source-note{
  margin:16px 0 0;
  max-width:none;
  padding:13px 16px;
  border:1px solid #dbe8f8;
  border-left:3px solid #2e7df6;
  border-radius:12px;
  background:#edf5ff;
  color:#607086;
  font:500 14px/1.55 var(--font-body);
}

/* Keep profile footer visually connected */
.profile-record + .site-footer{
  border-top:1px solid #dce5ef;
}

@media (max-width:980px){
  .profile-section-shell{
    width:min(940px,calc(100% - 42px));
    grid-template-columns:130px minmax(0,1fr);
    gap:30px;
  }
  .profile-section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .profile-section-heading p{order:1;margin:0}
  .profile-section-heading h2{order:2}
}

@media (max-width:760px){
  .profile-biodata{padding:54px 0 58px}
  .profile-record{padding:58px 0 64px}
  .profile-section-shell{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:20px;
  }
  .profile-section-rail{
    grid-template-columns:34px 1fr;
    gap:10px;
    padding:0;
  }
  .profile-section-rail::after{display:none}
  .profile-section-number{width:34px;height:34px;font-size:11px}
  .profile-section-rail strong{font-size:12px}
  .profile-section-rail small{margin-top:3px}
  .profile-section-heading{margin-bottom:18px}
  .profile-section-heading h2{font-size:clamp(32px,8vw,40px)}
  .profile-biodata .profile-info-card>div{
    grid-template-columns:155px minmax(0,1fr);
    gap:18px;
    min-height:60px;
    padding:14px 18px;
  }
  .profile-record .profile-timeline-card article{
    grid-template-columns:72px minmax(0,1fr);
    gap:14px;
    padding:19px 18px;
  }
  .profile-record .profile-timeline-card::before{left:41px}
  .profile-record .timeline-marker{padding-left:30px!important;font-size:12px!important}
  .profile-record .timeline-marker::before{left:14px}
}

@media (max-width:520px){
  .profile-biodata,.profile-record{padding-top:48px;padding-bottom:52px}
  .profile-section-shell{width:calc(100% - 26px)}
  .profile-section-heading h2{font-size:32px}
  .profile-biodata .profile-info-card{border-radius:16px}
  .profile-biodata .profile-info-card>div{
    grid-template-columns:1fr;
    gap:4px;
    padding:14px 16px;
  }
  .profile-biodata .profile-info-card span{font-size:11px}
  .profile-biodata .profile-info-card strong{font-size:15px}
  .profile-record .profile-timeline-card{border-radius:16px}
  .profile-record .profile-timeline-card::before{left:29px;top:32px;bottom:32px}
  .profile-record .profile-timeline-card article{
    grid-template-columns:1fr;
    gap:5px;
    padding:17px 16px 17px 44px;
    min-height:auto;
  }
  .profile-record .timeline-marker{
    padding-left:0!important;
    min-height:auto;
    font-size:12px!important;
  }
  .profile-record .timeline-marker::before{
    left:-15px;
    top:8px;
  }
  .profile-record .profile-source-note{font-size:13px}
}