/* Skip link */
  .skip-link {position:absolute; top:-100%; left:50%; transform:translateX(-50%); padding:12px 24px; background:var(--c-dark); color:var(--c-white); font-family:var(--f-body); font-size:0.875rem; font-weight:600; border-radius:0 0 var(--r-md) var(--r-md); z-index:10000; transition:top 0.2s;}
  .skip-link:focus {top:0;}
/* ============================================
   CSS VARIABLES
   ============================================ */
  :root {--c-bg:#FAF6F1; --c-bg-elevated:#F5EDE3; --c-bg-card:#FFFFFF; --c-bg-card-hover:#FBF7F2; --c-surface:#F0E8DD; --c-border:rgba(168, 145, 120, 0.18); --c-border-hover:rgba(168, 145, 120, 0.3); --c-text-primary:#3D3229; --c-text-secondary:#6B5D50; --c-text-tertiary:#A89882; /* Accent Palette - Muted warm tones */ --c-accent:#C4956A; --c-accent-hover:#B5845A; --c-accent-dim:rgba(196, 149, 106, 0.12); --c-accent-glow:rgba(196, 149, 106, 0.25); /* Sub-accent colors from the reference */ --c-sage:#A8B5A0; --c-sage-dim:rgba(168, 181, 160, 0.15); --c-rose:#C9A09A; --c-rose-dim:rgba(201, 160, 154, 0.15); --c-sand:#D4C4A8; --c-sand-dim:rgba(212, 196, 168, 0.15); --c-terracotta:#C08B70; --c-terracotta-dim:rgba(192, 139, 112, 0.15); --c-white:#ffffff; --c-black:#000000; /* Dark surface (for featured cards, CTA, footer) */ --c-dark:#3D3229; --c-dark-surface:#4A3F35; /* Shadows - warmer tones */ --shadow-sm:0 1px 3px rgba(100, 80, 60, 0.06), 0 1px 2px rgba(100, 80, 60, 0.04); --shadow-md:0 4px 12px rgba(100, 80, 60, 0.08), 0 2px 4px rgba(100, 80, 60, 0.04); --shadow-lg:0 12px 32px rgba(100, 80, 60, 0.1), 0 4px 8px rgba(100, 80, 60, 0.05); --shadow-hover:0 8px 24px rgba(100, 80, 60, 0.14), 0 4px 8px rgba(100, 80, 60, 0.06); /* Typography */ --f-display:'Pretendard', sans-serif; --f-body:'Pretendard', sans-serif; /* Spacing */ --s-section:clamp(80px, 12vh, 140px); --s-gutter:clamp(20px, 5vw, 80px); --s-container:min(1280px, 90vw); /* Radius */ --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:100px; /* Transitions */ --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --t-base:0.4s var(--ease-out-expo); --t-slow:0.7s var(--ease-out-expo); --t-fast:0.25s var(--ease-out-expo); /* Colors - Warm Beige Mode (aura-inspired) */}
 /* ============================================
     RESET & BASE
     ============================================ */
  *, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
  html {scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
  body {overflow-x:hidden; background:var(--c-bg); color:var(--c-text-primary); font-family:var(--f-body); font-weight:500; line-height:1.6;}
  img {display:block; max-width:100%; height:auto;}
  a {color:inherit; text-decoration:none;}
  button {border:none; background:none; color:inherit; font-family:inherit; cursor:pointer;}
 /* ============================================
     NOISE OVERLAY (very subtle on white)
     ============================================ */
  body::before {content:''; position:fixed; z-index:9999; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:128px 128px; opacity:0.015; pointer-events:none;}
 /* ============================================
     UTILITY CLASSES
     ============================================ */
  .container {width:var(--s-container); margin:0 auto;}
  .sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border-width:0; white-space:nowrap; clip:rect(0, 0, 0, 0);}
 /* Reveal animation classes */
  .reveal {opacity:0; transform:translateY(40px); transition:opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);}
  .reveal.is-visible {opacity:1; transform:translateY(0);}
  .reveal-delay-1 {transition-delay:0.1s;}
  .reveal-delay-2 {transition-delay:0.2s;}
  .reveal-delay-3 {transition-delay:0.3s;}
  .reveal-delay-4 {transition-delay:0.4s;}
  .reveal-delay-5 {transition-delay:0.5s;}
  .reveal-delay-6 {transition-delay:0.6s;}
 /* ============================================
     NAVIGATION
     ============================================ */
  .nav {display:flex; justify-content:space-between; align-items:center; position:fixed; z-index:1000; top:0; right:0; left:0; padding:16px var(--s-gutter); transition:background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;}
  .nav.is-scrolled {background:rgba(250, 246, 241, 0.88); box-shadow:0 1px 0 rgba(168, 145, 120, 0.1); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);}
  .nav__logo {display:flex; flex-shrink:0; align-items:center; gap:12px;}
  .nav__logo-icon {display:none;}
  .nav__logo:hover .nav__logo-icon {transform:scale(1.08) rotate(-3deg);}
  .nav__logo-icon svg {display:block; filter:drop-shadow(0 2px 8px rgba(196, 149, 106, 0.35));}
  .nav__logo-text {color:var(--c-text-primary); font-family:'Varino', sans-serif; font-size:1.6rem; font-weight:normal; letter-spacing:0.02em; line-height:1;}
  .nav__logo-text em {background:linear-gradient(135deg, var(--c-text-primary) 20%, var(--c-accent) 100%); background-clip:text; -webkit-background-clip:text; font-weight:normal; font-style:normal; -webkit-text-fill-color:transparent;}
  .nav__pill {display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:rgba(0, 0, 0, 0.03); backdrop-filter:blur(10px);}
  .nav__link {padding:8px 16px; border-radius:var(--r-pill); color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.875rem; font-weight:600; letter-spacing:0.01em; transition:color var(--t-fast), background var(--t-fast);}
  .nav__link:hover {background:rgba(0, 0, 0, 0.04); color:var(--c-text-primary);}
  .nav__cta {padding:10px 24px; border-radius:var(--r-pill); background:var(--c-text-primary); color:#ffffff; font-family:var(--f-display); font-size:0.8125rem; font-weight:700; letter-spacing:0.01em; transition:background var(--t-fast), transform var(--t-fast);}
  .nav__cta:hover {background:var(--c-accent); color:var(--c-white); transform:scale(1.03);}
 /* Mobile nav */
  .nav__toggle {display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px;}
  .nav__toggle span {display:block; width:20px; height:2px; border-radius:2px; background:var(--c-text-primary); transition:transform var(--t-fast), opacity var(--t-fast);}
  .nav__toggle.is-open span:nth-child(1) {transform:translateY(6.5px) rotate(45deg);}
  .nav__toggle.is-open span:nth-child(2) {opacity:0;}
  .nav__toggle.is-open span:nth-child(3) {transform:translateY(-6.5px) rotate(-45deg);}
  @media (max-width:768px) {
    .nav__pill {flex-direction:column; gap:8px; position:fixed; top:72px; right:16px; left:16px; padding:24px; border-radius:var(--r-lg); background:rgba(250, 246, 241, 0.98); opacity:0; box-shadow:var(--shadow-lg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); pointer-events:none; transform:translateY(-20px); transition:transform var(--t-base), opacity var(--t-base);}
    .nav__pill.is-open {opacity:1; pointer-events:all; transform:translateY(0);}
    .nav__link {width:100%; padding:14px 16px; text-align:center;}
    .nav__cta {width:100%; margin-top:8px; text-align:center;}
    .nav__toggle {display:flex;}
  }
 /* ============================================
     HERO SECTION
     ============================================ */
  .hero {display:flex; align-items:center; position:relative; min-height:100vh; padding:120px var(--s-gutter) 80px; overflow:hidden; background:var(--c-bg);}
 /* 2-column layout:left slogan + right visual */
  .hero__inner {display:grid; align-items:center; gap:48px; grid-template-columns:1fr 1fr; position:relative; z-index:1; width:100%; max-width:var(--s-container); margin:0 auto;}
 /* Right visual */
  .hero__visual {position:relative; width:100%; pointer-events:none; animation:hero-visual-float 6s var(--ease-in-out) infinite;}
  @media (max-width:968px) {
    .hero__inner {gap:56px; grid-template-columns:1fr;}
    .hero__visual {max-width:480px; margin:0 auto;}
  }
  @media (max-width:768px) {
    .hero__visual {display:none;}
  }
 /* ============================================
     HERO FLOW VISUAL (개발 프로세스 플로우)
     ============================================ */
  .hero-flow {position:relative; display:flex; flex-direction:column; gap:16px; padding:20px 0;}
  .hero-flow__line {position:absolute; top:0; left:36px; width:2px; height:100%; z-index:0;}
  .hero-flow__card {position:relative; z-index:1; display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--c-bg-card); border:1.5px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo); opacity:0; animation:flow-card-in 0.6s var(--ease-out-expo) forwards;}
  .hero-flow__card--1 {animation-delay:0.5s;}
  .hero-flow__card--2 {animation-delay:0.7s;}
  .hero-flow__card--3 {animation-delay:0.9s;}
  .hero-flow__card--4 {animation-delay:1.1s;}
  .hero-flow__card--5 {animation-delay:1.3s;}
  @keyframes flow-card-in {from {opacity:0; transform:translateX(30px);} to {opacity:1; transform:translateX(0);}}
  .hero-flow__card--active {border-color:var(--c-accent); box-shadow:var(--shadow-md), 0 0 0 3px var(--c-accent-dim); background:var(--c-bg-card);}
  .hero-flow__card-icon {width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .hero-flow__card-body {flex:1; min-width:0;}
  .hero-flow__card-step {font-family:var(--f-display); font-size:0.6875rem; font-weight:700; color:var(--c-text-tertiary); letter-spacing:0.06em; display:block; margin-bottom:2px;}
  .hero-flow__card-title {font-family:var(--f-display); font-size:0.95rem; font-weight:800; color:var(--c-text-primary); letter-spacing:-0.02em; display:block; margin-bottom:2px;}
  .hero-flow__card-desc {font-family:var(--f-body); font-size:0.8rem; font-weight:500; color:var(--c-text-tertiary);}
  .hero-flow__card-avatars {display:flex; flex-shrink:0;}
  .hero-flow__avatar {width:38px; height:38px; border-radius:50%; border:2.5px solid var(--c-bg-card); background:var(--c-surface); object-fit:cover; margin-left:-10px; box-shadow:0 1px 4px rgba(100,80,60,0.1);}
  .hero-flow__avatar:first-child {margin-left:0;}
  .hero-flow__card-check {flex-shrink:0;}
  .hero-flow__card-pulse {flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 0 0 rgba(196,149,106,0.4); animation:flow-pulse 2s ease infinite;}
  @keyframes flow-pulse {0% {box-shadow:0 0 0 0 rgba(196,149,106,0.4);} 70% {box-shadow:0 0 0 8px rgba(196,149,106,0);} 100% {box-shadow:0 0 0 0 rgba(196,149,106,0);}}
  .hero-flow__badge {position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--shadow-md); font-family:var(--f-body); font-size:0.75rem; font-weight:600; color:var(--c-text-secondary); animation:hero-badge-float 5s var(--ease-in-out) infinite;}
  .hero-flow__badge--top {top:8px; right:-10px; animation-delay:0.3s;}
  .hero-flow__badge--bottom {bottom:-10px; left:-10px; animation-delay:1.5s;}
  .hero-flow__badge-dot {width:7px; height:7px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 6px rgba(196,149,106,0.4);}
  .hero-flow__badge-dot--sage {background:var(--c-sage); box-shadow:0 0 6px rgba(168,181,160,0.4);}
  @keyframes hero-badge-float {0%, 100% {transform:translateY(0);} 50% {transform:translateY(-8px);}}
 /* Grid lines - subtle black on white */
  .hero__grid {position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),   linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size:20px 20px; pointer-events:none;}
  .hero__content {position:relative; z-index:1;}
  .hero__badge {display:inline-flex; align-items:center; gap:8px; margin-bottom:32px; padding:8px 18px; border:1px solid rgba(196, 149, 106, 0.2); border-radius:var(--r-pill); background:var(--c-accent-dim); opacity:0; color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.8125rem; font-weight:600; letter-spacing:0.04em; transform:translateY(20px); animation:hero-reveal 0.8s var(--ease-out-expo) 0.2s forwards;}
  .hero__badge::before {content:''; width:6px; height:6px; border-radius:50%; background:var(--c-accent); animation:pulse-dot 2s ease infinite;}
  @keyframes pulse-dot {
    0%, 100% {opacity:1; transform:scale(1);}
    50% {opacity:0.5; transform:scale(0.8);}
  }
  @keyframes hero-reveal {
    to {opacity:1; transform:translateY(0);}
  }
  .hero__title {margin-bottom:32px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(2rem, 5vw, 4.5rem); font-weight:700; letter-spacing:-0.04em; line-height:1.1; word-break:keep-all; overflow-wrap:break-word;}
  .hero__title em {white-space:nowrap;}
  .hero__title-line {display:block; overflow:hidden;}
  .hero__title-text {display:inline-block; opacity:0; transform:translateY(100%); animation:title-slide-up 1s var(--ease-out-expo) forwards;}
  .hero__title-line:nth-child(1) .hero__title-text {animation-delay:0.4s;}
  .hero__title-line:nth-child(2) .hero__title-text {animation-delay:0.55s;}
  .hero__title-line:nth-child(3) .hero__title-text {animation-delay:0.7s;}
  @keyframes title-slide-up {
    to {opacity:1; transform:translateY(0);}
  }
  .hero__title em {display:inline-block; position:relative; color:var(--c-dark); font-style:normal;}
  .hero__title em::after {content:''; position:absolute; right:0; bottom:0.05em; left:0; height:0.08em; border-radius:2px; background:var(--c-accent);}
  .hero__subtitle {max-width:520px; margin-bottom:48px; opacity:0; color:var(--c-text-secondary); font-family:var(--f-body); font-size:clamp(1rem, 1.5vw, 1.2rem); line-height:1.75; transform:translateY(20px); animation:hero-reveal 0.8s var(--ease-out-expo) 0.8s forwards;}
  .hero__actions {display:flex; flex-wrap:wrap; gap:16px; margin-bottom:72px; opacity:0; transform:translateY(20px); animation:hero-reveal 0.8s var(--ease-out-expo) 1s forwards;}
  .btn-primary {display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:var(--r-pill); background:var(--c-dark); color:#ffffff; font-family:var(--f-display); font-size:0.9rem; font-weight:700; letter-spacing:0.01em; transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);}
  .btn-primary:hover {background:var(--c-accent); box-shadow:0 8px 24px rgba(196, 149, 106, 0.35); color:var(--c-white); transform:translateY(-2px);}
  .btn-secondary {display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border:1.5px solid var(--c-border); border-radius:var(--r-pill); background:transparent; color:var(--c-text-primary); font-family:var(--f-display); font-size:0.9rem; font-weight:700; letter-spacing:0.01em; transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);}
  .btn-secondary:hover {border-color:rgba(0, 0, 0, 0.3); background:rgba(0, 0, 0, 0.03); transform:translateY(-2px);}
  .hero__stats {display:flex; flex-wrap:wrap; gap:48px; opacity:0; transform:translateY(20px); animation:hero-reveal 0.8s var(--ease-out-expo) 1.2s forwards;}
  .hero__stat {display:flex; flex-direction:column; gap:4px;}
  .hero__stat-value {color:var(--c-text-primary); font-family:var(--f-display); font-size:2rem; font-weight:800; letter-spacing:-0.04em; line-height:1;}
  .hero__stat-value .stat-accent {color:var(--c-accent);}
  .hero__stat-label {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.8125rem; font-weight:500;}
  .hero__stat-divider {align-self:stretch; width:1px; background:var(--c-border);}
  @media (max-width:768px) {
    .hero__stats {gap:24px;}
    .hero__stat-divider {display:none;}
    .hero__stat-value {font-size:1.6rem;}
  }
 /* ============================================
     SECTION COMMON
     ============================================ */
  .section {padding:var(--s-section) 0;}
  .section--alt {background:var(--c-bg-elevated);}
  .section__header {margin-bottom:64px;}
  .section__label {display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;}
  .section__label::before {content:''; width:20px; height:1.5px; border-radius:2px; background:var(--c-accent);}
  .section__title {margin-bottom:20px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(2rem, 4vw, 3.25rem); font-weight:800; letter-spacing:-0.03em; line-height:1.1;}
  .section__title em {position:relative; color:var(--c-dark); font-style:normal;}
  .section__subtitle {max-width:520px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:1rem; line-height:1.75;}
 /* ============================================
     SERVICES SECTION - BENTO GRID
     ============================================ */
  .services__grid {display:grid; gap:16px; grid-template-columns:repeat(3, 1fr);}
  .service-card {position:relative; padding:36px; overflow:hidden; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);}
  .service-card::before {content:''; position:absolute; top:0; right:0; left:0; height:2px; background:linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity:0; transition:opacity var(--t-base);}
  .service-card:hover {border-color:var(--c-border-hover); box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .service-card:hover::before {opacity:1;}
  .service-card--featured {grid-column:span 2; border-color:transparent; background:var(--c-dark);}
  .service-card--featured .service-card__title {color:#FFFFFF;}
  .service-card--featured .service-card__desc {color:rgba(255, 255, 255, 0.6);}
  .service-card--featured .service-card__icon {background:rgba(196, 149, 106, 0.15); color:var(--c-accent);}
  .service-card--featured .service-tag {border-color:rgba(255, 255, 255, 0.1); background:rgba(255, 255, 255, 0.08); color:rgba(255, 255, 255, 0.6);}
  .service-card--featured::before {opacity:0;}
  .service-card__icon {display:flex; flex-shrink:0; justify-content:center; align-items:center; width:52px; height:52px; margin-bottom:24px; border-radius:var(--r-md); background:var(--c-accent-dim); color:var(--c-accent-hover); font-size:24px;}
  .service-card--featured .service-card__icon {width:64px; height:64px; font-size:30px;}
  .service-card__title {margin-bottom:12px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.2rem; font-weight:700; letter-spacing:-0.02em;}
  .service-card--featured .service-card__title {font-size:1.6rem;}
  .service-card__desc {margin-bottom:24px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.9rem; font-weight:500; line-height:1.7;}
  .service-tags {display:flex; flex-wrap:wrap; gap:8px;}
  .service-tag {padding:5px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:600; letter-spacing:0.02em;}
  @media (max-width:900px) {
    .services__grid {grid-template-columns:repeat(2, 1fr);}
    .service-card--featured {grid-column:span 2;}
  }
  @media (max-width:600px) {
    .services__grid {grid-template-columns:1fr;}
    .service-card--featured {grid-column:span 1;}
  }
 /* ============================================
     PORTFOLIO SECTION
     ============================================ */
  .portfolio__slider {width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;}
  .portfolio__slider::-webkit-scrollbar {display:none;}
  .portfolio__slider:active {cursor:grabbing;}
  .portfolio__track {display:flex; gap:20px; padding:10px max(20px, calc((100vw - 1200px) / 2)); width:max-content;}
  .portfolio-card {position:relative; flex-shrink:0; width:min(400px, 80vw); aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-xl); background:var(--c-surface); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--t-base), box-shadow var(--t-base);}
  .portfolio-card:hover {box-shadow:var(--shadow-hover); transform:translateY(-6px);}
  .portfolio-card__img {width:100%; height:100%; transition:transform 0.6s var(--ease-out-expo); object-fit:cover;}
  .portfolio-card:hover .portfolio-card__img {transform:scale(1.04);}
  .portfolio-card__overlay {display:flex; flex-direction:column; justify-content:flex-end; position:absolute; inset:0; padding:32px; background:linear-gradient(   to top,   rgba(250, 246, 241, 0.98) 0%,   rgba(250, 246, 241, 0.85) 25%,   rgba(250, 246, 241, 0) 60%  ); opacity:0; transition:opacity var(--t-base);}
  .portfolio-card:hover .portfolio-card__overlay {opacity:1;}
  .portfolio-card__category {margin-bottom:8px; color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;}
  .portfolio-card__title {margin-bottom:8px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.3rem; font-weight:800; letter-spacing:-0.02em;}
  .portfolio-card__desc {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; line-height:1.6;}
  .portfolio-card__view {display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--c-accent); font-family:var(--f-body); font-size:0.8rem; font-weight:600;}
  .portfolio-card__label {position:absolute; top:20px; left:20px; padding:6px 14px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:rgba(255, 255, 255, 0.9); backdrop-filter:blur(8px); color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
  @media (max-width:768px) {
    .portfolio-card {width:85vw;}
  }
 /* ============================================
     PROCESS SECTION
     ============================================ */
  .process__grid {display:grid; gap:0; grid-template-columns:repeat(4, 1fr); position:relative;}
 /* 라인:1번 원 중심 ~ 4번 원 중심을 관통 */
  .process__grid::before {content:''; position:absolute; z-index:0; top:40px; /* 각 칸은 25% 폭, 원 중심은 칸 왼쪽 끝에서 padding(24px) + 반지름(40px) 위치 */ right:calc(24px + 40px); left:calc(24px + 40px); height:2px; border-radius:1px; background:linear-gradient(90deg, var(--c-accent), rgba(196, 149, 106, 0.15));}
  .process-step {position:relative; z-index:1; padding:0 24px;}
  .process-step__number {display:flex; justify-content:center; align-items:center; position:relative; width:80px; height:80px; margin-bottom:28px; border:1.5px solid var(--c-border); border-radius:50%; background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);}
 /* hover 시에도 불투명 배경 유지 → 라인이 비치지 않음 */
  .process-step:hover .process-step__number {border-color:var(--c-accent); background:var(--c-bg-card); box-shadow:0 0 0 4px rgba(196, 149, 106, 0.12);}
  .process-step__num-text {color:var(--c-text-tertiary); font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;}
  .process-step:hover .process-step__num-text {color:var(--c-accent-hover);}
  .process-step__icon {display:flex; justify-content:center; align-items:center; position:absolute; top:-6px; right:-6px; width:24px; height:24px; border:1px solid var(--c-border); border-radius:50%; background:var(--c-bg); color:var(--c-text-tertiary); font-size:12px;}
  .process-step__title {margin-bottom:12px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.1rem; font-weight:700; letter-spacing:-0.02em;}
  .process-step__desc {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.875rem; font-weight:500; line-height:1.7;}
  @media (max-width:900px) {
    .process__grid {gap:48px; grid-template-columns:repeat(2, 1fr);}
    .process__grid::before {display:none;}
  }
  @media (max-width:500px) {
    .process__grid {grid-template-columns:1fr; gap:32px;}
    .process-step {display:flex; align-items:flex-start; gap:16px; padding:0 16px;}
    .process-step__number {flex-shrink:0; width:56px; height:56px; margin-bottom:0;}
    .process-step__num-text {font-size:1rem;}
    .process-step__body {min-width:0;}
    .process-step__title {margin-bottom:6px;}
  }
 /* ============================================
     REVIEWS SECTION
     ============================================ */
  .reviews__slider {width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;}
  .reviews__slider::-webkit-scrollbar {display:none;}
  .reviews__slider:active {cursor:grabbing;}
  .reviews__track {display:flex; gap:20px; padding:10px max(20px, calc((100vw - 1200px) / 2)); width:max-content;}
  .review-card {position:relative; flex-shrink:0; width:min(400px, 80vw); padding:36px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:transform var(--t-base), box-shadow var(--t-base);}
  .review-card::before {content:'\201C'; position:absolute; top:24px; right:28px; color:rgba(196, 149, 106, 0.15); font-family:'Pretendard', sans-serif; font-size:5rem; font-weight:900; line-height:1;}
  .review-card:hover {box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .review-stars {display:flex; gap:2px; margin-bottom:20px; color:#F59E0B; font-size:1rem;}
  .review-card__text {margin-bottom:28px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.9375rem; font-weight:500; line-height:1.8;}
  .review-author {display:flex; align-items:center; gap:14px;}
  .review-author__img {width:48px; height:48px; border:2px solid var(--c-border); border-radius:50%; object-fit:cover;}
  .review-author__name {margin-bottom:2px; color:var(--c-text-primary); font-family:var(--f-display); font-size:0.9rem; font-weight:700;}
  .review-author__role {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.8rem;}
 /* ============================================
     CTA SECTION
     ============================================ */
  .cta-section {position:relative; padding:var(--s-section) var(--s-gutter); overflow:hidden; background:var(--c-dark);}
  .cta-section::before {content:''; position:absolute; top:-50%; left:50%; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle, rgba(196, 149, 106, 0.08) 0%, transparent 70%); pointer-events:none; transform:translateX(-50%);}
  .cta-section__inner {position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center;}
  .cta-section__label {display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; color:var(--c-accent); font-family:var(--f-body); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;}
  .cta-section__label::before {content:''; width:20px; height:1.5px; background:var(--c-accent);}
  .cta-section__title {margin-bottom:20px; color:#ffffff; font-family:var(--f-display); font-size:clamp(2rem, 4vw, 3.5rem); font-weight:900; letter-spacing:-0.04em; line-height:1.05;}
  .cta-section__subtitle {margin-bottom:48px; color:rgba(255, 255, 255, 0.5); font-family:var(--f-body); font-size:1rem; line-height:1.75;}
  .cta-section__actions {display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
  .btn-cta-primary {display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-white); font-family:var(--f-display); font-size:0.9rem; font-weight:800; letter-spacing:0.01em; transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);}
  .btn-cta-primary:hover {background:var(--c-accent-hover); box-shadow:0 8px 24px rgba(196, 149, 106, 0.35); transform:translateY(-2px);}
  .btn-cta-secondary {display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border:1.5px solid rgba(255, 255, 255, 0.15); border-radius:var(--r-pill); background:transparent; color:rgba(255, 255, 255, 0.7); font-family:var(--f-display); font-size:0.9rem; font-weight:700; letter-spacing:0.01em; transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);}
  .btn-cta-secondary:hover {border-color:rgba(255, 255, 255, 0.4); color:#ffffff; transform:translateY(-2px);}
 /* ============================================
     FOOTER
     ============================================ */
  .footer {padding:52px var(--s-gutter) 40px; border-top:1px solid var(--c-border); background:var(--c-bg);}
  .footer__inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:48px; margin-bottom:40px;}
  .footer__logo {display:flex; align-items:center; gap:12px; margin-bottom:12px;}
  .footer__logo-icon {display:none;}
  .footer__logo-icon svg {display:block; filter:drop-shadow(0 2px 8px rgba(196, 149, 106, 0.35));}
  .footer__logo-text {color:var(--c-text-primary); font-family:'Varino', sans-serif; font-size:1.6rem; font-weight:normal; letter-spacing:0.02em; line-height:1;}
  .footer__logo-text em {background:linear-gradient(135deg, var(--c-text-primary) 20%, var(--c-accent) 100%); background-clip:text; -webkit-background-clip:text; font-weight:normal; font-style:normal; -webkit-text-fill-color:transparent;}
  .footer__tagline {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.875rem; line-height:1.6;}
  .footer__links {display:flex; flex-wrap:wrap; gap:36px;}
  .footer__link {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.875rem; font-weight:500; transition:color var(--t-fast);}
  .footer__link:hover {color:var(--c-text-primary);}
  .footer__bottom {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-top:32px; border-top:1px solid var(--c-border);}
  .footer__copyright {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.8125rem;}
  .footer__accent-dot {display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--c-accent); vertical-align:middle;}
 /* ============================================
     SUCCESS TOAST
     ============================================ */
  .toast {position:fixed; top:32px; left:50%; z-index:3000; display:flex; align-items:center; gap:14px; padding:20px 28px; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateX(-50%) translateY(-120px); opacity:0; transition:transform 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo); pointer-events:none;}
  .toast.is-visible {transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto;}
  .toast__icon {flex-shrink:0;}
  .toast__body {min-width:0;}
  .toast__title {display:block; margin-bottom:2px; color:var(--c-text-primary); font-family:var(--f-display); font-size:0.95rem; font-weight:700;}
  .toast__desc {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem;}
 /* ============================================
     REQUEST MODAL
     ============================================ */
  .modal-overlay {display:flex; justify-content:center; align-items:center; visibility:hidden; position:fixed; z-index:2000; inset:0; padding:24px; background:rgba(61, 50, 41, 0.45); opacity:0; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity 0.35s var(--ease-out-expo), visibility 0.35s;}
  .modal-overlay.is-active {visibility:visible; opacity:1;}
  .modal {width:100%; max-width:580px; max-height:90vh; overflow-y:auto; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:0 24px 64px rgba(100, 80, 60, 0.18), 0 8px 20px rgba(100, 80, 60, 0.08); transform:translateY(24px) scale(0.97); transition:transform 0.4s var(--ease-out-expo);}
  .modal-overlay.is-active .modal {transform:translateY(0) scale(1);}
 /* Scrollbar */
  .modal::-webkit-scrollbar {width:6px;}
  .modal::-webkit-scrollbar-track {background:transparent;}
  .modal::-webkit-scrollbar-thumb {border-radius:3px; background:var(--c-border);}
 /* Header */
  .modal__header {display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:32px 32px 0;}
  .modal__title {margin-bottom:6px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; line-height:1.2;}
  .modal__subtitle {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.875rem; font-weight:500; line-height:1.5;}
  .modal__close {display:flex; flex-shrink:0; justify-content:center; align-items:center; width:36px; height:36px; border-radius:50%; color:var(--c-text-tertiary); transition:background var(--t-fast), color var(--t-fast);}
  .modal__close:hover {background:var(--c-surface); color:var(--c-text-primary);}
 /* Form */
  .modal__form {display:flex; flex-direction:column; gap:20px; padding:28px 32px 32px;}
  .modal__row {display:grid; gap:16px; grid-template-columns:1fr 1fr;}
  .modal__field {display:flex; flex-direction:column; gap:6px;}
  .modal__label {color:var(--c-text-primary); font-family:var(--f-body); font-size:0.8125rem; font-weight:700; letter-spacing:0.01em;}
  .modal__optional {margin-left:6px; padding:1px 6px; border-radius:4px; background:var(--c-surface); color:var(--c-text-tertiary); font-size:0.6875rem; font-weight:500;}
  .modal__input {padding:12px 16px; border:1.5px solid var(--c-border); border-radius:var(--r-md); outline:none; background:var(--c-bg); color:var(--c-text-primary); font-family:var(--f-body); font-size:0.9rem; font-weight:500; transition:border-color var(--t-fast), box-shadow var(--t-fast);}
  .modal__input::placeholder {color:var(--c-text-tertiary); font-weight:400;}
  .modal__input:focus {border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-dim);}
  .modal__textarea {min-height:120px; line-height:1.7; resize:vertical;}
 /* Select dropdown */
  .modal__select {appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;}
  .modal__select:focus {border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-dim);}
 /* Footer */
  .modal__footer {display:flex; flex-direction:column; gap:16px; padding-top:8px; border-top:1px solid var(--c-border);}
  .modal__info {display:flex; gap:20px;}
  .modal__info-item {display:flex; align-items:center; gap:6px; color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.8125rem; font-weight:600;}
  .modal__info-item iconify-icon {color:var(--c-accent);}
  .modal__submit {display:inline-flex; justify-content:center; align-items:center; gap:10px; width:100%; padding:16px 32px; border-radius:var(--r-pill); background:var(--c-dark); color:var(--c-white); font-family:var(--f-display); font-size:0.95rem; font-weight:800; letter-spacing:0.01em; transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);}
  .modal__submit:hover {background:var(--c-accent); box-shadow:0 8px 24px rgba(196, 149, 106, 0.35); transform:translateY(-2px);}
  .modal__disclaimer {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:500; text-align:center;}
 /* Mobile */
  @media (max-width:600px) {
    .modal {max-height:95vh; border-radius:var(--r-lg);}
    .modal__header {padding:24px 20px 0;}
    .modal__form {padding:20px 20px 24px;}
    .modal__row {grid-template-columns:1fr;}
    .modal__title {font-size:1.3rem;}
  }
 /* ============================================
     PHILOSOPHY SECTION
     ============================================ */
  .philosophy {padding:var(--s-section) 0; background:linear-gradient(180deg, var(--c-bg) 0%, var(--c-accent-dim) 100%);}
  .philosophy__inner {max-width:720px; margin:0 auto; text-align:center;}
  .philosophy__title {margin:16px 0 48px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(2rem, 4vw, 3rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15;}
  .philosophy__title em {position:relative; color:var(--c-dark); font-style:normal;}
  .philosophy__title em::after {content:''; position:absolute; right:0; bottom:0.05em; left:0; height:0.08em; border-radius:2px; background:var(--c-accent);}
  .philosophy__body {display:flex; flex-direction:column; gap:18px;}
  .philosophy__line {color:var(--c-text-secondary); font-family:var(--f-body); font-size:clamp(1.05rem, 1.8vw, 1.35rem); font-weight:500; line-height:1.6;}
  .philosophy__line:last-child {color:var(--c-text-primary); font-weight:700;}

 /* ============================================
     DIAGRAM PLACEHOLDER (Phase 6에서 실제 다이어그램으로 교체)
     ============================================ */
  .diagram-placeholder {margin-top:48px; padding:64px 32px; border:2px dashed var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); text-align:center;}
  .diagram-placeholder__label {display:inline-flex; align-items:center; gap:8px; padding:6px 14px; margin-bottom:16px; border-radius:var(--r-pill); background:var(--c-accent-dim); color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.8rem; font-weight:600;}
  .diagram-placeholder p {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.95rem;}

 /* ============================================
     TWO PATHS
     ============================================ */
  .paths__grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:56px;}
  .path-card {position:relative; display:flex; flex-direction:column; padding:48px 40px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); cursor:pointer;}
  .path-card:hover {border-color:var(--c-accent); box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .path-card__icon {display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:28px; border-radius:var(--r-lg); font-size:32px;}
  .path-card__icon--build {background:var(--c-accent-dim); color:var(--c-accent);}
  .path-card__icon--ax {background:var(--c-sage-dim); color:var(--c-sage);}
  .path-card__label {display:inline-flex; align-self:flex-start; padding:4px 12px; margin-bottom:16px; border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
  .path-card__title {margin-bottom:16px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(1.4rem, 2.2vw, 1.8rem); font-weight:800; letter-spacing:-0.02em; line-height:1.2;}
  .path-card__desc {flex:1; margin-bottom:28px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem; font-weight:500; line-height:1.7;}
  .path-card__tags {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
  .path-card__tag {padding:5px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:600;}
  .path-card__cta {display:inline-flex; align-items:center; gap:8px; color:var(--c-accent); font-family:var(--f-display); font-size:0.9rem; font-weight:700; letter-spacing:0.01em; transition:gap var(--t-fast);}
  .path-card:hover .path-card__cta {gap:14px;}
  @media (max-width:768px) {
    .paths__grid {grid-template-columns:1fr; gap:16px;}
    .path-card {padding:36px 28px;}
  }

 /* ============================================
     TEAM GLIMPSE
     ============================================ */
  .team__grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:56px 0 48px;}
  .team-card {display:flex; flex-direction:column; align-items:center; padding:40px 28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); text-align:center; transition:transform var(--t-base), box-shadow var(--t-base);}
  .team-card:hover {box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .team-card__avatar {width:96px; height:96px; margin-bottom:20px; border-radius:50%; border:3px solid var(--c-bg-card); background:var(--c-accent-dim); box-shadow:0 4px 16px rgba(100, 80, 60, 0.12);}
  .team-card__name {margin-bottom:6px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.4rem; font-weight:800; letter-spacing:-0.01em;}
  .team-card__role {margin-bottom:16px; color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.8rem; font-weight:600; letter-spacing:0.02em;}
  .team-card__bio {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem; line-height:1.6;}
  .team__message {max-width:640px; margin:0 auto; padding:32px 24px; text-align:center;}
  .team__message p {color:var(--c-text-secondary); font-family:var(--f-body); font-size:clamp(1rem, 1.6vw, 1.15rem); font-weight:500; line-height:1.75;}
  .team__message p:last-child {margin-top:4px; color:var(--c-text-primary);}
  .team__message em {position:relative; color:var(--c-dark); font-style:normal; font-weight:700;}
  .team__message em::after {content:''; position:absolute; right:0; bottom:0.05em; left:0; height:0.08em; border-radius:2px; background:var(--c-accent);}
  @media (max-width:768px) {
    .team__grid {grid-template-columns:1fr; gap:16px;}
  }
  @media (min-width:769px) and (max-width:960px) {
    .team__grid {grid-template-columns:repeat(2, 1fr);}
    .team-card:last-child {grid-column:span 2; justify-self:center; width:100%; max-width:360px;}
  }

 /* ============================================
     CAPABILITIES (Build S2)
     ============================================ */
  .capabilities__grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:56px;}
  .capability-card {position:relative; padding:40px 36px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);}
  .capability-card::before {content:''; position:absolute; top:0; right:0; left:0; height:3px; background:currentColor; opacity:0; transition:opacity var(--t-base);}
  .capability-card:hover {border-color:var(--c-border-hover); box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .capability-card:hover::before {opacity:0.6;}
  .capability-card--terracotta {color:var(--c-terracotta);}
  .capability-card--terracotta .capability-card__icon {background:var(--c-terracotta-dim); color:var(--c-terracotta);}
  .capability-card--sage {color:var(--c-sage);}
  .capability-card--sage .capability-card__icon {background:var(--c-sage-dim); color:var(--c-sage);}
  .capability-card--rose {color:var(--c-rose);}
  .capability-card--rose .capability-card__icon {background:var(--c-rose-dim); color:var(--c-rose);}
  .capability-card--sand {color:var(--c-accent);}
  .capability-card--sand .capability-card__icon {background:var(--c-sand-dim); color:var(--c-accent-hover);}
  .capability-card__icon {display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:24px; border-radius:var(--r-md); font-size:28px;}
  .capability-card__title {margin-bottom:12px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.35rem; font-weight:800; letter-spacing:-0.02em;}
  .capability-card__desc {margin-bottom:20px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem; font-weight:500; line-height:1.7;}
  .capability-card__tags {display:flex; flex-wrap:wrap; gap:8px;}
  .capability-chip {padding:5px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:600;}
  @media (max-width:768px) {
    .capabilities__grid {grid-template-columns:1fr; gap:16px;}
    .capability-card {padding:32px 28px;}
  }

 /* ============================================
     PORTFOLIO GRID (Build S4 · 풀 버전 + 필터)
     ============================================ */
  .portfolio-filter {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:40px 0 48px;}
  .portfolio-filter__btn {padding:10px 20px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg-card); color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all var(--t-fast);}
  .portfolio-filter__btn:hover {border-color:var(--c-accent); color:var(--c-text-primary);}
  .portfolio-filter__btn--active {background:var(--c-dark); border-color:var(--c-dark); color:var(--c-white);}
  .portfolio-filter__btn--active:hover {background:var(--c-accent); border-color:var(--c-accent); color:var(--c-white);}
  .portfolio-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
  .portfolio-item {display:flex; flex-direction:column; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform var(--t-base), box-shadow var(--t-base);}
  .portfolio-item:hover {box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .portfolio-item[hidden] {display:none;}
  .portfolio-item__img {width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--c-surface);}
  .portfolio-item__body {display:flex; flex-direction:column; flex:1; padding:28px 24px;}
  .portfolio-item__category {margin-bottom:10px; color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;}
  .portfolio-item__title {margin-bottom:10px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.15rem; font-weight:800; letter-spacing:-0.02em;}
  .portfolio-item__desc {flex:1; margin-bottom:16px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.875rem; line-height:1.65;}
  .portfolio-item__stack {display:flex; flex-wrap:wrap; gap:6px;}
  .portfolio-chip {padding:4px 10px; border:1px solid var(--c-border); border-radius:var(--r-pill); color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.7rem; font-weight:600;}
  @media (max-width:960px) {
    .portfolio-grid {grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width:640px) {
    .portfolio-grid {grid-template-columns:1fr; gap:16px;}
  }

 /* ============================================
     TECH STACK (Build S5)
     ============================================ */
  .tech-stack {display:flex; flex-direction:column; gap:32px; margin-top:56px;}
  .tech-group {padding:28px 32px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm);}
  .tech-group__title {margin-bottom:16px; color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.85rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
  .tech-group__items {display:flex; flex-wrap:wrap; gap:10px;}
  .tech-chip {display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text-primary); font-family:var(--f-body); font-size:0.85rem; font-weight:600; transition:border-color var(--t-fast), transform var(--t-fast);}
  .tech-chip:hover {border-color:var(--c-accent); transform:translateY(-2px);}
  .tech-chip iconify-icon {font-size:18px; color:var(--c-accent-hover);}
  @media (max-width:768px) {
    .tech-group {padding:24px 20px;}
  }

 /* ============================================
     PROBLEM (AX Shift S2)
     ============================================ */
  .problem__grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:56px;}
  .problem-card {padding:32px 28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:transform var(--t-base), box-shadow var(--t-base);}
  .problem-card:hover {box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .problem-card__icon {display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:20px; border-radius:var(--r-md); background:var(--c-terracotta-dim); color:var(--c-terracotta); font-size:26px;}
  .problem-card__title {margin-bottom:10px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;}
  .problem-card__desc {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem; line-height:1.7;}
  @media (max-width:768px) {
    .problem__grid {grid-template-columns:1fr; gap:16px;}
  }

 /* ============================================
     ASSESSMENT WIDGET (AX Shift S3)
     ============================================ */
  .assessment {max-width:720px; margin:48px auto 0; padding:48px 40px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-md);}
  .assessment__intro {text-align:center;}
  .assessment__meta {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:24px;}
  .assessment__meta-chip {display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--r-pill); background:var(--c-accent-dim); color:var(--c-accent-hover); font-family:var(--f-body); font-size:0.78rem; font-weight:600;}
  .assessment__meta-chip iconify-icon {font-size:14px;}
  .assessment__blurb {margin-bottom:32px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:1rem; line-height:1.7;}
  .assessment__quiz {text-align:center;}
  .assessment__progress {height:6px; margin-bottom:16px; border-radius:3px; background:var(--c-surface); overflow:hidden;}
  .assessment__progress-bar {height:100%; width:0%; background:var(--c-accent); transition:width 0.4s var(--ease-out-expo);}
  .assessment__counter {margin-bottom:24px; color:var(--c-text-tertiary); font-family:var(--f-display); font-size:0.85rem; font-weight:700; letter-spacing:0.04em;}
  .assessment__question {margin-bottom:36px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(1.15rem, 2.2vw, 1.5rem); font-weight:700; line-height:1.45; min-height:4em;}
  .assessment__actions {display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
  .assessment__actions .btn-secondary {min-width:140px; justify-content:center;}
  .assessment__back {margin-top:12px; background:none; border:none; color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.85rem; cursor:pointer;}
  .assessment__back:hover {color:var(--c-accent);}
  .assessment__result {text-align:center;}
  .assessment__score {display:inline-flex; align-items:baseline; gap:8px; margin-bottom:16px;}
  .assessment__score-value {color:var(--c-accent); font-family:var(--f-display); font-size:4.5rem; font-weight:800; letter-spacing:-0.04em; line-height:1;}
  .assessment__score-label {color:var(--c-text-tertiary); font-family:var(--f-display); font-size:1.4rem; font-weight:600;}
  .assessment__bucket {display:inline-block; padding:8px 20px; margin-bottom:20px; border-radius:var(--r-pill); background:var(--c-dark); color:var(--c-white); font-family:var(--f-display); font-size:0.9rem; font-weight:700; letter-spacing:0.02em;}
  .assessment__recommendation {max-width:520px; margin:0 auto 28px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:1rem; line-height:1.75;}
  .assessment__starters {padding:24px; margin-bottom:32px; border-radius:var(--r-lg); background:var(--c-accent-dim); text-align:left;}
  .assessment__starters h4 {margin-bottom:12px; color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.85rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
  .assessment__starters ul {list-style:none; display:flex; flex-direction:column; gap:10px;}
  .assessment__starters li {position:relative; padding-left:24px; color:var(--c-text-primary); font-family:var(--f-body); font-size:0.95rem; font-weight:500; line-height:1.6;}
  .assessment__starters li::before {content:'→'; position:absolute; left:0; color:var(--c-accent); font-weight:700;}
  .assessment__cta {display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
  @media (max-width:640px) {
    .assessment {padding:32px 24px;}
  }

 /* ============================================
     SCENARIOS (AX Shift S5)
     ============================================ */
  .scenarios__grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px;}
  .scenario-card {display:flex; flex-direction:column; padding:32px 28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:box-shadow var(--t-base), transform var(--t-base);}
  .scenario-card:hover {box-shadow:var(--shadow-hover); transform:translateY(-4px);}
  .scenario-card__header {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px;}
  .scenario-card__num {color:var(--c-accent); font-family:var(--f-display); font-size:2rem; font-weight:800; letter-spacing:-0.02em;}
  .scenario-card__industry {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; text-align:right;}
  .scenario-card__title {margin-bottom:20px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.02em; line-height:1.3;}
  .scenario-card__meta {display:flex; flex-direction:column; gap:14px;}
  .scenario-card__meta > div {display:grid; grid-template-columns:70px 1fr; gap:12px; align-items:baseline;}
  .scenario-card__meta dt {color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
  .scenario-card__meta dd {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.875rem; line-height:1.6;}
  .scenario-card__meta strong {color:var(--c-text-primary); font-weight:700;}
  .scenarios__foot {margin-top:40px; text-align:center;}
  .scenarios__foot p {color:var(--c-text-secondary); font-family:var(--f-body); font-size:1rem;}
  .scenarios__foot a {color:var(--c-accent); font-weight:700;}
  .scenarios__foot a:hover {text-decoration:underline;}
  @media (max-width:960px) {
    .scenarios__grid {grid-template-columns:1fr; gap:16px;}
  }

 /* ============================================
     DELIVERABLES (AX Shift S6)
     ============================================ */
  .deliverables__grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:48px;}
  .deliverable-card {padding:28px 24px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); transition:transform var(--t-base);}
  .deliverable-card:hover {transform:translateY(-4px); box-shadow:var(--shadow-hover);}
  .deliverable-card__stage {display:inline-block; margin-bottom:16px; color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.72rem; font-weight:700; letter-spacing:0.08em;}
  .deliverable-card__icon {display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:16px; border-radius:var(--r-md); background:var(--c-accent-dim); color:var(--c-accent); font-size:28px;}
  .deliverable-card__title {margin-bottom:8px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.1rem; font-weight:800; letter-spacing:-0.02em;}
  .deliverable-card__format {margin-bottom:16px; color:var(--c-accent); font-family:var(--f-body); font-size:0.78rem; font-weight:600;}
  .deliverable-card__list {list-style:none; display:flex; flex-direction:column; gap:8px;}
  .deliverable-card__list li {position:relative; padding-left:18px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; line-height:1.5;}
  .deliverable-card__list li::before {content:'·'; position:absolute; left:4px; color:var(--c-accent);}
  @media (max-width:960px) {
    .deliverables__grid {grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width:640px) {
    .deliverables__grid {grid-template-columns:1fr;}
  }

 /* ============================================
     WHY US (AX Shift S7)
     ============================================ */
  .why__grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px;}
  .why-card {position:relative; padding:40px 32px 32px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm);}
  .why-card__num {position:absolute; top:-20px; left:32px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--c-accent); color:var(--c-white); font-family:var(--f-display); font-size:1.1rem; font-weight:800;}
  .why-card__title {margin:8px 0 12px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;}
  .why-card__desc {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem; line-height:1.7;}
  @media (max-width:768px) {
    .why__grid {grid-template-columns:1fr; gap:28px;}
  }

 /* ============================================
     CONTACT HERO (폼을 Hero 비주얼에 배치)
     ============================================ */
  .hero--contact {min-height:auto; padding:140px var(--s-gutter) 80px;}
  .hero--contact .hero__visual {pointer-events:auto; animation:none;}
  @media (max-width:960px) {
    .hero--contact .hero__visual {display:block;}
  }

  .contact-standby {display:flex; align-items:center; gap:16px; margin-top:32px; padding:18px 20px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg-card); box-shadow:var(--shadow-sm);}
  .contact-standby__avatars {display:flex; flex-shrink:0;}
  .contact-standby__avatars img {width:40px; height:40px; border-radius:50%; border:2.5px solid var(--c-bg-card); background:var(--c-accent-dim); box-shadow:0 1px 4px rgba(100,80,60,0.14); margin-left:-12px; object-fit:cover;}
  .contact-standby__avatars img:first-child {margin-left:0;}
  .contact-standby__body {display:flex; flex-direction:column; gap:4px;}
  .contact-standby__status {display:inline-flex; align-items:center; gap:8px; color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.78rem; font-weight:700; letter-spacing:0.04em;}
  .contact-standby__pulse {width:8px; height:8px; border-radius:50%; background:var(--c-sage); box-shadow:0 0 0 0 rgba(168,181,160,0.4); animation:pulse-dot 2s ease infinite;}
  .contact-standby__text {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; line-height:1.55;}
  .contact-standby__text strong {color:var(--c-text-primary);}

  .contact-quickinfo {list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .contact-quickinfo li {display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg-card); color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.78rem; font-weight:600;}
  .contact-quickinfo li iconify-icon {color:var(--c-accent); font-size:16px;}
  .contact-quickinfo a {color:var(--c-accent); font-weight:700;}
  .contact-quickinfo a:hover {text-decoration:underline;}

  .contact-form--hero {margin:0; padding:32px; border:1.5px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-lg); gap:20px;}
  .contact-form__header {display:flex; align-items:center; gap:14px; margin-bottom:4px; padding-bottom:18px; border-bottom:1px dashed var(--c-border);}
  .contact-form__header-icon {display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--r-md); background:var(--c-accent-dim); color:var(--c-accent); font-size:24px; flex-shrink:0;}
  .contact-form__title {color:var(--c-text-primary); font-family:var(--f-display); font-size:1.2rem; font-weight:800; letter-spacing:-0.02em;}
  .contact-form__subtitle {margin-top:2px; color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.82rem;}
  .contact-form__label iconify-icon {color:var(--c-accent); font-size:14px; margin-right:4px;}
  .contact-form__radio iconify-icon {font-size:14px;}
  .contact-form__disclaimer {display:inline-flex; align-items:center; gap:6px; justify-content:center;}
  .contact-form__disclaimer iconify-icon {color:var(--c-sage); font-size:14px;}

  .info-block__header {display:flex; align-items:flex-start; gap:14px; margin-bottom:20px;}
  .info-block__icon {display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-md); background:var(--c-accent-dim); color:var(--c-accent); font-size:22px; flex-shrink:0;}
  .info-block__icon--sage {background:var(--c-sage-dim); color:var(--c-sage);}
  .info-block__header .section__label {margin-bottom:4px;}
  .faq dt {display:flex; align-items:center; gap:8px;}
  .faq dt iconify-icon {color:var(--c-accent); font-size:16px;}

  @media (max-width:960px) {
    .hero--contact {padding:110px 20px 60px;}
    .contact-form--hero {padding:24px;}
    .contact-standby {flex-direction:column; align-items:flex-start; gap:12px;}
  }

 /* ============================================
     CONTACT PAGE (legacy styles, still used by subsections)
     ============================================ */
  .container--narrow {width:min(880px, 90vw); margin:0 auto;}
  .contact-form {display:flex; flex-direction:column; gap:24px; padding:40px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-md);}
  .contact-form__row {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
  .contact-form__field {display:flex; flex-direction:column; gap:8px;}
  .contact-form__field--placeholder {display:none;}
  .contact-form__label {color:var(--c-text-primary); font-family:var(--f-display); font-size:0.85rem; font-weight:700;}
  .contact-form__req {color:var(--c-accent); margin-left:2px;}
  .contact-form__optional {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.72rem; font-weight:500; margin-left:6px;}
  .contact-form__input {width:100%; padding:14px 16px; border:1.5px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); color:var(--c-text-primary); font-family:var(--f-body); font-size:0.95rem; transition:border-color var(--t-fast), background var(--t-fast);}
  .contact-form__input:focus {outline:none; border-color:var(--c-accent); background:var(--c-bg-card);}
  .contact-form__input::placeholder {color:var(--c-text-tertiary);}
  .contact-form__select {appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B5D50' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;}
  .contact-form__textarea {resize:vertical; min-height:140px; font-family:var(--f-body); line-height:1.6;}
  .contact-form__radio-group {display:flex; flex-wrap:wrap; gap:8px;}
  .contact-form__radio {display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:1.5px solid var(--c-border); border-radius:var(--r-pill); cursor:pointer; font-family:var(--f-body); font-size:0.85rem; font-weight:600; color:var(--c-text-secondary); transition:all var(--t-fast);}
  .contact-form__radio:hover {border-color:var(--c-accent); color:var(--c-text-primary);}
  .contact-form__radio input {accent-color:var(--c-accent);}
  .contact-form__radio:has(input:checked) {background:var(--c-accent-dim); border-color:var(--c-accent); color:var(--c-accent-hover);}
  .contact-form__footer {display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--c-border);}
  .contact-form__meta {display:flex; gap:16px; flex-wrap:wrap;}
  .contact-form__meta-item {display:inline-flex; align-items:center; gap:6px; color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.8rem; font-weight:500;}
  .contact-form__meta-item iconify-icon {color:var(--c-accent); font-size:14px;}
  .contact-form__submit {justify-content:center;}
  .contact-form__submit:disabled {opacity:0.6; cursor:not-allowed;}
  .contact-form__disclaimer {text-align:center; color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.78rem;}
  .contact-form__success {padding:56px 40px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-md); text-align:center;}
  .contact-form__success-icon {margin-bottom:20px; color:var(--c-sage); font-size:64px;}
  .contact-form__success h3 {margin-bottom:12px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.5rem; font-weight:800; letter-spacing:-0.02em;}
  .contact-form__success p {margin-bottom:32px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:1rem;}
  .contact-form__success strong {color:var(--c-text-primary);}
  .contact-form__success-cta {display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
  @media (max-width:768px) {
    .contact-form {padding:28px 20px;}
    .contact-form__row {grid-template-columns:1fr;}
  }

  .info__grid {display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .info-block__title {margin:12px 0 20px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.3rem; font-weight:800; letter-spacing:-0.02em;}
  .info-list {list-style:none; display:flex; flex-direction:column; gap:14px;}
  .info-list li {display:flex; align-items:center; gap:12px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.95rem;}
  .info-list li iconify-icon {color:var(--c-accent); font-size:20px;}
  .info-list a {color:var(--c-accent); font-weight:600;}
  .info-list a:hover {text-decoration:underline;}
  .faq__item {padding:16px 0; border-bottom:1px solid var(--c-border);}
  .faq__item:last-child {border-bottom:none;}
  .faq dt {margin-bottom:6px; color:var(--c-text-primary); font-family:var(--f-display); font-size:0.95rem; font-weight:700;}
  .faq dd {color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.9rem; line-height:1.6;}
  @media (max-width:768px) {
    .info__grid {grid-template-columns:1fr; gap:32px;}
  }

  .alt-cta {padding:48px 32px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); text-align:center;}
  .alt-cta__title {margin-bottom:24px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(1.3rem, 2.5vw, 1.75rem); font-weight:800; letter-spacing:-0.02em;}
  .alt-cta__title em {position:relative; color:var(--c-dark); font-style:normal;}
  .alt-cta__title em::after {content:''; position:absolute; right:0; bottom:0.05em; left:0; height:0.08em; border-radius:2px; background:var(--c-accent);}
  .alt-cta__actions {display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}

 /* ============================================
     ARCHITECTURE DIAGRAM (Research Notebook Style)
     ============================================ */
  .architecture {position:relative; max-width:1120px; margin:56px auto 0; padding:40px; border:1.5px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); background-image:repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(168, 145, 120, 0.06) 32px); box-shadow:var(--shadow-md);}
  .architecture__title {display:block; margin-bottom:8px; color:var(--c-text-primary); font-family:var(--f-display); font-size:clamp(1.1rem, 2vw, 1.4rem); font-weight:800; letter-spacing:-0.02em; text-align:center;}
  .architecture__subtitle {display:block; margin-bottom:40px; color:var(--c-accent-hover); font-family:'Caveat', var(--f-body); font-size:clamp(1.1rem, 1.8vw, 1.4rem); font-weight:500; text-align:center;}
  .architecture__body {display:grid; grid-template-columns:140px 1fr 140px; gap:24px; align-items:flex-start;}
  .architecture__rail {padding:16px; border:1.5px dashed var(--c-border); border-radius:var(--r-md); background:var(--c-surface);}
  .architecture__rail-label {margin-bottom:12px; color:var(--c-accent-hover); font-family:'Caveat', var(--f-body); font-size:1.3rem; font-weight:700; letter-spacing:0.02em; text-align:center;}
  .architecture__rail ul {list-style:none; display:flex; flex-direction:column; gap:6px;}
  .architecture__rail li {padding:4px 8px; border-radius:4px; background:var(--c-bg-card); color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.78rem; font-weight:600; text-align:center;}
  .architecture__layers {display:flex; flex-direction:column; gap:6px;}
  .architecture__layer {padding:18px 20px; border:2px dashed var(--c-border); border-radius:var(--r-lg); background:var(--c-bg);}
  .architecture__layer--1 {border-color:rgba(192, 139, 112, 0.35); background:var(--c-terracotta-dim);}
  .architecture__layer--2 {border-color:rgba(168, 181, 160, 0.35); background:var(--c-sage-dim);}
  .architecture__layer--3 {border-color:rgba(201, 160, 154, 0.35); background:var(--c-rose-dim);}
  .architecture__layer--4 {border-color:rgba(212, 196, 168, 0.4); background:var(--c-sand-dim);}
  .architecture__layer-head {display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
  .architecture__layer-num {color:var(--c-text-primary); font-family:var(--f-display); font-size:0.85rem; font-weight:800; letter-spacing:0.1em;}
  .architecture__layer-name {color:var(--c-text-primary); font-family:var(--f-display); font-size:1.15rem; font-weight:800; letter-spacing:-0.02em;}
  .architecture__layer-tag {color:var(--c-text-tertiary); font-family:'Caveat', var(--f-body); font-size:1.15rem; font-weight:500;}
  .architecture__boxes {display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px;}
  .architecture__box {padding:10px 12px; border:1.5px solid rgba(61, 50, 41, 0.2); border-radius:8px; background:var(--c-bg-card); color:var(--c-text-primary); font-family:var(--f-body); font-size:0.8rem; font-weight:600; text-align:center; line-height:1.35; box-shadow:0 1px 2px rgba(100, 80, 60, 0.05);}
  .architecture__box--deliverable {display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--c-dark); color:var(--c-white); border-color:var(--c-dark);}
  .architecture__box--deliverable iconify-icon {color:var(--c-accent); font-size:14px; flex-shrink:0;}
  .architecture__layer-meta {margin-top:10px; color:var(--c-text-secondary); font-family:'Caveat', var(--f-body); font-size:1.05rem; font-weight:500; text-align:center;}
  .architecture__arrow {display:flex; justify-content:center; color:var(--c-text-tertiary); font-family:var(--f-display); font-size:1.4rem; line-height:1;}
  .architecture__arrow--loop {position:relative; padding:8px 0;}
  .architecture__arrow--loop::before {content:'↑ 피드백 루프'; display:inline-block; padding:4px 14px; border:1.5px dashed var(--c-accent); border-radius:var(--r-pill); background:var(--c-accent-dim); color:var(--c-accent-hover); font-family:'Caveat', var(--f-body); font-size:1.05rem; font-weight:700;}
  .architecture__stickies {display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:32px 0 0; flex-wrap:wrap;}
  .architecture__sticky {position:relative; padding:14px 18px; min-width:140px; max-width:260px; border-radius:2px; color:var(--c-text-primary); font-family:'Caveat', var(--f-body); font-size:1.1rem; font-weight:500; line-height:1.4; box-shadow:2px 4px 10px rgba(100, 80, 60, 0.12);}
  .architecture__sticky--yellow {background:#FFF2B8; transform:rotate(-2deg);}
  .architecture__sticky--green {background:#D8EDD0; transform:rotate(1.5deg);}
  .architecture__sticky--rose {background:#F4D8D0; transform:rotate(-1deg);}
  .architecture__sticky--blue {background:#D4E4F0; transform:rotate(2deg);}
  .architecture__summary {margin-top:28px; padding:18px 24px; border-top:1.5px dashed var(--c-border); color:var(--c-text-primary); font-family:var(--f-display); font-size:0.95rem; font-weight:700; letter-spacing:-0.01em; line-height:1.6; text-align:center;}
  .architecture__summary em {font-style:normal; color:var(--c-accent); font-family:'Caveat', var(--f-body); font-size:1.15em; font-weight:700;}

  @media (max-width:960px) {
    .architecture {padding:28px 20px;}
    .architecture__body {grid-template-columns:1fr; gap:16px;}
    .architecture__rail {display:flex; flex-direction:column; gap:10px;}
    .architecture__rail ul {display:flex; flex-wrap:wrap; gap:6px;}
    .architecture__boxes {grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width:480px) {
    .architecture {padding:20px 14px;}
    .architecture__boxes {grid-template-columns:1fr;}
  }

 /* ============================================
     DUALITY (Home Hero · Build × AX Shift 이중 카드)
     ============================================ */
  .duality {position:relative; display:flex; flex-direction:column; gap:14px; padding:20px 8px;}
  .duality__card {position:relative; display:flex; flex-direction:column; gap:14px; padding:24px 26px; border:1.5px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg-card); box-shadow:var(--shadow-sm); opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) forwards; transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); overflow:hidden; cursor:pointer;}
  .duality__card:hover {transform:translateY(-4px); box-shadow:var(--shadow-hover);}
  .duality__card--build {color:var(--c-accent); animation-delay:0.2s;}
  .duality__card--build .duality__card-icon {background:var(--c-accent-dim);}
  .duality__card--build:hover {border-color:var(--c-accent);}
  .duality__card--ax {color:var(--c-sage); animation-delay:0.6s;}
  .duality__card--ax .duality__card-icon {background:var(--c-sage-dim);}
  .duality__card--ax:hover {border-color:var(--c-sage);}
  .duality__card-header {display:flex; align-items:center; gap:14px;}
  .duality__card-icon {display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--r-md); font-size:28px; color:currentColor; flex-shrink:0;}
  .duality__card-heading {display:flex; flex-direction:column; gap:2px; flex:1;}
  .duality__card-label {color:currentColor; font-family:var(--f-display); font-size:0.78rem; font-weight:800; letter-spacing:0.14em;}
  .duality__card-sub {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:600;}
  .duality__card-avatars {display:flex; flex-shrink:0;}
  .duality__avatar {width:52px; height:52px; border-radius:50%; border:3px solid var(--c-bg-card); background:var(--c-accent-dim); box-shadow:0 2px 8px rgba(100,80,60,0.14); margin-left:-14px; object-fit:cover; transition:transform var(--t-base);}
  .duality__card:hover .duality__avatar {transform:translateY(-2px);}
  .duality__card-avatars .duality__avatar:first-child {margin-left:0;}
  .duality__card-title {color:var(--c-text-primary); font-family:var(--f-display); font-size:1.25rem; font-weight:800; letter-spacing:-0.02em; line-height:1.25; white-space:nowrap;}
  .duality__card-list {list-style:none; display:flex; flex-direction:column; gap:6px;}
  .duality__card-list li {position:relative; padding-left:16px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; font-weight:500;}
  .duality__card-list li::before {content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .duality__card-footer {display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px dashed var(--c-border);}
  .duality__card-tools {display:flex; align-items:center; gap:10px;}
  .duality__card-tools iconify-icon {font-size:20px; color:var(--c-text-tertiary); transition:color var(--t-fast), transform var(--t-fast);}
  .duality__card:hover .duality__card-tools iconify-icon {color:currentColor;}
  .duality__card-cta {display:inline-flex; align-items:center; gap:6px; color:currentColor; font-family:var(--f-display); font-size:0.82rem; font-weight:700; letter-spacing:0.02em; transition:gap var(--t-fast); white-space:nowrap;}
  .duality__card:hover .duality__card-cta {gap:12px;}
  .duality__bridge {display:flex; align-items:center; justify-content:center; gap:12px; align-self:center; opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) 0.4s forwards;}
  .duality__bridge-avatars {display:flex;}
  .duality__bridge-avatars .duality__avatar {width:32px; height:32px; border-width:2px; margin-left:-8px;}
  .duality__bridge-avatars .duality__avatar:first-child {margin-left:0;}
  .duality__bridge-chip {display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--r-pill); background:var(--c-dark); color:var(--c-white); font-family:var(--f-display); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; box-shadow:var(--shadow-md);}
  @media (max-width:768px) {
    .duality {padding:12px 4px;}
    .duality__card {padding:20px 22px;}
  }

 /* ============================================
     TRUST STACK (Home Hero · 신뢰 지표 카드) [unused after redesign]
     ============================================ */
  .trust-stack {position:relative; display:flex; flex-direction:column; gap:14px; padding:28px 16px;}
  .trust-stack__card {position:relative; z-index:1; display:flex; align-items:center; gap:20px; padding:22px 24px; background:var(--c-bg-card); border:1.5px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) forwards; transition:transform var(--t-base), box-shadow var(--t-base);}
  .trust-stack__card:hover {transform:translateY(-3px); box-shadow:var(--shadow-hover);}
  .trust-stack__card--1 {animation-delay:0.2s;}
  .trust-stack__card--2 {animation-delay:0.4s; margin-left:32px;}
  .trust-stack__card--3 {animation-delay:0.6s; margin-left:64px;}
  .trust-stack__icon {display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:var(--r-md); background:var(--c-accent-dim); color:var(--c-accent); font-size:28px; flex-shrink:0;}
  .trust-stack__body {display:flex; flex-direction:column; gap:2px;}
  .trust-stack__value {display:inline-flex; align-items:baseline; gap:2px; color:var(--c-text-primary); font-family:var(--f-display); font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; line-height:1;}
  .trust-stack__unit {color:var(--c-accent); font-size:0.9rem; font-weight:700; margin-left:2px;}
  .trust-stack__label {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.82rem; font-weight:600;}
  .trust-stack__badge {position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--shadow-md); font-family:var(--f-body); font-size:0.75rem; font-weight:600; color:var(--c-text-secondary); animation:hero-badge-float 5s var(--ease-in-out) infinite;}
  .trust-stack__badge--top {top:0; right:-8px;}
  .trust-stack__badge--bottom {bottom:0; left:-8px; animation-delay:-2.5s;}
  .trust-stack__badge-dot {width:7px; height:7px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 6px rgba(196,149,106,0.4);}
  .trust-stack__badge-dot--sage {background:var(--c-sage); box-shadow:0 0 6px rgba(168,181,160,0.4);}
  @media (max-width:768px) {
    .trust-stack {padding:20px 8px;}
    .trust-stack__card--2 {margin-left:12px;}
    .trust-stack__card--3 {margin-left:24px;}
  }

 /* ============================================
     AX VISUAL (AX Shift Hero · Before/After)
     ============================================ */
  .ax-visual {position:relative; display:flex; flex-direction:column; gap:12px; padding:20px 12px;}
  .ax-visual__panel {padding:20px 22px; border:1.5px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg-card); box-shadow:var(--shadow-sm); opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) forwards;}
  .ax-visual__panel--before {animation-delay:0.2s; filter:saturate(0.4); opacity:0.85;}
  .ax-visual__panel--after {animation-delay:0.8s; border-color:var(--c-accent); box-shadow:var(--shadow-md), 0 0 0 3px var(--c-accent-dim);}
  .ax-visual__panel-top {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
  .ax-visual__panel-label {display:flex; align-items:center; gap:8px; color:var(--c-text-tertiary); font-family:var(--f-display); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;}
  .ax-visual__panel-label iconify-icon {font-size:16px;}
  .ax-visual__panel--after .ax-visual__panel-label {color:var(--c-accent-hover);}
  .ax-visual__panel--after .ax-visual__panel-label iconify-icon {color:var(--c-accent);}
  .ax-visual__avatars {display:flex; flex-shrink:0;}
  .ax-visual__avatar {width:34px; height:34px; border-radius:50%; border:2.5px solid var(--c-bg-card); background:var(--c-accent-dim); box-shadow:0 1px 4px rgba(100,80,60,0.14); margin-left:-10px; object-fit:cover;}
  .ax-visual__avatars .ax-visual__avatar:first-child {margin-left:0;}
  .ax-visual__avatar--team {border-color:var(--c-accent); box-shadow:0 0 0 2px var(--c-bg-card), 0 2px 6px rgba(196,149,106,0.35);}
  .ax-visual__tasks {list-style:none; display:flex; flex-direction:column; gap:8px;}
  .ax-visual__tasks li {display:flex; align-items:center; gap:10px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.82rem; font-weight:500;}
  .ax-visual__dot {display:inline-block; flex-shrink:0; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--c-border); background:transparent;}
  .ax-visual__dot--on {background:var(--c-accent); border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-dim);}
  .ax-visual__footer {margin-top:14px; padding-top:12px; border-top:1px dashed var(--c-border); color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.82rem; font-weight:500; text-align:right;}
  .ax-visual__footer strong {color:var(--c-text-primary); font-weight:800;}
  .ax-visual__footer--accent, .ax-visual__footer--accent strong {color:var(--c-accent);}
  .ax-visual__bridge {position:relative; align-self:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0; opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) 0.5s forwards;}
  .ax-visual__bridge-avatars {display:flex;}
  .ax-visual__bridge-avatars .ax-visual__avatar {width:44px; height:44px; border-width:3px; margin-left:-14px; box-shadow:0 2px 10px rgba(100,80,60,0.18);}
  .ax-visual__bridge-avatars .ax-visual__avatar:first-child {margin-left:0;}
  .ax-visual__bridge-chip {display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--r-pill); background:var(--c-dark); color:var(--c-white); font-family:var(--f-display); font-size:0.78rem; font-weight:700; letter-spacing:0.06em; box-shadow:var(--shadow-md);}
  .ax-visual__bridge-chip iconify-icon {color:var(--c-accent); font-size:14px;}
  .ax-visual__bridge-tools {display:inline-flex; align-items:center; gap:14px; padding:7px 16px; border-radius:var(--r-pill); background:var(--c-bg-card); border:1px solid var(--c-border); box-shadow:var(--shadow-sm);}
  .ax-visual__bridge-tools iconify-icon {font-size:18px; color:var(--c-text-tertiary); transition:color var(--t-fast), transform var(--t-fast);}
  .ax-visual__bridge-tools iconify-icon:hover {color:var(--c-accent); transform:translateY(-2px);}

 /* ============================================
     AI PIPELINE HERO (Home · AI 네이티브 비주얼)
     ============================================ */
  .ai-pipeline {position:relative; display:flex; flex-direction:column; gap:10px; padding:28px 16px;}
  .ai-pipeline__card {position:relative; z-index:1; padding:18px 22px; background:var(--c-bg-card); border:1.5px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); opacity:0; animation:flow-card-in 0.7s var(--ease-out-expo) forwards;}
  .ai-pipeline__card--input {animation-delay:0.2s;}
  .ai-pipeline__card--process {animation-delay:0.5s;}
  .ai-pipeline__card--output {animation-delay:0.8s;}
  .ai-pipeline__card--active {border-color:var(--c-accent); box-shadow:var(--shadow-md), 0 0 0 3px var(--c-accent-dim);}
  .ai-pipeline__card--active::after {content:''; position:absolute; top:18px; right:18px; width:10px; height:10px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 0 0 rgba(196,149,106,0.4); animation:flow-pulse 2s ease infinite;}
  .ai-pipeline__card-label {margin-bottom:10px; color:var(--c-accent-hover); font-family:var(--f-display); font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;}
  .ai-pipeline__card-body {display:flex; align-items:center; gap:10px; color:var(--c-text-primary); font-family:var(--f-body); font-size:0.9rem; font-weight:600;}
  .ai-pipeline__card-body iconify-icon {color:var(--c-accent); font-size:20px; flex-shrink:0;}
  .ai-pipeline__card-body--grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;}
  .ai-pipeline__steps {list-style:none; display:flex; flex-direction:column; gap:8px;}
  .ai-pipeline__steps li {display:flex; align-items:center; gap:10px; color:var(--c-text-secondary); font-family:var(--f-body); font-size:0.85rem; font-weight:600;}
  .ai-pipeline__steps iconify-icon {color:var(--c-accent); font-size:16px;}
  .ai-pipeline__stat {display:flex; flex-direction:column; gap:2px;}
  .ai-pipeline__stat strong {color:var(--c-accent); font-family:var(--f-display); font-size:1.1rem; font-weight:800; letter-spacing:-0.02em;}
  .ai-pipeline__stat span {color:var(--c-text-tertiary); font-family:var(--f-body); font-size:0.75rem; font-weight:500;}
  .ai-pipeline__arrow {align-self:center; position:relative; width:1.5px; height:16px; background:var(--c-border);}
  .ai-pipeline__arrow::after {content:''; position:absolute; bottom:-2px; left:50%; width:6px; height:6px; border-right:1.5px solid var(--c-border); border-bottom:1.5px solid var(--c-border); transform:translateX(-50%) rotate(45deg);}
  .ai-pipeline__tag {position:absolute; z-index:2; padding:6px 12px; border-radius:var(--r-pill); background:var(--c-dark); color:var(--c-white); font-family:var(--f-display); font-size:0.72rem; font-weight:700; letter-spacing:0.05em; box-shadow:var(--shadow-md); animation:hero-badge-float 5s var(--ease-in-out) infinite;}
  .ai-pipeline__tag--1 {top:4px; right:-6px;}
  .ai-pipeline__tag--2 {top:42%; left:-24px; animation-delay:-1.5s;}
  .ai-pipeline__tag--3 {bottom:24px; right:-12px; animation-delay:-3s;}
  @media (max-width:768px) {
    .ai-pipeline {padding:16px 4px;}
    .ai-pipeline__tag--2 {left:4px;}
    .ai-pipeline__tag--3 {right:4px;}
  }

 /* ============================================
     NAV ACTIVE STATE (서브페이지 현재 표시)
     ============================================ */
  .nav__link--active {background:var(--c-accent-dim); color:var(--c-accent-hover);}
  a.nav__cta.nav__link--active {background:var(--c-accent); color:#ffffff;}

 /* ============================================
     REDUCED MOTION
     ============================================ */
  @media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
    .reveal {opacity:1; transform:none;}
  }