:root{
  --bg:#ffffff;
  --bg-soft:#f5f5f7;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --accent:#e61e57;
  --accent-dark:#b4123f;
  --line:#d2d2d7;
  --radius:20px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}

/* NAV */
nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.logo{font-weight:700; font-size:17px; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px;}
.logo-img{width:22px; height:22px; object-fit:contain; display:block;}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;}
.nav-links{display:flex; gap:32px; font-size:13px; color:var(--ink-soft);}
.nav-links a{transition:color .2s ease;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{
  background:var(--ink); color:#fff; padding:8px 18px; border-radius:980px;
  font-size:13px; font-weight:500;
}

/* SHARED EYEBROW / HEADLINE / BUTTONS */
.eyebrow{
  font-size:13px; font-weight:600; color:var(--accent);
  letter-spacing:0.02em; margin-bottom:18px;
}
h1{
  font-size:clamp(40px, 6vw, 76px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.03em;
  margin:0 0 20px;
}
h1 .thin{font-weight:500; color:var(--ink-soft); display:block;}
.btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.btn{
  padding:13px 28px;
  border-radius:980px;
  font-size:15px;
  font-weight:500;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  display:inline-block;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);}
.btn-secondary{color:var(--accent); font-weight:500; border:1.5px solid var(--accent); background:transparent;}
.btn-secondary:hover{background:var(--accent); color:#fff; text-decoration:none; transform:translateY(-1px);}
.btn:not(.btn-primary):not(.btn-secondary){
  background:var(--accent);
  color:#fff;
  border:1.5px solid var(--accent);
}
.btn:not(.btn-primary):not(.btn-secondary):hover{
  background:transparent;
  color:var(--accent);
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* HERO (home page) */
.hero{
  position:relative;
  padding:140px 24px 100px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:600px;
  background:radial-gradient(circle at center, rgba(0,113,227,0.14), transparent 65%);
  filter:blur(10px);
  z-index:0;
}
.hero-content{position:relative; z-index:1; max-width:820px; margin:0 auto;}
.hero p{
  font-size:clamp(17px, 2vw, 21px);
  color:var(--ink-soft);
  max-width:560px;
  margin:0 auto 36px;
  line-height:1.5;
}

/* mark visual (home page) */
.mark{
  margin:64px auto 0;
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
}
.mark img{width:100%; height:100%; object-fit:contain;}

/* SERVICES (home page) */
.section{padding:110px 24px; max-width:1180px; margin:0 auto;}
.section-head{text-align:center; max-width:640px; margin:0 auto 64px;}
.section-head .tag{font-size:13px; font-weight:600; color:var(--accent); margin-bottom:12px;}
.section-head h2{
  font-size:clamp(30px,4vw,44px);
  letter-spacing:-0.02em;
  font-weight:700;
  margin:0 0 14px;
}
.section-head p{color:var(--ink-soft); font-size:17px; line-height:1.6; margin:0;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:20px;
}
.card{
  background:var(--bg-soft);
  border-radius:var(--radius);
  padding:36px 28px;
  text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,0.08);}
.card-icon{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:20px;
}
.card h3{font-size:19px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em;}
.card p{font-size:14px; color:var(--ink-soft); margin:0 0 18px; line-height:1.5;}
.card .link{font-size:13px; font-weight:600; color:var(--accent);}

/* PORTFOLIO STRIP (home page) */
.port-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:160px;
  gap:16px;
}
.port-item{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:var(--bg-soft);
  display:block;
}
.port-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.port-item:hover img{transform:scale(1.06);}
.port-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.port-item:hover .port-caption{opacity:1; transform:translateY(0);}
.port-caption .p-title{font-size:14px; font-weight:600; letter-spacing:-0.01em;}
.port-caption .p-tag{font-size:11px; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em;}

.p-1{grid-column:span 3; grid-row:span 2;}
.p-2{grid-column:span 3; grid-row:span 1;}
.p-3{grid-column:span 3; grid-row:span 1;}
.p-4{grid-column:span 2; grid-row:span 2;}
.p-5{grid-column:span 2; grid-row:span 2;}
.p-6{grid-column:span 2; grid-row:span 2;}
.p-7{grid-column:span 3; grid-row:span 1;}
.p-8{grid-column:span 3; grid-row:span 1;}

.portfolio-more{
  text-align:center;
  margin-top:48px;
}

/* SHOWCASE / DARK BLOCK (home page) */
.showcase{
  background:var(--ink);
  color:#fff;
  border-radius:32px;
  margin:0 24px;
  padding:100px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.showcase::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(0,113,227,0.35), transparent 55%);
}
.showcase-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
.showcase h2{font-size:clamp(28px,4vw,46px); font-weight:700; letter-spacing:-0.02em; margin:0 0 18px;}
.showcase p{color:rgba(255,255,255,0.65); font-size:17px; margin:0 0 36px; line-height:1.6;}

