@charset "UTF-8";
/* =========================================================
    Design Tokens（CSS変数）
    ========================================================= */
:root {
  /* brand */
  --color-primary: #d136d1; /* メインカラー */
  --color-primary-ink: #ffffff;
  --color-accent: #6bdbff;  /* 補助色 */

  /* surface & text */
  --color-bg: #0e002e; /* ダーク基調（既存のWDCテーマに寄せた雰囲気）*/
  --color-bg-soft: #190a3d;
  --color-ink: #f6f6f9;
  --color-ink-dim: #cfd2de;
  --color-border: #3b2e5a;

  /* gradient */
  --bg-gradient: linear-gradient(135deg,#0e002e,#1e092b,#320c65,#a01b7c,#c21780);

  /* spacing scale */
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 56px;
  --space-8: 72px;

  /* radius & shadow */
  --radius: 16px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.25);

  /* layout */
  --container: min(1100px, 92vw);

  /* type scale */
  --fz-xs: clamp(11px, .75rem, 12px);
  --fz-sm: clamp(13px, .85rem, 14px);
  --fz-md: clamp(15px, 1rem, 16px);
  --fz-lg: clamp(18px, 1.25rem, 20px);
  --fz-xl: clamp(24px, 1.8rem, 30px);
  --fz-2xl: clamp(30px, 2.4rem, 40px);
  --fz-3xl: clamp(38px, 3rem, 56px);

  --leading-tight: 1.25;
  --leading-normal: 1.6;
}

/* =========================================================
    Base
    ========================================================= */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  color:var(--color-ink);
  background:var(--bg-gradient) fixed;
  font-family: "Montserrat","Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: 'palt';
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:var(--container); margin-inline:auto}

/* =========================================================
    Utilities (小規模ユーティリティ)
    ========================================================= */
.u-text-dim{color:var(--color-ink-dim)}
.u-pill{display:inline-block;padding:.5em .9em;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--color-border);}
.u-section{padding-top: clamp(18px,3vw,48px);padding-bottom: clamp(28px,5vw,60px);}
.u-card{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-1)}

/* =========================================================
    Buttons（BEM）
    ========================================================= */
.button{--_bg:var(--color-primary);--_ink:var(--color-primary-ink);display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.2em;border-radius:12px;background:var(--_bg);color:var(--_ink);font-weight:700;border:1px solid transparent;transition:transform .12s ease,opacity .2s ease,box-shadow .2s ease}
.button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.button--ghost{--_bg:transparent;--_ink:var(--color-ink);border-color:var(--color-border)}
.button--small{padding:.6em .9em;font-size:var(--fz-sm)}

/* =========================================================
    Header（BEM）
    ========================================================= */
.header{position:sticky;top:0;z-index:10;background:rgba(10,2,30,.6);backdrop-filter: blur(10px);border-bottom:1px solid var(--color-border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:14px 0}
.header__brand{display:flex;align-items:center;gap:12px}
.header__logo{width:28px;height:28px;border-radius:8px;background:conic-gradient(from 210deg,var(--color-accent),var(--color-primary));border:1px solid rgba(255,255,255,.4)}
.header__title{font-weight:700;letter-spacing:.04em}
.header__link{font-size:var(--fz-sm);opacity:.9}

@media (max-width: 820px){
  }

/* =========================================================
    Hero（BEM）
    ========================================================= */
.hero{position:relative;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:center}
.hero__copy{padding-block: clamp(36px, 6vw, 72px)}
.hero__title{font-size:var(--fz-3xl);line-height:1.15;margin:.2em 0 .3em}
.hero__lead{font-size:var(--fz-lg);color:var(--color-ink-dim);max-width:40ch}
.hero__mock{aspect-ratio: 4 / 3;border-radius:var(--radius);background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.03));border:1px solid var(--color-border);box-shadow:var(--shadow-1);overflow:hidden;position:relative;}
.hero__mock::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 600px at 120% -10%, rgba(107,219,255,.25), transparent 60%), radial-gradient(800px 400px at -10% 110%, rgba(209,54,209,.25), transparent 60%);border-radius:inherit;z-index:1;}
.hero__mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:0;}
@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr}
  .hero__visual{order:-1}
}

/* =========================================================
    Works（BEM）
    ========================================================= */
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.works__card{overflow:hidden}
.works__thumb {background-size: cover;background-position: center;aspect-ratio: 4 / 3;border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);}
.works__meta{padding:16px}
.works__title{font-weight:700}
.works__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.project__credit a{text-decoration: underline;}
@media (max-width: 900px){
  .works__grid{grid-template-columns:1fr}
}

/* =========================================================
    About（BEM）
    ========================================================= */
.about__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-6);align-items:center}
.about__photo{aspect-ratio: 4 / 5;border-radius:var(--radius);background:linear-gradient(135deg, rgba(107,219,255,.25), rgba(209,54,209,.15));border:1px solid var(--color-border);overflow: hidden;}
.about__photo img {width: 100%;height: auto;}
.about__text p{margin:.6em 0}
@media (max-width: 900px){
  .about__inner{grid-template-columns:1fr}
}
/* =========================================================
    Contact（BEM）
    ========================================================= */
.contact__inner {padding: var(--space-5);text-align: center;}
.contact__text {margin: 0 0 var(--space-4);color: var(--color-ink-dim);}
.contact__button {min-width: 220px;justify-content: center;}
.contact__note {margin: var(--space-3) 0 0;font-size: var(--fz-sm);color: var(--color-ink-dim);}
@media (max-width: 900px) {
  .contact__inner {padding: var(--space-4);}
  .contact__button {width: 100%;}
}
/* =========================================================
    Footer
    ========================================================= */
.footer{border-top:1px solid var(--color-border)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:20px 0}
.footer__links{display:flex;gap:16px;flex-wrap:wrap}

/* =========================================================
    Section head 共通
    ========================================================= */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-5)}
.section-head__title{font-size:var(--fz-2xl);line-height:var(--leading-tight)}
.section-head__desc{color:var(--color-ink-dim)}

/* デモ用：スクロールの余白調整 */
section + section{scroll-margin-top:84px}