/* =========================================================
   Nao RandD — Portfolio
   Premium dark base + powder-blue accent (from icon)
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;font-family:var(--font-body);color:var(--text);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- Design tokens ---------- */
:root{
  /* Layout */
  --max:1180px;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(28px,4vw,56px);
  --sec-y:clamp(80px,11vw,150px);
  --ease:cubic-bezier(.22,1,.36,1);

  /* Palette — Premium dark + powder-blue */
  --bg:#09090b; --bg-band:#101013; --surface:#151518; --surface-2:#1a1a1e;
  --text:#f4f4f6; --muted:#a4a4ad; --faint:#6c6c76;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20);
  --accent:#7ccfe3; --accent-2:#a8e0f0; --accent-ink:#06232a;
  --accent-soft:rgba(124,207,227,.14);
  --radius:20px; --radius-sm:13px;
  --shadow:0 2px 8px rgba(0,0,0,.5), 0 18px 46px rgba(0,0,0,.55);
  --shadow-lg:0 4px 14px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.6);

  /* Typography */
  --font-head:"Manrope","Noto Sans JP",system-ui,sans-serif;
  --font-body:"Manrope","Noto Sans JP",system-ui,sans-serif;
  --head-weight:700; --head-tracking:-.03em; --head-leading:1.04;
  --eyebrow-weight:600; --eyebrow-tracking:.22em; --eyebrow-transform:uppercase;
  --nav-bg:rgba(9,9,11,.62);
}

/* ---------- Subtle grain overlay ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.15;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec-y);position:relative}
.section.band{background:var(--bg-band)}
.eyebrow{font-family:var(--font-body);font-size:12px;font-weight:var(--eyebrow-weight);
  letter-spacing:var(--eyebrow-tracking);text-transform:var(--eyebrow-transform);
  color:var(--accent);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--accent);opacity:.7}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);
  letter-spacing:var(--head-tracking);line-height:var(--head-leading);text-wrap:balance}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.sec-head h2{font-size:clamp(30px,4.6vw,52px)}
.sec-head p{color:var(--muted);font-size:clamp(16px,1.4vw,19px);max-width:60ch}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  background:var(--nav-bg);border-bottom:1px solid transparent;
  transition:border-color .4s}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);
  font-weight:var(--head-weight);font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;
  font-family:"Manrope","Plus Jakarta Sans",sans-serif;letter-spacing:-.04em}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-size:14.5px;color:var(--muted);padding:8px 13px;border-radius:9px;
  font-weight:500;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;
  overflow:hidden;background:var(--surface)}
.lang-toggle button{padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--faint);
  letter-spacing:.02em;transition:color .2s,background .2s}
.lang-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding-top:clamp(130px,17vh,180px);padding-bottom:clamp(70px,10vw,120px);
  overflow:hidden}
.hero::before{content:"";position:absolute;top:-12%;right:-6%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle at 60% 40%,rgba(124,207,227,.16),transparent 62%);
  pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.55fr .9fr;
  gap:clamp(32px,5vw,72px);align-items:center}
.avail{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:var(--muted);padding:7px 14px 7px 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow)}
.avail .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hero h1{font-size:clamp(40px,6.6vw,80px);margin:26px 0 22px;letter-spacing:var(--head-tracking)}
.hero h1 .acc{color:var(--accent)}
.hero-lead{font-size:clamp(17px,1.7vw,22px);color:var(--muted);max-width:40ch;white-space:pre-line}
.hero-role{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--faint);
  margin-bottom:6px;text-transform:uppercase}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-meta{display:flex;gap:clamp(20px,3vw,46px);margin-top:46px;flex-wrap:wrap}
.hero-meta .stat .n{font-family:var(--font-head);font-weight:var(--head-weight);
  font-size:clamp(26px,3vw,36px);line-height:1}
.hero-meta .stat .l{font-size:12.5px;color:var(--faint);margin-top:7px;letter-spacing:.02em}
.hero-portrait{position:relative;justify-self:end}
.hero-portrait image-slot,.hero-portrait .portrait-img{width:clamp(220px,26vw,330px);height:clamp(270px,32vw,400px);
  box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.hero-portrait .portrait-img{object-fit:cover;border-radius:20px;background:var(--surface)}
.hero-portrait::before{content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--accent);border-radius:var(--radius);z-index:-1;opacity:.4}
.hero-portrait .tagchip{position:absolute;bottom:-16px;left:-20px;background:var(--surface);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.hero-portrait .tagchip .swift{width:24px;height:24px;border-radius:6px;background:#f05138;flex:none;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;
  padding:14px 24px;border-radius:999px;transition:transform .25s var(--ease),
  background .25s,box-shadow .25s,border-color .25s;font-family:var(--font-body)}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn.ghost:hover{transform:translateY(-2px);background:var(--surface-2);border-color:var(--text)}
.btn svg{width:17px;height:17px}

/* =========================================================
   TECH STACK
   ========================================================= */
