/* =========================================================
   ABDAN PORTFOLIO v1.0
   Readable, dependency-free CSS. Edit tokens first.
   Sections: base / navigation / hero / work / capabilities /
             method / about / contact / responsive / motion
   ========================================================= */
:root {
  --navy: #0a1325;
  --navy-soft: #102139;
  --ink: #17243a;
  --ink-muted: #506077;
  --mint: #a5f7da;
  --mint-bright: #66efbd;
  --blue: #567df8;
  --paper: #f5f7f6;
  --white: #ffffff;
  --line: #dde4e7;
  --container: 1170px;
  --radius: 15px;
  --shadow: 0 24px 70px rgba(18, 39, 62, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--mint); color: var(--navy); }
a { color: inherit; }
a:focus-visible { outline: 3px solid #2786db; outline-offset: 5px; border-radius: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(var(--container), calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 18px; padding: 12px 18px; background: #fff; color: #111; font-weight: 800; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 10px; letter-spacing: .22em; font-weight: 800; line-height: 1.5; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
section[id] { scroll-margin-top: 90px; }
/* navigation */
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.header-inner { min-height: 87px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; min-width: 0; }
.brand-symbol { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(165,247,218,.5); color: #fff; border-radius: 10px; font-size: 23px; font-weight: 900; line-height: 1; letter-spacing: -.14em; background: rgba(165,247,218,.07); }
.symbol-dot, .brand-text > span, .footer-identity a span { color: var(--mint-bright); }
.brand-symbol .symbol-dot { font-size: .76em; margin-left: -.04em; transform: translateY(.13em); }
.brand-text { display: block; font-size: 13px; font-weight: 850; letter-spacing: .06em; white-space: nowrap; }
.brand-text small { display: block; color: #93a7bd; margin-top: 3px; font-size: 8px; letter-spacing: .19em; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a { text-decoration: none; font-size: 12px; font-weight: 600; color: #cbd6e3; transition: color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="location"] { color: #fff; }
.site-nav .nav-contact { color: var(--navy); background: var(--mint); border: 1px solid transparent; padding: 12px 17px; border-radius: 7px; font-weight: 800; white-space: nowrap; }
.nav-contact span { margin-left: 8px; }
.site-nav .nav-contact:hover { background: #fff; color: var(--navy); }
/* hero */
.hero { position: relative; overflow: hidden; min-height: 738px; background: radial-gradient(ellipse 62% 65% at 82% 51%, #183759 0%, #10243f 42%, rgba(16,36,63,0) 100%), linear-gradient(124deg, #0a1325 0%, #0c1c33 65%, #102e42 100%); color: #fff; }
.hero-grain { pointer-events: none; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, transparent 25%, black); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: 24px; padding-top: 146px; padding-bottom: 103px; min-height: 738px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 20px; }
.hero-eyebrow { color: #c5e9e1; margin-bottom: 29px; }
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64f1bd; box-shadow: 0 0 0 5px rgba(100,241,189,.10); flex: 0 0 auto; }
.hero h1 { max-width: 670px; font-size: clamp(58px, 5.8vw, 87px); font-weight: 750; line-height: 1.05; margin: 0 0 24px; letter-spacing: -.075em; }
.hero h1 em { color: var(--mint); letter-spacing: -.06em; }
.hero-lead { max-width: 500px; font-size: 16px; line-height: 1.9; color: #bfd0db; margin-bottom: 31px; }
.hero-lead strong { color: #fff; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 51px; padding: 14px 20px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 800; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-bright { background: var(--mint); color: #0c222c; }
.button-bright:hover { background: #fff; }
.button-ghost { border: 1px solid #617085; color: #fff; background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 49px; }
.hero-tags span { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #aabed0; border: 1px solid #3d526b; padding: 9px 11px; border-radius: 4px; }
.hero-art { position: relative; height: 520px; isolation: isolate; display: flex; align-items: center; justify-content: center; margin-left: -10px; }
.hero-art::after { content: ''; position: absolute; z-index: -1; width: 370px; height: 370px; border-radius: 50%; background: #26769b; filter: blur(115px); opacity: .2; }
.orbit { pointer-events: none; position: absolute; z-index: -1; border: 1px solid rgba(118,196,211,.14); border-radius: 50%; transform: rotate(-17deg); }
.orbit-one { width: 530px; height: 475px; }
.orbit-two { width: 445px; height: 405px; border-style: dashed; }
.art-label { position: absolute; z-index: 4; font-size: 9px; font-weight: 800; letter-spacing: .18em; color: #9db9cb; }
.label-top { top: 30px; right: 13px; }
.label-top span { font-size: 22px; margin-left: 13px; color: var(--mint); vertical-align: middle; }
.label-bottom { bottom: 14px; left: 6%; }
.workspace-window { width: min(530px, 95%); background: #101f34; border: 1px solid #49617a; border-radius: 15px; box-shadow: 25px 38px 75px rgba(0,4,18,.42), inset 0 1px rgba(255,255,255,.08); transform: rotate(-4deg); overflow: hidden; }
.window-header { display: flex; align-items: center; gap: 15px; height: 46px; padding: 0 17px; background: #162a45; border-bottom: 1px solid #33475e; color: #98adc1; font-size: 10px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #658298; }
.window-dots i:first-child { background: #ec8f92; }.window-dots i:nth-child(2) { background: #ebcb7d; }.window-dots i:nth-child(3) { background: #84d8ac; }
.window-signal { margin-left: auto; font-size: 9px; font-weight: 750; color: #9fe6c7; }
.workspace-body { display: flex; min-height: 321px; }
.workspace-rail { width: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 21px; background: #0d1b2e; border-right: 1px solid #293a51; color: #7189a4; font-size: 17px; }
.workspace-rail .rail-active { color: var(--mint); }
.workspace-content { flex: 1; padding: 19px 23px 17px; min-width: 0; }
.tiny-label { font-size: 9px; font-weight: 800; color: #78b3d5; letter-spacing: .16em; }
.workline { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: #e6f2f7; font-weight: 750; }
.workline-icon { font-size: 10px; color: #8cb3c0; }
.code-panel { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 11px; margin-top: 18px; padding: 15px 12px; background: #091626; border: 1px solid #253e54; border-radius: 7px; font-size: 12px; color: #d3dbe8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.4; }
.code-panel .line-number { color: #56708a; }.code-panel b { color: #8eb8ff; font-weight: 500; }.code-panel i { font-style: normal; color: var(--mint); }.code-panel em { font-style: normal; color: #e5bc96; }.code-indent { padding-left: 24px; }
.workspace-bottom { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: #b7d1cb; font-size: 9px; }.workspace-bottom > span:last-child { margin-left: auto; font-size: 15px; }.success-dot { width: 6px; height: 6px; border-radius: 50%; background: #75e9b1; }
.floating-chip { position: absolute; z-index: 4; background: #e8fff7; color: #1a3946; border-radius: 7px; font-size: 12px; font-weight: 800; box-shadow: 0 15px 25px rgba(0,0,0,.25); padding: 13px 18px; transform: rotate(5deg); }.floating-chip strong { margin-left: 8px; }.chip-left { left: -7px; bottom: 102px; }.chip-right { right: -13px; top: 102px; background: #2b5390; color: #fff; transform: rotate(10deg); }
.hero-bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; display: flex; align-items: center; gap: 20px; color: #7995a9; font-size: 9px; font-weight: 800; letter-spacing: .17em; }.hero-bottom-line { height: 1px; width: 54px; background: #6f8ca0; }.hero-bottom > span:last-child { margin-left: auto; }
.intro-strip { background: #e6eee9; border-bottom: 1px solid #d1dcd8; }.intro-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; }.intro-inner p { font-family: Georgia, serif; margin: 0; font-size: clamp(19px, 2.1vw, 26px); color: #2a3d39; }.intro-inner p span { color: #71928b; font-style: italic; }.intro-inner > span { color: #627b79; font-size: 10px; letter-spacing: .13em; font-weight: 800; white-space: nowrap; }
/* work */
.section { padding: 118px 0; }.section-work { background: var(--paper); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 41px; }.section-head > div { flex: 0 1 auto; }.section-head .section-intro { flex: 0 1 330px; margin-bottom: 4px; }.dark-eyebrow { color: #617c78; }.accent-line { width: 20px; height: 2px; background: #438879; }.section-head h2, .section-about h2, .method-section h2 { margin: 23px 0 0; font-size: clamp(41px, 4.3vw, 62px); font-weight: 760; line-height: 1.13; }.section-head h2 em, .section-about h2 em { color: #4d827c; }.section-intro { font-size: 14px; line-height: 1.9; color: var(--ink-muted); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid #dde5e5; border-radius: 13px; transition: box-shadow .25s ease, transform .25s ease; }
.project-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.project-card-large { grid-column: 1 / -1; display: grid; grid-template-columns: 1.04fr .96fr; }
.project-visual { position: relative; min-height: 290px; padding: 22px; overflow: hidden; isolation: isolate; }
.project-card-large .project-visual { min-height: 430px; }
.visual-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: inherit; opacity: .82; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.visual-footnote { position: absolute; left: 22px; bottom: 17px; z-index: 4; font-size: 8px; color: inherit; opacity: .55; letter-spacing: .08em; }
.project-body { display: flex; flex-direction: column; padding: 30px 30px 27px; min-width: 0; }.project-card-large .project-body { padding: 34px 38px 32px; }
.project-topline { display: flex; justify-content: space-between; align-items: center; gap: 13px; }.project-id { font-size: 10px; color: #84969d; font-weight: 750; letter-spacing: .1em; }.status { display: inline-flex; padding: 6px 8px; border-radius: 3px; font-weight: 800; letter-spacing: .09em; font-size: 9px; white-space: nowrap; }.status-live { color: #2d7565; background: #eaf8ef; }.status-pilot { color: #476894; background: #edf3fc; }.status-dev { color: #786797; background: #f1edfa; }
.project-body h3 { margin: 22px 0 12px; font-size: clamp(30px, 2.8vw, 38px); line-height: 1.15; font-weight: 790; }.project-body h3 span { font-family: Georgia, serif; font-weight: 400; font-style: italic; color: #4e8981; }.project-brief { font-size: 13px; line-height: 1.85; color: #43556c; margin-bottom: 22px; }.project-insight { padding-top: 16px; border-top: 1px solid #e6ebec; display: flex; flex-direction: column; gap: 7px; margin-bottom: 19px; }.project-insight strong { text-transform: uppercase; letter-spacing: .11em; font-size: 9px; color: #3f8273; }.project-insight span { font-size: 12px; line-height: 1.8; color: #667789; }
.project-tech, .skill-tags { display: flex; flex-wrap: wrap; gap: 7px; }.project-tech span, .skill-tags span { background: #f0f4f5; border: 1px solid #e4eaec; padding: 7px 9px; font-size: 10px; color: #4e6272; font-weight: 650; border-radius: 4px; }
.project-links { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; padding-top: 23px; margin-top: auto; min-height: 70px; }.text-link { display: inline-flex; align-items: center; gap: 8px; color: #126d67; font-size: 12px; font-weight: 850; text-decoration-thickness: 1px; text-underline-offset: 5px; }.text-link:hover { color: #0a3942; }.text-link span { font-size: 16px; text-decoration: none; }.muted-link, .project-note, .under-development { color: #7a8b99; font-size: 10px; }.muted-link { text-underline-offset: 4px; font-weight: 750; }.under-development { font-style: italic; }.projects-disclaimer { margin: 23px 0 0; color: #778993; font-size: 11px; line-height: 1.8; }
.project-ai { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; }
.project-ai .project-visual { min-height: 325px; }
/* visual — locally built product-inspired UI mockups */
.visual-business { color: #d9fff0; background: radial-gradient(circle at 15% 25%, #2e9d83 0, transparent 50%), linear-gradient(135deg,#0e3d39 0%,#062728 100%); }.visual-business::before { content: ''; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; left: -130px; top: 70px; }.visual-business::after { content: ''; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; right: -70px; top: 20px; }
.business-ui { position: absolute; z-index: 2; left: 11%; top: 22%; width: 80%; padding: 17px 21px 20px; color: #214e48; background: #f7fffb; border-radius: 11px; box-shadow: 0 25px 50px rgba(0,26,22,.32); transform: rotate(-4deg); }.business-top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #549787; font-weight: 800; gap: 12px; }.business-mark { color: #156b56; font-size: 20px; font-weight: 950; }.business-mark span { color: #6dcb9f; }.mini-bars { font-size: 13px; color: #669888; }.business-heading { font-size: 20px; font-weight: 790; margin: 21px 0 13px; letter-spacing: -.05em; }.business-heading span { display: block; margin-top: 5px; font-size: 10px; color: #759589; font-weight: 550; letter-spacing: 0; }.business-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.business-tiles > div { min-height: 85px; display: flex; flex-direction: column; padding: 12px 10px; border-radius: 7px; background: #e9f6ee; }.business-tiles > div:nth-child(2) { background: #e7f1f4; }.business-tiles > div:nth-child(3) { background: #f6f4e4; }.business-tiles small { font-size: 8px; font-weight: 850; color: #5b887d; }.tile-line { display: block; height: 6px; background: #afcfbc; border-radius: 20px; margin-top: 12px; }.tile-line + .tile-line { height: 4px; margin-top: 6px; background: #d0e4d7; }.tile-line.long { width: 85%; }.tile-line.short { width: 43%; }.tile-line.medium { width: 67%; }.business-chart { height: 55px; display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 14px; padding-inline: 8px; border-top: 1px solid #dceae3; }.business-chart span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(0deg,#98d9b7,#479980); height: 40%; }.business-chart span:nth-child(2) { height: 70%; }.business-chart span:nth-child(3) { height: 50%; }.business-chart span:nth-child(4) { height: 85%; }.business-chart span:nth-child(5) { height: 60%; }.business-chart span:nth-child(6) { height: 92%; }.business-chart span:nth-child(7) { height: 74%; }
.visual-school { color: #fff; background: #15503c; }.visual-school::before { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%; border: 1px solid #629988; top: -145px; right: -120px; }.school-ui { position: relative; margin: 38px auto 0; width: min(90%, 440px); min-height: 210px; padding: 19px 25px; background: linear-gradient(120deg, #edf5e7 0 50%, #d3e8d3 100%); color: #1c5841; border-radius: 7px 7px 0 0; box-shadow: 0 18px 35px rgba(0,23,15,.23); }.school-nav { display: flex; align-items: center; gap: 9px; font-weight: 850; letter-spacing: .02em; font-size: 8px; line-height: 1.15; }.school-nav > span:first-child { font-size: 23px; }.school-nav-lines { margin-left: auto; color: #488c68; }.school-ui > p { position: relative; z-index: 2; font-family: Georgia,serif; font-size: clamp(19px,2.2vw,28px); line-height: 1.25; margin: 23px 0 0; letter-spacing: -.04em; }.school-ui > p em { color: #618876; }.school-image-pattern { position: absolute; right: 0; bottom: 0; display: flex; height: 88px; width: 52%; overflow: hidden; opacity: .53; }.school-image-pattern span { width: 30%; background: #77ae80; transform: skew(-18deg) translateY(22px); margin-right: 7px; }.school-image-pattern span:nth-child(2) { background: #337b66; transform: skew(-18deg) translateY(6px); }.school-image-pattern span:nth-child(3) { background: #aacb9f; transform: skew(-18deg) translateY(32px); }
.visual-weather { color: #eafcff; background: linear-gradient(140deg,#174b87,#122d5d 56%,#0a2845); }.visual-weather::before { content: ''; position: absolute; height: 310px; width: 310px; border-radius: 50%; background: #74bdff; opacity: .16; filter: blur(35px); top: -90px; right: -50px; }.weather-ui { position: relative; width: min(92%,440px); margin: 38px auto 0; padding: 16px 22px 25px; background: rgba(10,43,80,.65); border: 1px solid #6294c0; border-radius: 10px; box-shadow: 0 20px 50px rgba(2,12,35,.22); }.weather-brand { font-size: 10px; font-weight: 850; letter-spacing: .17em; }.weather-brand span { color: #7dd1ff; }.weather-sun { float: right; color: #ffdf83; font-size: 62px; line-height: 1; transform: translateY(12px); }.weather-title { font-size: 25px; font-weight: 800; letter-spacing: -.04em; margin-top: 20px; line-height: 1.1; }.weather-title em { color: #91ddff; }.weather-pills { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }.weather-pills span { font-size: 9px; background: rgba(200,240,255,.13); padding: 7px; border-radius: 20px; color: #c7ecff; }
.visual-ai { color: #edf5ff; background: radial-gradient(circle at 70% 65%,#2666b2,transparent 51%), linear-gradient(127deg,#0b234a,#101742); }.visual-ai::before { content: ''; position: absolute; width: 300px; height: 300px; border: 1px solid #375996; border-radius: 50%; top: -60px; right: -50px; }.ai-ui { position: relative; width: min(86%,430px); text-align: center; margin: 19px auto 0; }.ai-star { font-size: 43px; color: #73b3ff; text-shadow: 0 0 35px #73b3ff; }.ai-ui p { margin: 9px 0 20px; font-size: 26px; font-weight: 750; line-height: 1.1; }.ai-ui p em { color: #b5d3ff; }.ai-prompt { background: #f2f7ff; color: #7087a6; border-radius: 9px; font-size: 10px; text-align: left; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 22px rgba(0,0,0,.17); }.ai-prompt b { display: grid; place-items: center; color: white; background: #306ee5; width: 25px; height: 25px; border-radius: 5px; font-size: 15px; }
/* expertise */
.section-expertise { padding-top: 112px; border-top: 1px solid var(--line); background: #fff; }.section-head.compact { margin-bottom: 46px; }
.expertise-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.expertise-card { min-height: 331px; padding: 27px 26px; border: 1px solid #e4e9eb; background: #fbfdfc; border-radius: 10px; display: flex; flex-direction: column; }.expertise-index { color: #7d9396; font-size: 10px; font-weight: 750; letter-spacing: .13em; }.expertise-icon { font-size: 29px; color: #27796f; margin-top: 32px; margin-bottom: 18px; }.expertise-card h3 { font-size: 19px; margin: 0 0 11px; letter-spacing: -.03em; }.expertise-card p { font-size: 12px; line-height: 1.8; color: #657586; margin-bottom: 22px; }.skill-tags { margin-top: auto; }.skill-tags span { background: #fff; }
/* method */
.method-section { padding: 112px 0; background: #e7f0ec; }.method-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 120px; }.method-eyebrow { color: #38796e; }.method-section h2 { margin: 24px 0 21px; font-size: clamp(42px,4vw,55px); }.method-section h2 em { color: #4d8c7e; }.method-layout > div > p:last-child { max-width: 400px; color: #526b68; line-height: 1.9; font-size: 13px; }.method-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #becfc8; }.method-list li { display: flex; gap: 23px; padding: 23px 0; border-bottom: 1px solid #becfc8; }.method-list li > span { color: #539082; font-size: 11px; font-weight: 800; padding-top: 5px; }.method-list h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.03em; }.method-list p { margin: 0; color: #667c77; font-size: 12px; line-height: 1.7; }
/* about */
.section-about { background: #fff; }.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }.section-about h2 { font-size: clamp(42px,4.2vw,56px); }.about-signature { margin-top: 51px; color: #e9f4f0; font-size: clamp(110px,15vw,205px); font-weight: 900; letter-spacing: -.11em; line-height: .9; }.about-signature span { color: #8ac4b3; }.about-text { padding-top: 47px; }.about-leading { font-size: 19px; line-height: 1.65; color: #25394b; font-weight: 550; }.about-text > p:not(.about-leading) { font-size: 13px; line-height: 2; color: #627388; }.about-text strong { color: #264e4a; }.about-facts { margin-top: 28px; border-top: 1px solid #e4e9eb; }.about-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 15px; border-bottom: 1px solid #e4e9eb; padding: 15px 0; }.about-facts span { color: #81929c; font-size: 9px; letter-spacing: .08em; font-weight: 800; }.about-facts strong { font-size: 12px; color: #34485b; font-weight: 700; }
/* contact / footer */
.contact-section { overflow: hidden; position: relative; padding: 110px 0 106px; background: #0b1c2d; color: #fff; text-align: center; }.contact-section::before, .contact-section::after { content: ''; position: absolute; height: 480px; width: 480px; border: 1px solid #274761; border-radius: 50%; top: -210px; left: -240px; pointer-events: none; }.contact-section::after { top: auto; left: auto; right: -260px; bottom: -290px; width: 590px; height: 590px; }.contact-inner { position: relative; z-index: 1; }.contact-eyebrow { justify-content: center; color: #95cbbb; }.contact-section h2 { font-size: clamp(48px,6vw,82px); line-height: 1.05; font-weight: 750; margin: 21px 0 23px; }.contact-section h2 em { color: var(--mint); }.contact-section p:not(.eyebrow, .contact-note) { max-width: 520px; color: #bfd0da; font-size: 14px; line-height: 1.95; margin: 0 auto 27px; }.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 22px; }.contact-secondary { color: #d3e1e7; font-size: 12px; font-weight: 650; text-underline-offset: 5px; }.contact-note { margin: 27px auto 0; font-size: 10px; color: #829aa7; }.contact-note code { color: #afd4c8; }.site-footer { background: #071320; color: #8ba0b2; border-top: 1px solid #22364a; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 29px 0; }.footer-identity { display: flex; flex-direction: column; gap: 5px; }.footer-identity a { text-decoration: none; color: #fff; letter-spacing: .08em; font-weight: 850; font-size: 13px; }.footer-identity small { font-size: 9px; }.footer-inner > p { margin: 0; font-size: 10px; }.back-top { color: #b9e7d3; font-size: 11px; white-space: nowrap; text-decoration: none; }
/* responsive */
@media (max-width: 1060px) {
  .hero h1 { font-size: clamp(55px, 6.3vw, 73px); }.hero-layout { grid-template-columns: 1fr .93fr; }.hero-art { margin-left: -30px; }.workspace-window { transform: rotate(-3deg) scale(.94); }.chip-left { left: -17px; }.chip-right { right: -12px; }.method-layout { gap: 68px; }
}
@media (max-width: 820px) {
  .container { width: min(100% - 46px, 670px); }.header-inner { min-height: 76px; }.site-nav { gap: 19px; }.site-nav a { font-size: 11px; }.brand-text { font-size: 12px; }.brand-symbol { width: 36px; height: 36px; flex-basis: 36px; }.brand-text small { display: none; }
  .hero-layout { padding-top: 145px; padding-bottom: 90px; min-height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; }.hero-copy { padding-bottom: 0; }.hero h1 { font-size: clamp(53px,8.4vw,75px); }.hero-lead { max-width: 620px; }.hero-tags { margin-top: 32px; }.hero-art { height: 400px; margin: 25px auto -30px; width: min(100%, 610px); }.workspace-window { transform: rotate(-3deg) scale(.87); width: 94%; }.orbit-one { width: 90%; }.orbit-two { width: 78%; }.label-bottom { bottom: 8px; }.label-top { top: 12px; }.chip-left { left: 4%; bottom: 55px; }.chip-right { right: 2%; top: 60px; }.hero-bottom { bottom: 19px; }
  .section { padding: 83px 0; }.section-head { align-items: flex-start; gap: 17px; flex-direction: column; }.section-head .section-intro { flex: none; max-width: 520px; }.project-grid { gap: 19px; }.project-card-large { grid-template-columns: 1fr; }.project-card-large .project-visual { min-height: 375px; }.project-card-large .project-body { padding: 30px; }.project-visual { min-height: 250px; }.project-body { padding: 23px 20px; }.project-body h3 { font-size: 31px; }.visual-meta { font-size: 8px; }.school-ui { width: 97%; padding: 15px; }.school-ui > p { font-size: 19px; }.weather-ui { width: 99%; }.expertise-grid { grid-template-columns: 1fr 1fr; }.expertise-card:last-child { grid-column: 1/-1; }.method-section { padding: 85px 0; }.method-layout { grid-template-columns: 1fr; gap: 40px; }.about-layout { gap: 30px; }.about-text { padding-top: 40px; }.about-facts > div { grid-template-columns: 95px 1fr; }
}
@media (max-width: 580px) {
  /* M2.1: stack ABDAN AI preview on mobile. */
  .project-ai { grid-template-columns: minmax(0, 1fr); }
  .project-ai .project-visual { min-height: 300px; }
  html { scroll-padding-top: 25px; }.container { width: calc(100% - 36px); }.site-header { position: absolute; }.header-inner { min-height: 106px; flex-direction: column; justify-content: center; gap: 11px; align-items: flex-start; padding-block: 11px; }.brand { gap: 7px; }.brand-symbol { height: 29px; width: 29px; flex-basis: 29px; font-size: 17px; border-radius: 6px; }.brand-text { font-size: 12px; }.site-nav { gap: 21px; width: 100%; justify-content: space-between; }.site-nav a { font-size: 10px; }.site-nav .nav-contact { padding: 8px 9px; font-size: 10px; }.nav-contact span { margin-left: 2px; }
  .hero { min-height: 0; }.hero-layout { padding-top: 160px; padding-bottom: 73px; }.hero-eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 23px; }.hero h1 { font-size: clamp(43px, 11.8vw, 65px); letter-spacing: -.068em; }.hero-lead { font-size: 13px; line-height: 1.9; }.button { min-height: 46px; padding: 13px 14px; gap: 10px; font-size: 11px; }.hero-tags { gap: 5px; }.hero-tags span { font-size: 8px; padding: 7px; }.hero-art { height: 305px; margin-top: 15px; margin-bottom: -13px; }.workspace-window { width: 116%; transform: rotate(-3deg) scale(.74); }.workspace-body { min-height: 290px; }.window-header { font-size: 9px; }.window-signal { display: none; }.orbit-one { width: 94%; height: 300px; }.orbit-two { width: 78%; height: 245px; }.chip-left { left: 0; bottom: 31px; font-size: 9px; padding: 9px; }.chip-right { right: 0; top: 39px; font-size: 9px; padding: 9px; }.label-top, .label-bottom { display: none; }.hero-bottom { font-size: 8px; }.hero-bottom-line { width: 20px; }
  .intro-inner { min-height: 92px; }.intro-inner p { font-size: 18px; }.intro-inner > span { display: none; }.section { padding: 71px 0; }.section-head { margin-bottom: 29px; }.section-head h2, .section-about h2, .method-section h2 { font-size: clamp(36px,10vw,47px); }.section-intro { font-size: 13px; }.project-grid { grid-template-columns: 1fr; gap: 19px; }.project-card-large { grid-column: auto; }.project-visual, .project-card-large .project-visual { min-height: 300px; }.business-ui { width: 84%; left: 8%; top: 22%; }.project-card-large .project-body, .project-body { padding: 24px 21px; }.project-topline { align-items: flex-start; }.project-brief { font-size: 13px; }.project-insight span { font-size: 12px; }.visual-meta { font-size: 8px; }.school-ui { width: 88%; min-height: 205px; }.school-ui > p { font-size: 24px; }.weather-ui { width: 90%; }.project-links { gap: 10px; }.expertise-grid { grid-template-columns: 1fr; gap: 12px; }.expertise-card, .expertise-card:last-child { min-height: 0; grid-column: auto; }.expertise-icon { margin-top: 21px; }.method-section { padding: 73px 0; }.about-layout { grid-template-columns: 1fr; gap: 10px; }.about-signature { display: none; }.about-text { padding-top: 0; }.about-leading { font-size: 17px; }.contact-section { padding: 78px 0; }.contact-section h2 { font-size: clamp(43px, 11vw, 59px); }.contact-section p:not(.eyebrow, .contact-note) { font-size: 12px; }.footer-inner { flex-wrap: wrap; gap: 15px; }.footer-inner p { order: 3; flex-basis: 100%; }.back-top { margin-left: auto; }
}
@media (max-width: 355px) {
  .site-nav { gap: 11px; }.site-nav a { font-size: 9px; }.hero h1 { font-size: 42px; }.hero-actions { gap: 8px; }.button { padding: 12px 10px; }.hero-art { height: 275px; }.workspace-window { transform: rotate(-3deg) scale(.67); }.project-visual, .project-card-large .project-visual { min-height: 270px; }
}
/* M2.1: restrained, one-time motion. Default content stays visible without JS. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes portfolio-enter {
    from { opacity: 0; transform: translate3d(0, 17px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .motion-enabled .hero-eyebrow { animation: portfolio-enter 580ms cubic-bezier(.2,.7,.2,1) both; }
  .motion-enabled .hero h1 { animation: portfolio-enter 670ms cubic-bezier(.2,.7,.2,1) 75ms both; }
  .motion-enabled .hero-lead { animation: portfolio-enter 670ms cubic-bezier(.2,.7,.2,1) 155ms both; }
  .motion-enabled .hero-actions,
  .motion-enabled .hero-tags { animation: portfolio-enter 650ms cubic-bezier(.2,.7,.2,1) 225ms both; }
  .motion-enabled .hero-art { animation: portfolio-enter 760ms cubic-bezier(.2,.7,.2,1) 180ms both; }

  .motion-pending { opacity: 0; transform: translate3d(0, 21px, 0); }
  .motion-pending.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 690ms cubic-bezier(.2,.7,.2,1),
                transform 690ms cubic-bezier(.2,.7,.2,1),
                box-shadow 250ms ease;
  }
  .project-card.motion-pending.motion-visible:hover { transform: translateY(-4px); }
  .project-grid .project-card:nth-child(2).motion-visible { transition-delay: 65ms; }
  .project-grid .project-card:nth-child(3).motion-visible { transition-delay: 110ms; }
  .project-grid .project-card:nth-child(4).motion-visible { transition-delay: 155ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .project-card:hover, .button:hover { transform: none; }
}


/* M2.2-B: fictional Microbusiness story — isolated from other project cards. */
.business-tiles .business-summary-value {
  display: block; margin-top: 11px; color: #236a58; font-size: clamp(8px, 1vw, 11px);
  letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.business-sale-demo {
  position: absolute; inset: 0; z-index: 2; visibility: hidden; opacity: 0;
  display: flex; flex-direction: column; gap: 15px; padding: 23px 22px;
  background: #f7fffb; border-radius: 11px; color: #214e48; pointer-events: none;
}
.business-sale-eyebrow { color: #548e7b; font-weight: 850; font-size: 9px; letter-spacing: .12em; }
.business-sale-field {
  display: flex; flex-direction: column; gap: 8px; padding: 13px;
  border: 1px solid #c8ded4; border-radius: 7px; background: #fff;
}
.business-sale-field > span { font-size: 10px; color: #60877c; }
.business-sale-field strong { font-size: clamp(16px, 2.2vw, 23px); font-variant-numeric: tabular-nums; }
.business-sale-amount { display: inline-block; }
.business-sale-save {
  align-self: stretch; padding: 10px 12px; text-align: center; border-radius: 6px;
  background: #156e56; color: #fff; font-weight: 800; font-size: 11px;
}
.business-sale-confirm { color: #177455; font-weight: 800; font-size: 11px; opacity: 0; }
.story-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.story-replay {
  position: absolute; z-index: 5; right: 17px; bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(211,255,237,.65); border-radius: 6px;
  color: #fff; background: rgba(7,43,39,.93); cursor: pointer;
  font-weight: 800; font-size: 10px; line-height: 1.1; font-family: inherit; padding: 9px 10px;
}
.story-replay[hidden] { display: none; }
.story-replay:hover { background: #126e55; }
.story-replay:focus-visible { outline: 3px solid #ffdd83; outline-offset: 3px; }
.visual-business .visual-footnote { max-width: 58%; opacity: .9; }
@media (max-width: 580px) {
  .story-replay { right: 12px; bottom: 11px; padding: 8px; }
  .business-sale-demo { padding: 16px 14px; gap: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes business-sale-step {
    0% { opacity: 0; transform: translateY(12px); }
    8%, 50% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; transform: translateY(-9px); }
  }
  @keyframes business-type-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes business-confirm-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes business-dashboard-in {
    0%, 48% { opacity: 0; transform: translateY(10px); }
    68%, 100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes business-value-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes business-bar-grow {
    from { transform: scaleY(.06); opacity: .35; }
    to { transform: scaleY(1); opacity: 1; }
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-sale-demo {
    visibility: visible; animation: business-sale-step 4800ms ease both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-sale-amount {
    animation: business-type-in 950ms steps(9, end) 650ms both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-sale-confirm {
    animation: business-confirm-in 450ms ease 1950ms both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-dashboard {
    animation: business-dashboard-in 4800ms ease both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-summary-value {
    animation: business-value-in 600ms ease 3200ms both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span {
    transform-origin: center bottom;
    animation: business-bar-grow 800ms cubic-bezier(.2,.8,.2,1) both;
  }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(1) { animation-delay: 3150ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(2) { animation-delay: 3240ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(3) { animation-delay: 3330ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(4) { animation-delay: 3420ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(5) { animation-delay: 3510ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(6) { animation-delay: 3600ms; }
  [data-story="microbusiness"][data-story-state="playing"] .business-chart span:nth-child(7) { animation-delay: 3690ms; }
}
@media (prefers-reduced-motion: reduce) {
  .story-replay { display: none; }
}


/* M2.2-C: local-only storytelling; defaults display fully without JS. */
.school-story-rule {
  display: block; width: 60%; height: 2px; margin-top: 14px;
  background: #5e9c82; transform-origin: left center;
}
.school-ui { overflow: hidden; }
.weather-location {
  margin-top: 9px; color: #b9e6ff; letter-spacing: .1em; font-size: 9px; font-weight: 800;
}
.weather-current { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.weather-current .weather-title { margin-top: 12px; font-size: clamp(18px, 2vw, 25px); }
.weather-current .weather-sun { float: none; flex: 0 0 auto; font-size: 43px; transform: none; }
.weather-forecast { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 13px; }
.weather-forecast span {
  min-width: 0; display: flex; flex-direction: column; gap: 5px;
  padding: 7px 5px; background: rgba(180,227,255,.13); border-radius: 5px;
  color: #c8eaff; font-size: 8px; letter-spacing: .02em;
}
.weather-forecast b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.weather-trend { display: block; margin-top: 8px; width: 100%; height: 37px; overflow: visible; }
.weather-trend path { fill: none; stroke: #9fe7fa; stroke-width: 2.6; stroke-linecap: round; }
.weather-indicators { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.weather-indicators span {
  border: 1px solid rgba(145,221,255,.3); border-radius: 3px;
  padding: 5px 6px; font-size: 8px; color: #d3ebfa;
}
.visual-weather .weather-ui { margin-top: 18px; padding: 15px 17px 20px; }
.visual-weather .visual-footnote, .visual-school .visual-footnote, .visual-ai .visual-footnote {
  max-width: 60%; opacity: .84;
}
.visual-weather .story-replay { background: #0a3869; }
.visual-ai .story-replay { background: #122a54; }
.ai-processing {
  height: 14px; margin-top: 8px; font-size: 10px; text-align: left;
  color: #a4c7f0; visibility: hidden; opacity: 0;
}
.ai-example-response {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 11px;
  text-align: left; border: 1px solid rgba(150,198,253,.35);
  background: rgba(11,30,70,.45); border-radius: 7px;
}
.ai-example-response strong { color: #88c4ff; font-size: 8px; letter-spacing: .1em; }
.ai-example-response span { color: #f0f6ff; font-size: 10px; line-height: 1.45; }
.ai-example-response small { color: #c7d4ed; font-size: 8px; }
.visual-ai .ai-ui { margin-top: 7px; }
.visual-ai .ai-star { font-size: 31px; }
.visual-ai .ai-ui p { font-size: 23px; margin: 6px 0 11px; }
.visual-ai .ai-prompt { padding: 8px 11px; }
.visual-ai .ai-prompt-text { white-space: nowrap; overflow: hidden; }
.visual-ai .ai-prompt b { flex: 0 0 25px; }
.project-ai .project-visual { min-height: 365px; }
@media (max-width: 580px) {
  .project-ai .project-visual { min-height: 350px; }
  .visual-ai .ai-ui { width: 92%; }
  .visual-ai .ai-ui p { font-size: 22px; }
  .visual-weather .weather-ui { width: 96%; padding: 13px 12px 18px; }
  .weather-current .weather-sun { font-size: 35px; }
  .weather-current .weather-title { font-size: 19px; }
  .weather-location { font-size: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Timeline markers are intentionally invisible; animationend closes the state. */
  @keyframes school-story-timeline { from { opacity: 1; } to { opacity: 1; } }
  @keyframes weather-story-timeline { from { opacity: 1; } to { opacity: 1; } }
  @keyframes ai-story-timeline { from { opacity: 1; } to { opacity: 1; } }
  @keyframes story-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes story-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes story-forecast-line { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
  @keyframes story-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes story-processing {
    0%, 100% { opacity: 0; visibility: hidden; }
    12%, 78% { opacity: 1; visibility: visible; }
  }
  [data-story="school"][data-story-state="playing"] .school-ui { animation: school-story-timeline 2800ms linear both; }
  [data-story="school"][data-story-state="playing"] .school-ui > p { animation: story-rise 650ms ease 170ms both; }
  [data-story="school"][data-story-state="playing"] .school-story-rule { animation: story-draw 740ms ease 820ms both; }
  [data-story="school"][data-story-state="playing"] .school-nav { animation: story-rise 430ms ease 80ms both; }
  [data-story="school"][data-story-state="playing"] .school-image-pattern { animation: story-rise 790ms ease 1510ms both; }
  [data-story="weather"][data-story-state="playing"] .weather-ui { animation: weather-story-timeline 3900ms linear both; }
  [data-story="weather"][data-story-state="playing"] .weather-location { animation: story-rise 490ms ease 100ms both; }
  [data-story="weather"][data-story-state="playing"] .weather-current { animation: story-rise 650ms ease 550ms both; }
  [data-story="weather"][data-story-state="playing"] .weather-forecast span { animation: story-rise 520ms ease both; }
  [data-story="weather"][data-story-state="playing"] .weather-forecast span:nth-child(1) { animation-delay: 1200ms; }
  [data-story="weather"][data-story-state="playing"] .weather-forecast span:nth-child(2) { animation-delay: 1400ms; }
  [data-story="weather"][data-story-state="playing"] .weather-forecast span:nth-child(3) { animation-delay: 1600ms; }
  .weather-trend path { stroke-dasharray: 320; }
  [data-story="weather"][data-story-state="playing"] .weather-trend path { animation: story-forecast-line 920ms ease 2070ms both; }
  [data-story="weather"][data-story-state="playing"] .weather-indicators { animation: story-rise 540ms ease 3150ms both; }
  [data-story="ai"][data-story-state="playing"] .ai-ui { animation: ai-story-timeline 4500ms linear both; }
  [data-story="ai"][data-story-state="playing"] .ai-prompt { animation: story-rise 430ms ease 250ms both; }
  [data-story="ai"][data-story-state="playing"] .ai-prompt-text { display: inline-block; animation: story-type 980ms steps(21,end) 650ms both; }
  [data-story="ai"][data-story-state="playing"] .ai-processing { animation: story-processing 1200ms linear 1710ms both; }
  [data-story="ai"][data-story-state="playing"] .ai-example-response { animation: story-rise 740ms ease 3080ms both; }
  [data-story="ai"][data-story-state="playing"] .ai-example-response span { animation: story-type 690ms steps(15,end) 3420ms both; }
}