:root {
  --red: #ec2d31;
  --red-dark: #cc2026;
  --red-soft: #fff0ef;
  --olive: #aaa579;
  --olive-dark: #7c784f;
  --olive-soft: #f2f0e6;
  --yellow: #fdbb22;
  --yellow-soft: #fff5d8;
  --lime: #a6cf39;
  --lime-soft: #f2f8dd;
  --ink: #171b20;
  --muted: #64686d;
  --border: #e9e6e1;
  --soft-border: #f0ece7;
  --surface: #fbfaf8;
  --white: #fff;
  --footer: #101820;
  --shadow-sm: 0 2px 12px rgba(32, 28, 23, .05);
  --shadow-md: 0 14px 34px rgba(25, 24, 22, .08);
  --shadow-xl: 0 35px 75px rgba(34, 28, 24, .16);
  --radius: 18px;
  --container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--muted); line-height: 1.65; }
h1,h2,h3 { margin: 0; color: var(--ink); font-family: "Plus Jakarta Sans", Inter, sans-serif; letter-spacing: -.045em; }
button { font: inherit; }
.container { width: min(calc(100% - 96px), var(--container)); margin: 0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; top: -48px; left: 20px; z-index: 1000; padding: 12px 18px; color: var(--white); background: var(--red); border-radius: 10px; transition: top .2s; }
.skip-link:focus { top: 18px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; height: 84px; background: rgba(255,255,255,.93); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, backdrop-filter .25s; }
.site-header.is-scrolled { backdrop-filter: blur(18px); border-color: var(--border); box-shadow: 0 9px 28px rgba(16,20,24,.05); }
.nav-wrap { height: 84px; display:flex; align-items:center; gap: 42px; }
.brand { display:inline-flex; align-items:center; gap: 11px; flex-shrink: 0; }
.brand-symbol { width: 46px; height: 46px; object-fit: contain; }
.brand-copy { display:flex; flex-direction:column; gap: 2px; }
.wordmark { font-family: Inter, sans-serif; font-size: 28px; line-height: .95; font-weight: 600; letter-spacing: -.075em; color:#17191e; text-transform: lowercase; }
.wordmark sup { color:var(--red); font-size:.48em; line-height:1; vertical-align:top; margin-left: 3px; letter-spacing:-.02em; font-weight:700; position:relative; top: -.08em; }
.tagline { font-size: 11px; font-weight:600; color:#4b4e52; letter-spacing:-.015em; }
.desktop-nav { display:flex; gap: 36px; align-items:center; margin-left:auto; font-size: 14px; font-weight:600; }
.desktop-nav a { position:relative; transition: color .2s; }
.desktop-nav a::after { content:""; position:absolute; left:0; bottom:-10px; width:100%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition: transform .2s; }
.desktop-nav a:hover { color:var(--red); }
.desktop-nav a:hover::after { transform:scaleX(1); }
.nav-cta { margin-left: 10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 11px; font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s; }
.button svg { width: 20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:var(--red); color:var(--white); box-shadow: 0 13px 25px rgba(236,45,49,.18); }
.button-primary:hover { background:var(--red-dark); box-shadow: 0 16px 28px rgba(236,45,49,.27); }
.button-outline { border:1px solid #d5cec5; background:#fff; color:var(--ink); }
.button-outline:hover { border-color:var(--red); color:var(--red); }
.button-white { min-width: 280px; background:#fff; color:var(--ink); }
.button-white svg { stroke:#39a853; }
.button-white:hover { background:#fff8f8; }
.menu-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:45px; height:45px; margin-left:auto; border:1px solid var(--border); border-radius:12px; background:#fff; }
.menu-toggle span:not(.sr-only) { display:block; width:20px; height:2px; background:var(--ink); margin:0 auto; transition: .2s; }
.mobile-menu { background:#fff; border-top:1px solid var(--border); box-shadow: var(--shadow-md); }
.mobile-menu nav { display:grid; gap:8px; padding:18px 24px 24px; }
.mobile-menu nav > a:not(.button) { padding:11px 6px; font-weight:600; }

/* Hero */
.hero { position:relative; overflow:hidden; padding: 52px 0 36px; min-height: 562px; background: linear-gradient(180deg,#fff 0%,#fff 72%,#fdfbf9 100%); }
.hero-grid { display:grid; grid-template-columns: .92fr 1.26fr; align-items:center; gap: 56px; position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap: 10px; margin-bottom: 18px; color:var(--red); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { width:9px; height:9px; border-radius:50%; background:var(--red); }
.hero-copy h1 { font-size: clamp(38px, 3.45vw, 50px); line-height:1.12; max-width:480px; }
.hero-copy h1 em { color:var(--red); font-style:normal; }
.lead { margin-top:20px; max-width: 500px; font-size:15px; }
.hero-actions { display:flex; gap:14px; margin-top:31px; }
.confidence { display:flex; gap:20px; flex-wrap:wrap; margin-top:30px; font-size:12px; font-weight:600; color:#43474c; }
.confidence span { display:flex; align-items:center; gap:7px; }
.dot { width:13px; height:13px; border-radius:50%; display:inline-block; }
.dot.red{background:var(--red)} .dot.olive{background:var(--olive)} .dot.lime{background:var(--lime)}
.hero-showcase { position:relative; padding: 14px 2px 20px; }
.browser-frame { position:relative; overflow:hidden; padding: 0 0 0; background:#121316; border-radius:15px; box-shadow: 0 35px 62px rgba(28,24,18,.2); border: 1px solid #dcd5cd; }
.browser-top { height: 25px; display:flex; align-items:center; gap:6px; padding:0 11px; background:#101114; color:#8d929a; }
.browser-top span { display:block; width:6px; height:6px; border-radius:50%; background:#73767a; }
.browser-top small { margin-left: 12px; font-size:9px; color:#a7abb0; }
.browser-frame img { width:100%; height:auto; aspect-ratio: 1366 / 720; object-fit:cover; object-position:center top; }
.project-chip { position:absolute; bottom:0; left:50%; transform:translateX(-50%); border: 1px solid var(--border); background: #fff; border-radius:30px; box-shadow: var(--shadow-sm); padding: 8px 20px; font-size:12px; font-weight:600; }
.shape { position:absolute; z-index:0; }
.shape-yellow { width:28px; height:28px; border-radius:50%; background:var(--yellow); top:50px; left:max(calc((100vw - var(--container))/2 - 54px),20px); }
.shape-olive { left:0; bottom:40px; width:48px; height:200px; background:var(--olive); border-radius:0 44px 0 0; }
.shape-red { left:0; bottom:40px; width:48px; height:98px; background:var(--red); border-radius:0 56px 0 0; }
.shape-lime { right:0; bottom:42px; width:55px; height:94px; background:var(--lime); border-radius:62px 0 0 0; }
.dots { position:absolute; top:80px; right:13px; width:36px; height:112px; opacity:.48; background-image:radial-gradient(#d8d3cb 2px, transparent 2px); background-size:12px 12px; }

/* Strip */
.capability-strip { position:relative; z-index:3; margin-top:0; padding-bottom: 26px; }
.capability-grid { min-height:94px; border:1px solid var(--border); border-radius:17px; background:#fff; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:repeat(5,1fr); padding: 18px 29px; gap:16px; }
.capability-grid article { display:flex; align-items:center; justify-content:center; gap:16px; border-right:1px solid var(--soft-border); }
.capability-grid article:last-child { border:none; }
.capability-grid strong { display:block; font-size:14px; }
.capability-grid small { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.cap-icon { display:grid; place-items:center; width:38px; height:38px; font-size:23px; font-weight:500; }
.cap-icon.red{color:var(--red)} .cap-icon.olive{color:var(--olive-dark)} .cap-icon.yellow{color:#e59b00} .cap-icon.lime{color:#76a316}

/* common sections */
.section { padding: 29px 0 0; }
.section-heading { text-align:center; margin-bottom:24px; }
.kicker { color:var(--red); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin-bottom: 7px; }
.section-heading h2 { font-size: 25px; letter-spacing:-.05em; }
.problem-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.info-card { min-height:178px; border:1px solid var(--border); border-radius:15px; padding:21px 22px; background:#fff; box-shadow: 0 5px 15px rgba(24,23,21,.025); }
.info-card h3 { font-size:15px; margin:14px 0 9px; letter-spacing:-.035em; }
.info-card p { font-size:12.5px; line-height:1.65; }
.icon-bubble { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:20px; font-weight:700; }
.icon-bubble.red { background:var(--red-soft); color:var(--red); }
.icon-bubble.olive { background:var(--olive-soft); color:var(--olive-dark); }
.icon-bubble.yellow { background:var(--yellow-soft); color:#e19b00; }
.icon-bubble.lime { background:var(--lime-soft); color:#77a615; }

/* services */
.services { padding-top:32px; }
.services-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.service-card { min-height:183px; text-align:center; border:1px solid var(--border); border-radius:15px; padding:19px 16px; background:#fff; }
.service-icon { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 14px; border-radius:11px; font-size:23px; font-weight:700; }
.service-icon.red { background:var(--red-soft); color:var(--red); }
.service-icon.olive { background:var(--olive-soft); color:var(--olive-dark); }
.service-icon.yellow { background:var(--yellow-soft); color:#e19b00; font-size:15px; }
.service-icon.lime { background:var(--lime-soft); color:#79a614; }
.service-card h3 { font-size:14px; margin-bottom:9px; }
.service-card p { font-size:12px; line-height:1.6; }

/* portfolio */
.portfolio { padding-top:34px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.work-card { overflow:hidden; border:1px solid var(--border); background:#fff; border-radius:14px; transition: transform .22s, box-shadow .22s; }
.work-card:hover { transform: translateY(-4px); box-shadow:var(--shadow-md); }
.work-media { height:112px; overflow:hidden; background:#f3f3f3; border-bottom:1px solid var(--border); display:flex; justify-content:center; }
.work-media.landscape img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.work-media.mobile img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.work-content { padding:11px 12px 15px; }
.badge { display:inline-flex; padding:3px 7px; margin-bottom:8px; border-radius:6px; color:#fff; font-size:9px; line-height:1; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.badge.red { background:var(--red); } .badge.olive { background:var(--olive); } .badge.yellow { background:var(--yellow); color:#5a4300; } .badge.lime { background:var(--lime); color:#3d5800; }
.work-content h3 { font-size:14px; margin-bottom:7px; }
.work-content p { min-height:60px; font-size:11.5px; line-height:1.55; }
.work-content a { display:inline-flex; gap:6px; margin-top:10px; font-size:11.5px; font-weight:700; transition: color .2s; }
.work-content a:hover { color:var(--red); }
.internal-experience { display:flex; align-items:center; gap:28px; margin-top:22px; padding:20px 25px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.internal-experience h3 { font-size:18px; white-space:nowrap; }
.internal-experience .kicker { margin-bottom:3px; }
.internal-experience > p { font-size:13px; flex:1; }
.confidential { flex-shrink:0; font-size:11px; font-weight:700; color:var(--olive-dark); background:var(--olive-soft); border-radius:50px; padding:9px 14px; }

/* process */
.process { padding:36px 0 35px; }
.process-grid { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr; align-items:center; gap:10px; }
.process-card { min-height:137px; border:1px solid var(--border); border-radius:15px; padding:18px 17px; background:#fff; }
.process-card b { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; margin-bottom:13px; color:#fff; font-size:11px; }
.process-card b.red { background:var(--red); } .process-card b.olive { background:var(--olive); } .process-card b.yellow { background:var(--yellow); color:#644600; } .process-card b.lime { background:var(--lime); color:#486600; }
.process-card h3 { font-size:13px; margin-bottom:7px; }
.process-card p { font-size:11.5px; line-height:1.55; }
.arrow { text-align:center; font-size:22px; color:#a7a39e; }

/* CTA + footer */
.cta { margin-top: 2px; }
.cta-inner { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:132px; padding:30px 52px; border-radius:18px 18px 0 0; background:linear-gradient(103deg,#df252c 0%,#ee3034 68%,#d8242b 100%); }
.cta-inner::after { content:""; position:absolute; right:-80px; bottom:-90px; width:240px; height:240px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.cta-inner h2 { color:#fff; font-size:27px; letter-spacing:-.05em; margin-bottom:7px; }
.cta-inner p { color:rgba(255,255,255,.91); }
.cta-inner .button { position:relative; z-index:1; }
.footer { background:var(--footer); color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.65fr .82fr 1.04fr 1.38fr; gap:54px; padding:35px 0 29px; }
.footer .brand-symbol { width:48px; height:48px; }
.footer .wordmark { color:#f6f6f6; }
.footer .tagline { color:#bdc3c8; }
.footer-brand p { max-width:290px; margin-top:17px; font-size:13px; color:#b6bdc2; }
.footer-grid h3 { font-size:13px; letter-spacing:0; margin:7px 0 15px; color:#fff; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; gap:9px; }
.footer-grid > div:not(.footer-brand) a, .footer-grid > div:not(.footer-brand) p { color:#c4c8cc; font-size:12.5px; line-height:1.4; transition:color .2s; }
.footer-grid > div:not(.footer-brand) a:hover { color:#fff; }
.socials { display:flex; gap:9px; margin-top:20px; }
.socials a { display:grid; place-items:center; width:31px; height:31px; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; font-weight:600; }
.footer-bottom { display:flex; justify-content:space-between; padding:18px 0 23px; border-top:1px solid rgba(255,255,255,.12); color:#98a0a6; font-size:11px; }
.floating-wa { display:none; position:fixed; z-index:80; right:18px; bottom:18px; align-items:center; justify-content:center; width:55px; height:55px; border-radius:50%; background:#35b85b; color:#fff; box-shadow:0 15px 30px rgba(27,125,54,.25); }
.floating-wa svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .container { width:min(calc(100% - 48px),var(--container)); }
  .nav-wrap { gap:24px; }
  .desktop-nav { gap:22px; }
  .nav-cta { padding:0 15px; }
  .hero-grid { gap:30px; grid-template-columns: .9fr 1.1fr; }
  .hero-copy h1 { font-size:39px; }
  .capability-grid { padding-left:15px; padding-right:15px; }
  .capability-grid article { gap:9px; }
  .services-grid,.portfolio-grid { gap:12px; }
  .footer-grid { gap:26px; }
}
@media (max-width: 920px) {
  .site-header,.nav-wrap { height:74px; }
  .brand-symbol { width:42px;height:42px; }
  .wordmark { font-size:24px; }
  .desktop-nav,.nav-cta { display:none; }
  .menu-toggle { display:flex; }
  .hero { padding-top:35px; }
  .hero-grid { display:flex; flex-direction:column; align-items:stretch; }
  .hero-copy { text-align:center; }
  .eyebrow,.hero-actions,.confidence { justify-content:center; }
  .hero-copy h1,.lead { margin-left:auto; margin-right:auto; }
  .shape-olive,.shape-red,.shape-lime,.dots { display:none; }
  .capability-grid { grid-template-columns:repeat(2,1fr); gap:0; padding:10px 15px; }
  .capability-grid article { justify-content:flex-start; min-height:62px; border-right:0; border-bottom:1px solid var(--soft-border); padding-left:16px; }
  .capability-grid article:last-child { grid-column:span 2; border-bottom:0; }
  .problem-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid .work-card:first-child { grid-column: span 2; }
  .portfolio-grid .work-card:first-child .work-media { height:250px; }
  .internal-experience { flex-direction:column; align-items:flex-start; gap:12px; }
  .process-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .process-grid .arrow { display:none; }
  .process-card:last-of-type { grid-column:span 2; }
  .cta-inner { flex-direction:column; align-items:flex-start; padding:27px 28px; border-radius:16px 16px 0 0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:span 2; }
  .floating-wa { display:flex; }
}
@media (max-width: 600px) {
  .container { width:calc(100% - 34px); }
  .brand-copy .tagline { font-size:10px; }
  .wordmark { font-size:23px; }
  .hero { padding:28px 0 18px; }
  .shape-yellow { width:18px; height:18px; left:15px; top:30px; opacity:.75; }
  .eyebrow { font-size:10px; margin-bottom:14px; }
  .hero-copy h1 { font-size:33px; line-height:1.16; }
  .lead { font-size:14px; margin-top:16px; }
  .hero-actions { display:grid; gap:10px; margin-top:25px; }
  .confidence { gap:11px; margin-top:21px; font-size:11px; }
  .hero-showcase { padding-top:8px; }
  .browser-frame { border-radius:11px; }
  .browser-top { height:20px; }
  .project-chip { font-size:10px; padding:7px 14px; }
  .capability-strip { padding-top:18px; }
  .capability-grid { display:block; padding:10px 18px; }
  .capability-grid article { justify-content:flex-start; border-bottom:1px solid var(--soft-border); min-height:58px; padding-left:0; }
  .capability-grid article:last-child { border-bottom:0; }
  .section { padding-top:28px; }
  .section-heading h2 { font-size:23px; }
  .problem-grid,.services-grid,.portfolio-grid { grid-template-columns:1fr; }
  .portfolio-grid .work-card:first-child { grid-column:auto; }
  .portfolio-grid .work-card:first-child .work-media,.work-media { height:185px; }
  .work-media.mobile img { object-fit:contain; padding:8px; }
  .info-card,.service-card { min-height:unset; }
  .services-grid .service-card { text-align:left; padding:18px; }
  .service-icon { margin:0 0 12px; }
  .process-grid { grid-template-columns:1fr; }
  .process-card:last-of-type { grid-column:auto; }
  .cta-inner h2 { font-size:24px; }
  .button-white { width:100%; min-width:0; }
  .footer-grid { grid-template-columns:1fr; padding-top:29px; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; gap:7px; }
}

/* Portfolio Showcase v2 — project format follows the actual product type */
.portfolio { padding-top: 46px; }
.portfolio-heading { max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.portfolio-intro { max-width: 680px; margin: 12px auto 0; font-size: 14px; }
.featured-project { display:grid; grid-template-columns: .86fr 1.14fr; gap: 42px; align-items:center; padding: 40px; border-radius: 24px; background: #111922; color: #fff; box-shadow: var(--shadow-xl); overflow:hidden; position:relative; }
.featured-project::after { content:""; position:absolute; left:-85px; bottom:-135px; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(236,45,49,.26) 0%, rgba(236,45,49,0) 68%); }
.featured-copy { position:relative; z-index:1; }
.featured-copy h3 { margin: 14px 0 7px; color:#fff; font-size: 34px; }
.featured-copy h4 { margin:0 0 15px; max-width:390px; font: 600 20px/1.35 "Plus Jakarta Sans",Inter,sans-serif; letter-spacing:-.04em; color:#fff; }
.featured-copy p { max-width:420px; color:rgba(255,255,255,.72); font-size:13.5px; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.tag-list span { padding:7px 11px; border:1px solid rgba(255,255,255,.15); border-radius:999px; font-size:11px; font-weight:600; color:rgba(255,255,255,.87); }
.project-button { min-height:46px; padding:0 18px; }
.featured-visual { position:relative; z-index:1; }
.portfolio-browser { overflow:hidden; border-color:rgba(255,255,255,.14); box-shadow:0 28px 60px rgba(0,0,0,.32); }
.portfolio-browser .browser-top { background:#f1eeea; }
.portfolio-browser img { width:100%; }
.web-system-showcase { display:grid; grid-template-columns:1.07fr .93fr; align-items:center; gap:34px; margin-top:28px; padding:28px; background:var(--surface); border:1px solid var(--border); border-radius:22px; }
.system-visual { overflow:hidden; padding:10px; border-radius:16px; border:1px solid #e5e0da; background:#fff; box-shadow:var(--shadow-sm); }
.system-visual img { width:100%; height:auto; border-radius:9px; }
.system-copy h3 { font-size:27px; margin:13px 0 6px; }
.system-copy h4 { margin:0 0 11px; font:600 16px/1.45 "Plus Jakarta Sans",Inter,sans-serif; letter-spacing:-.035em; color:var(--ink); }
.system-copy p { font-size:13px; }
.system-copy .tag-list { margin:17px 0 15px; }
.tag-list.compact span { color:var(--muted); border-color:var(--border); background:#fff; padding:6px 10px; }
.project-link { display:inline-flex; align-items:center; gap:7px; margin-top:4px; color:var(--ink); font-size:13px; font-weight:700; transition:color .2s, gap .2s; }
.project-link:hover { color:var(--red); gap:11px; }
.mobile-showcase { margin-top:49px; }
.mobile-heading { margin-bottom:29px; }
.mobile-project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1030px; margin:0 auto; }
.phone-project { overflow:hidden; border:1px solid var(--border); border-radius:22px; background:#fff; transition:transform .23s, box-shadow .23s; }
.phone-project:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.phone-stage { display:flex; align-items:flex-end; justify-content:center; height:500px; padding:27px 22px 0; overflow:hidden; border-bottom:1px solid var(--border); }
.stage-blue { background:linear-gradient(180deg,#eaf5fc 0%,#f8fbfe 100%); }
.stage-olive { background:linear-gradient(180deg,#f2f4e9 0%,#fbfbf7 100%); }
.stage-cyan { background:linear-gradient(180deg,#eaf8fb 0%,#f7fcfc 100%); }
.phone-device { position:relative; height:474px; aspect-ratio:702/1600; overflow:hidden; border:7px solid #1d2025; border-radius:31px 31px 0 0; background:#fff; box-shadow:0 20px 36px rgba(23,27,32,.17); }
.phone-speaker { position:absolute; top:9px; left:50%; z-index:2; width:48px; height:4px; border-radius:9px; transform:translateX(-50%); background:rgba(20,25,29,.56); }
.phone-device img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone-copy { padding:22px 22px 24px; }
.phone-copy h3 { margin:8px 0 8px; font-size:21px; }
.phone-copy p { min-height:65px; font-size:12.5px; }
.phone-copy .tag-list { margin:15px 0 14px; }
.confidential-block { display:grid; grid-template-columns:.82fr 1.18fr; gap:30px; margin-top:48px; padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:20px; }
.confidential-head h3 { margin:5px 0 10px; font-size:23px; }
.confidential-head p:last-child { font-size:13px; }
.confidential-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.confidential-cards article { padding:18px; border:1px solid var(--border); border-radius:15px; background:#fff; }
.confidential-cards span { display:inline-flex; margin-bottom:12px; padding:5px 9px; border-radius:30px; background:var(--olive-soft); color:var(--olive-dark); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.confidential-cards h4 { margin:0 0 8px; font:700 14px/1.38 "Plus Jakarta Sans",Inter,sans-serif; letter-spacing:-.035em; color:var(--ink); }
.confidential-cards p { font-size:12px; }

@media (max-width: 920px) {
  .featured-project, .web-system-showcase, .confidential-block { grid-template-columns:1fr; }
  .featured-project { gap:26px; padding:28px; }
  .featured-copy h3 { font-size:30px; }
  .web-system-showcase { gap:22px; }
  .mobile-project-grid { grid-template-columns:1fr; max-width:395px; }
  .phone-stage { height:520px; }
  .phone-device { height:494px; }
}
@media (max-width: 600px) {
  .portfolio { padding-top:34px; }
  .portfolio-heading { margin-bottom:22px; }
  .portfolio-intro { font-size:13px; }
  .featured-project { padding:23px 19px 21px; border-radius:18px; }
  .featured-copy h3 { font-size:27px; }
  .featured-copy h4 { font-size:17px; }
  .web-system-showcase { padding:16px; border-radius:17px; }
  .system-copy h3 { font-size:24px; }
  .mobile-showcase { margin-top:38px; }
  .phone-stage { height:485px; padding:22px 19px 0; }
  .phone-device { height:466px; }
  .phone-copy { padding:19px 18px 21px; }
  .confidential-block { margin-top:35px; padding:18px; gap:20px; }
  .confidential-cards { grid-template-columns:1fr; }
}