.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}
.stack-group{display:flex;flex-direction:column;gap:14px}
.stack-label{font-size:13px;font-weight:var(--eyebrow-weight);letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.stack-items{display:flex;flex-direction:column;gap:8px}
.stack-chip{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.stack-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.sc-icon{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;
  object-fit:contain;background:transparent}
.sc-icon--text{background:linear-gradient(135deg,#7b61ff,#86d2e6);color:#fff;
  font-weight:800;font-size:11px;letter-spacing:-.02em;font-family:var(--font-head)}
.stack-chip span:last-child{font-weight:600;font-size:14.5px}

/* =========================================================
   APPS
   ========================================================= */
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.apps-grid--single{grid-template-columns:minmax(0,420px)}
.app-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
  overflow:hidden}
.app-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.app-card.featured{grid-column:span 1}
.app-shot{width:100%;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-2);position:relative}
.app-shot image-slot{width:100%;height:100%}
.app-shot--mock{display:grid;place-items:center;background:
  linear-gradient(135deg,rgba(124,207,227,.18),rgba(255,255,255,.04)),
  var(--surface-2)}
.phone-preview{width:min(70%,190px);aspect-ratio:9/16;border-radius:26px;
  background:#f7fafb;color:#172125;padding:18px 14px;box-shadow:0 24px 54px rgba(0,0,0,.36);
  display:flex;flex-direction:column;gap:10px;font-family:var(--font-body)}
.phone-bar{width:46px;height:5px;border-radius:999px;background:#d7e3e7;margin:0 auto 8px}
.phone-title{font-weight:800;font-size:18px;letter-spacing:-.02em;color:#0e171a}
.task-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  padding:9px 10px;border-radius:12px;background:#fff;border:1px solid #e5ecef;font-size:12px}
.task-row span{width:10px;height:10px;border-radius:50%;background:#7ccfe3}
.task-row.done span{background:#27c26a}
.task-row b{font-size:12px}.task-row em{font-style:normal;font-weight:800;color:#0a98b7}
.rank-card{margin-top:auto;padding:12px;border-radius:14px;background:#102127;color:#a8e0f0;
  font-weight:800;font-size:12px;text-align:center}
.app-top{display:flex;align-items:center;gap:14px}
.app-icon{width:54px;height:54px;border-radius:13px;flex:none;box-shadow:var(--shadow);overflow:hidden;
  border:1px solid var(--border)}
.app-icon image-slot{width:100%;height:100%}
.app-icon--letter{display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-head);font-size:28px;font-weight:800}
.app-title{display:flex;flex-direction:column;gap:2px}
.app-title .name{font-family:var(--font-head);font-weight:var(--head-weight);font-size:21px;letter-spacing:-.01em}
.app-title .sub{font-size:13px;color:var(--faint)}
.app-desc{font-size:14.5px;color:var(--muted);flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:5px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.app-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--accent);margin-top:2px;transition:gap .2s}
.app-card:hover .app-link{gap:11px}
.app-link svg{width:15px;height:15px}
.app-card.placeholder{border-style:dashed;justify-content:center;align-items:center;text-align:center;
  background:transparent;min-height:280px}
.app-card.placeholder .ph-plus{width:46px;height:46px;border-radius:50%;border:1.5px dashed var(--border-strong);
  display:grid;place-items:center;color:var(--faint);font-size:22px;font-weight:300;margin-bottom:16px}
.app-card.placeholder .name{font-family:var(--font-head);font-weight:var(--head-weight);font-size:18px;margin-bottom:6px}
.app-card.placeholder p{font-size:13px;color:var(--faint);max-width:24ch}

/* =========================================================
   TALKS
   ========================================================= */
.talks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.talk{position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.talk:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.talk.featured{grid-column:1/-1;background:linear-gradient(135deg,rgba(124,207,227,.07),transparent 60%),var(--surface)}
.talk.featured::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.talk-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.talk-date{font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.talk-tag{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.talk-title{font-family:var(--font-head);font-weight:var(--head-weight);
  font-size:clamp(17px,1.7vw,21px);line-height:1.32;letter-spacing:-.01em;text-wrap:balance}
.talk.featured .talk-title{font-size:clamp(20px,2.2vw,26px)}
.talk-event{font-size:13.5px;color:var(--muted);margin-top:auto}
.talk-extra{display:flex;gap:10px;flex-wrap:wrap}
.talk-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.talk-link:hover{background:var(--accent);color:var(--accent-ink)}
.talk-link svg{width:14px;height:14px}
.talk-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--accent);transition:gap .2s}
.talk:hover .talk-go{gap:11px}
.talk-go svg{width:15px;height:15px}

/* =========================================================
   WRITING
   ========================================================= */
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);margin-bottom:48px}
.plat{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.plat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.plat .logo{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:17px;flex:none}
.plat .pname{font-family:var(--font-head);font-weight:var(--head-weight);font-size:17px}
.plat .pdesc{font-size:13px;color:var(--muted)}
.plat .parrow{position:absolute;top:22px;right:22px;color:var(--faint);transition:color .2s,transform .2s}
.plat:hover .parrow{color:var(--accent);transform:translate(2px,-2px)}
.plat .parrow svg{width:16px;height:16px}
.plat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;
  background:var(--brand);opacity:0;transition:opacity .3s}
.plat:hover::after{opacity:1}

.writing-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.post{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  padding:22px 6px;border-bottom:1px solid var(--border);transition:padding-left .3s var(--ease)}
.post:hover{padding-left:14px}
.post .pdate{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:96px}
.post .ptitle{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(17px,1.8vw,21px);
  letter-spacing:-.01em}
.post .pmeta{display:flex;align-items:center;gap:12px;color:var(--faint)}
.post .pbadge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.post .parrow{color:var(--faint);transition:color .2s,transform .2s}
.post:hover .parrow{color:var(--accent);transform:translateX(3px)}
.post .parrow svg{width:18px;height:18px}

/* =========================================================
   CAREER / TIMELINE
   ========================================================= */
.timeline{position:relative;display:flex;flex-direction:column;gap:6px;max-width:820px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1.5px;
  background:linear-gradient(var(--border-strong),transparent)}
.tl{position:relative;display:grid;grid-template-columns:auto 1fr;gap:26px;padding:18px 0}
.tl .node{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--surface);border:1.5px solid var(--border-strong);display:grid;place-items:center}
.tl .node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint);transition:background .3s}
.tl:hover .node{border-color:var(--accent)}
.tl:hover .node::after{background:var(--accent)}
.tl .yr{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.03em;margin-bottom:5px}
.tl .role{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(18px,2vw,23px);margin-bottom:6px}
.tl .org{font-size:14px;color:var(--muted);margin-bottom:9px}
.tl .tlbody{font-size:14.5px;color:var(--muted);max-width:58ch}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{text-align:center;position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:1}
.contact h2{font-size:clamp(34px,5.4vw,62px);margin:18px auto 22px;max-width:16ch}
.contact p{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:48ch;margin:0 auto 38px}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.soc{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:12px 20px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.soc:hover{transform:translateY(-3px);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.soc svg{width:18px;height:18px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border);padding-block:42px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer .brand{font-size:16px}
.footer .fmeta{font-size:13px;color:var(--faint)}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim .reveal{opacity:0;transform:translateY(22px)}
.anim .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.anim .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero-portrait{justify-self:start;margin-top:8px}
  .apps-grid{grid-template-columns:repeat(2,1fr)}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .talks-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(max-width:600px){
  .apps-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:1fr}
  .post{grid-template-columns:1fr auto;gap:6px 14px}
  .post .pdate{grid-column:1/-1;min-width:0}
}