/* HEADER (portfolio page) */
.head{
  position:relative;
  padding:96px 24px 56px;
  text-align:center;
  overflow:hidden;
}
.head::before{
  content:"";
  position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:900px; height:560px;
  background:radial-gradient(circle at center, rgba(0,113,227,0.14), transparent 65%);
  z-index:0;
}
.head-inner{position:relative; z-index:1; max-width:720px; margin:0 auto;}
.head h1{font-size:clamp(36px, 5vw, 60px);}
.head p{
  font-size:clamp(16px, 1.6vw, 19px);
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto;
  line-height:1.55;
}

/* FILTERS (portfolio page) */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:40px auto 0;
  position:relative; z-index:1;
}
.filter-btn{
  padding:9px 18px;
  border-radius:980px;
  font-size:13px;
  font-weight:500;
  background:var(--bg-soft);
  color:var(--ink-soft);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{
  background:var(--ink);
  color:#fff;
}

/* BENTO GRID (portfolio page) */
.wrap{max-width:1240px; margin:0 auto; padding:56px 24px 120px;}
.bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:150px;
  grid-auto-flow:dense;
  gap:16px;
}
.b-item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-soft);
  display:block;
  transition:opacity .3s ease, transform .3s ease;
}
.b-item.hidden{
  display:none;
}
.b-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.b-item:hover img{transform:scale(1.06);}
.b-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,0.68), transparent);
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.b-item:hover .b-caption{opacity:1; transform:translateY(0);}
.b-caption .b-title{font-size:14px; font-weight:600; letter-spacing:-0.01em;}
.b-caption .b-tag{font-size:11px; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em;}

/* size variants — the bento rhythm */
.sz-xl{grid-column:span 4; grid-row:span 2;}
.sz-l {grid-column:span 3; grid-row:span 2;}
.sz-w {grid-column:span 4; grid-row:span 1;}
.sz-t {grid-column:span 2; grid-row:span 2;}
.sz-m {grid-column:span 2; grid-row:span 1;}
.sz-s {grid-column:span 2; grid-row:span 1;}

/* CTA (portfolio page dark block) */
.cta{
  background:var(--ink);
  color:#fff;
  border-radius:32px;
  margin:0 24px 80px;
  padding:90px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(0,113,227,0.35), transparent 55%);
}
.cta-inner{position:relative; z-index:1; max-width:600px; margin:0 auto;}
.cta h2{font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-0.02em; margin:0 0 16px;}
.cta p{color:rgba(255,255,255,0.65); font-size:16px; margin:0 0 32px; line-height:1.6;}

/* LIGHTBOX (both pages) */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease;
  padding:48px;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-img{
  max-width:90vw; max-height:85vh;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:scale(.96);
  transition:transform .3s ease;
}
.lightbox.open .lightbox-img{transform:scale(1);}
.lightbox-close, .lightbox-nav{
  position:absolute;
  background:rgba(255,255,255,0.1);
  color:#fff; border:none; cursor:pointer;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,0.22);}
.lightbox-close{top:24px; right:24px; width:44px; height:44px; font-size:22px;}
.lightbox-nav{top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:26px;}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}

/* FOOTER */
footer{
  padding:60px 24px 40px;
  text-align:center;
  border-top:1px solid rgba(0,0,0,0.06);
}
footer .foot-logo{font-weight:700; font-size:15px; margin-bottom:8px;}
footer p{font-size:12px; color:var(--ink-soft); margin:4px 0;}

/* scroll-reveal utility (home page) */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* RESPONSIVE */
@media (max-width:900px){
  .port-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:200px;}
  .p-1,.p-2,.p-3,.p-4,.p-5,.p-6,.p-7,.p-8{grid-column:span 1; grid-row:span 1;}
  .p-1{grid-column:span 2; grid-row:span 2;}

  .bento{grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px;}
  .sz-xl,.sz-l,.sz-w,.sz-t,.sz-m,.sz-s{grid-column:span 1; grid-row:span 1;}
  .sz-xl,.sz-l{grid-column:span 2; grid-row:span 2;}
}

@media (max-width:640px){
  .lightbox{padding:20px;}
  .lightbox-nav{width:40px; height:40px; font-size:20px;}
  .lightbox-close{top:14px; right:14px;}
}

@media (max-width:600px){
  nav{padding:14px 20px;}
  .nav-links{display:none;}
  .section{padding:80px 20px;}
  .showcase{margin:0 12px; padding:70px 24px; border-radius:24px;}
  .cta{margin:0 12px 60px; padding:64px 24px; border-radius:24px;}
  .wrap{padding:40px 20px 90px;}
}