/* ==========================================================================
   Pevera Technologies — site styles (v2)
   Flat colour system from the brand mark. No gradients on content surfaces.
   Larger type scale, tighter rhythm, richer components + motion.
   ========================================================================== */

:root {
  --navy:      #16295c;
  --navy-deep: #0e1c42;
  --navy-800:  #1b306a;
  --blue:      #2b7fff;
  --blue-ink:  #1f66d6;
  --blue-soft: #eaf1ff;

  --ink:    #10182b;
  --slate:  #4d5771;
  --slate-2:#6b7590;
  --line:   #e4e9f2;
  --line-2: #eef2f8;
  --mist:   #f5f7fc;
  --paper:  #ffffff;

  --sans: "Barlow", system-ui, -apple-system, sans-serif;
  --head: "Sora", var(--sans);

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --radius: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 8px rgba(16,24,43,.06);
  --shadow-md: 0 14px 34px rgba(16,24,43,.10);
  --shadow-lg: 0 30px 70px rgba(14,28,66,.22);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--paper);
  line-height: 1.6; font-size: 18px; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--blue); color: #fff; }

h1, h2, h3, h4 { font-family: var(--head); color: var(--navy); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.9rem, 6vw, 5rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h3 { font-size: 1.4rem; letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; }
p  { color: var(--slate); }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--slate); max-width: 56ch; line-height: 1.55; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(56px, 7vw, 96px); position: relative; }
.section-mist { background: var(--mist); }
.section-navy { background: var(--navy); color: #c7d2ea; position:relative; overflow:hidden; }
.section-navy::before { content:""; position:absolute; inset:0; z-index:0; background-image:url("../img/photo-section.jpg"); background-size:cover; background-position:center; opacity:.28; }
.section-navy > .wrap { position:relative; z-index:2; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }

.section-head { max-width: 60ch; margin-bottom: clamp(34px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 600; font-size: 0.9rem; color: var(--blue-ink); margin-bottom: 16px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--blue); display:inline-block; }
.section-head.center .kicker { justify-content: center; }
.section-navy .kicker { color: #7fb0ff; }
.section-head p { margin-top: 18px; font-size: 1.2rem; }

.btn { display: inline-flex; align-items: center; justify-content:center; gap: 10px; font-family: var(--head); font-weight: 600; font-size: 1.02rem; padding: 15px 28px; border-radius: var(--radius); border: 2px solid transparent; transition: transform .16s ease, background .18s, border-color .18s, color .18s, box-shadow .18s; will-change: transform; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(43,127,255,.28); }
.btn-primary:hover { background: var(--blue-ink); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,127,255,.34); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color:#fff; transform: translateY(-2px); }
.btn-lg { padding: 18px 36px; font-size: 1.08rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.stuck { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-family: var(--head); font-weight: 500; font-size: 1rem; color: var(--navy); position: relative; padding-block: 6px; }
.nav-links a:not(.btn)::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blue); transition: width .2s; }
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-cta { margin-left: 4px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; z-index: 90; position:relative; }
.nav-scrim { position:fixed; inset:0; background:rgba(10,18,38,.5); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:55; }
.nav-scrim.show { opacity:1; visibility:visible; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--navy); margin:6px 0; transition: .25s; border-radius:2px;}
.nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px); background: var(--navy-deep); color: #fff; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image: url("../img/photo-hero.jpg");
  background-size: cover; background-position: center;
  opacity:.9;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(14,28,66,.78), rgba(14,28,66,.9));
}
.hero-bg { position:absolute; inset:0; overflow:hidden; z-index:1; }
.hero-bg span { position:absolute; display:block; border-radius: 20px; }
.hero-bg .s1 { width:420px; height:420px; right:-90px; top:-120px; background:var(--navy-800); transform:rotate(35deg); opacity:.28; }
.hero-bg .s2 { width:300px; height:300px; right:120px; bottom:-140px; background:var(--blue); opacity:.06; transform:rotate(25deg); }
.hero-bg .s3 { width:150px; height:150px; left:-40px; bottom:60px; background:var(--navy-800); transform:rotate(18deg); opacity:.28; }
.hero-bg .dots { position:absolute; right:8%; top:18%; width:180px; height:120px; background-image: radial-gradient(rgba(127,176,255,.35) 2px, transparent 2px); background-size: 22px 22px; opacity:.4; }
/* Spider-web canvas overlay */
.web-canvas { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-grid { position:relative; z-index:2; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px,4vw,64px); align-items: center; }
.hero-pill { display:inline-flex; align-items:center; gap:10px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:8px 16px 8px 10px; border-radius:999px; font-family:var(--head); font-size:.92rem; font-weight:500; color:#dbe6ff; margin-bottom:26px; }
.hero-pill b { background:var(--blue); color:#fff; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.03em; }
.hero h1 { color:#fff; }
.hero h1 .accent { color: #6ea8ff; }
.hero .lead { margin-top: 22px; color:#b9c6e4; }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: clamp(24px,4vw,52px); flex-wrap: wrap; }
.hero-stats .num { font-family: var(--head); font-size: clamp(1.8rem,2.4vw,2.4rem); color:#fff; font-weight:700; line-height:1; }
.hero-stats .lbl { font-size: 0.92rem; color: #93a3c9; margin-top:8px; display:block; }

.hero-visual { position: relative; }
.hero-card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transition: transform .5s ease; }
.hero-visual:hover .hero-card { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }
.hc-top { background: var(--navy); padding:14px 18px; display:flex; align-items:center; gap:10px; }
.hc-top i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.25); }
.hc-top b { color:#fff; font-family:var(--head); font-size:.9rem; margin-left:8px; }
.hc-body { display:grid; grid-template-columns: 74px 1fr; min-height:300px; }
.hc-side { background:var(--mist); border-right:1px solid var(--line); padding:16px 0; display:grid; gap:14px; justify-items:center; align-content:start; }
.hc-side i { width:34px; height:9px; border-radius:4px; background:var(--line); }
.hc-side i.on { background:var(--blue); }
.hc-main { padding:20px; display:grid; gap:16px; align-content:start; }
.hc-stat { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hc-stat div { background:var(--mist); border:1px solid var(--line-2); border-radius:8px; padding:14px; }
.hc-stat b { display:block; font-family:var(--head); color:var(--navy); font-size:1.4rem; }
.hc-stat span { font-size:.72rem; color:var(--slate-2); }
.hc-chart { display:flex; align-items:flex-end; gap:10px; height:96px; padding-top:6px; }
.hc-chart i { flex:1; background:var(--blue-soft); border-radius:5px 5px 0 0; position:relative; }
.hc-chart i::after { content:""; position:absolute; inset:auto 0 0 0; height:var(--h,40%); background:var(--blue); border-radius:5px 5px 0 0; }
.hc-rows { display:grid; gap:9px; }
.hc-rows i { height:11px; border-radius:4px; background:var(--line-2); }
.hc-rows i:nth-child(odd){ width:88%; } .hc-rows i:nth-child(even){ width:66%; }

.hero-badge { position:absolute; background:#fff; border-radius:12px; box-shadow: var(--shadow-md); padding:14px 16px; display:flex; align-items:center; gap:12px; z-index:3; }
.hero-badge .ic { width:38px; height:38px; border-radius:9px; background:var(--blue); display:grid; place-items:center; flex:none; }
.hero-badge .ic svg { width:20px; height:20px; stroke:#fff; }
.hero-badge b { display:block; font-family:var(--head); color:var(--navy); font-size:.98rem; line-height:1.1; }
.hero-badge span { font-size:.76rem; color:var(--slate-2); }
.hero-badge.b1 { left:-26px; top:30%; animation: float 5s ease-in-out infinite; }
.hero-badge.b2 { right:-20px; bottom:16%; animation: float 5s ease-in-out infinite .6s; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@media (prefers-reduced-motion: reduce){ .hero-badge{ animation:none; } }

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.hero-carousel { position:relative; z-index:3; }
.carousel-track { position:relative; }
.slide { display:none; }
.slide.active { display:block; }
.slide-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,4vw,64px); align-items:center; }

/* Varied entrance animations — each slide uses a different flavour */
.slide.anim .slide-copy > * { opacity:0; animation-duration:.7s; animation-timing-function:cubic-bezier(.2,.7,.2,1); animation-fill-mode:forwards; }
.slide.anim .slide-copy > *:nth-child(1){ animation-delay:.05s; }
.slide.anim .slide-copy > *:nth-child(2){ animation-delay:.14s; }
.slide.anim .slide-copy > *:nth-child(3){ animation-delay:.23s; }
.slide.anim .slide-copy > *:nth-child(4){ animation-delay:.32s; }
.slide.anim .slide-visual { opacity:0; animation-duration:.8s; animation-timing-function:cubic-bezier(.2,.7,.2,1); animation-fill-mode:forwards; animation-delay:.12s; }

/* Flavour 1: slide up */
.slide.fx-up.anim .slide-copy > * { animation-name: eUp; }
.slide.fx-up.anim .slide-visual { animation-name: eZoom; }
/* Flavour 2: slide from left / visual from right */
.slide.fx-left.anim .slide-copy > * { animation-name: eLeft; }
.slide.fx-left.anim .slide-visual { animation-name: eRight; }
/* Flavour 3: fade + scale */
.slide.fx-fade.anim .slide-copy > * { animation-name: eFade; }
.slide.fx-fade.anim .slide-visual { animation-name: eFadeVis; }
/* Flavour 4: slide from right / visual from left */
.slide.fx-right.anim .slide-copy > * { animation-name: eRight2; }
.slide.fx-right.anim .slide-visual { animation-name: eLeftVis; }

@keyframes eUp { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
@keyframes eLeft { from{opacity:0; transform:translateX(-34px);} to{opacity:1; transform:none;} }
@keyframes eRight { from{opacity:0; transform:translateX(40px) scale(.97);} to{opacity:1; transform:none;} }
@keyframes eRight2 { from{opacity:0; transform:translateX(34px);} to{opacity:1; transform:none;} }
@keyframes eLeftVis { from{opacity:0; transform:translateX(-40px) scale(.97);} to{opacity:1; transform:none;} }
@keyframes eFade { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@keyframes eFadeVis { from{opacity:0; transform:scale(.94);} to{opacity:1; transform:none;} }
@keyframes eZoom { from{opacity:0; transform:translateY(20px) scale(.96);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
  .slide.anim .slide-copy > *, .slide.anim .slide-visual { opacity:1 !important; transform:none !important; animation:none !important; }
}

.slide-eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--head); font-weight:600;
  font-size:.9rem; color:#7fb0ff; margin-bottom:20px;
}
.slide-eyebrow .tag { background:var(--blue); color:#fff; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:999px; letter-spacing:.03em; }
.slide-eyebrow.work .tag { background:rgba(255,255,255,.14); }
.slide h1 { color:#fff; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.slide h1 .accent { color:#6ea8ff; }
.slide .lead { margin-top:20px; color:#b9c6e4; }
.slide-actions { margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.slide-tags { margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.slide-tags span { font-family:var(--head); font-size:.86rem; font-weight:500; color:#c7d2ea; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); padding:7px 14px; border-radius:999px; }

/* Slide visuals */
.slide-visual { position:relative; }
.sv-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
/* real photo inside a browser-chrome frame */
.sv-photo { position:relative; }
.sv-photo img { width:100%; aspect-ratio:16/11; object-fit:cover; display:block; }
.sv-photo .chrome { position:absolute; inset:0 0 auto 0; height:42px; background:linear-gradient(180deg, rgba(14,28,66,.55), rgba(14,28,66,0)); display:flex; align-items:center; gap:8px; padding:0 16px; }
.sv-photo .chrome i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); }
.sv-photo .chrome b { color:#fff; font-family:var(--head); font-size:.85rem; margin-left:8px; opacity:.95; }
.sv-figure { position:relative; aspect-ratio: 16/11; background:var(--navy); overflow:hidden; }
.sv-figure .art { position:absolute; inset:0; }
.sv-figure .art span { position:absolute; display:block; border-radius:8px; }

/* code slide art */
.art-code span.a{ left:8%; top:16%; width:56%; height:14px; background:rgba(127,176,255,.5);}
.art-code span.b{ left:8%; top:29%; width:38%; height:14px; background:rgba(127,176,255,.28);}
.art-code span.c{ left:16%; top:44%; width:50%; height:14px; background:rgba(255,255,255,.2);}
.art-code span.d{ left:16%; top:57%; width:32%; height:14px; background:rgba(255,255,255,.15);}
.art-code span.e{ left:8%; top:72%; width:44%; height:14px; background:var(--blue); opacity:.85;}
.art-code span.f{ right:9%; top:18%; width:92px; height:92px; background:rgba(43,127,255,.22); border-radius:20px;}

/* integration slide art */
.sv-figure.art-int { display:block; }
.int-lines { position:absolute; inset:0; width:100%; height:100%; }
.int-lines line { stroke:rgba(127,176,255,.55); stroke-width:.7; stroke-dasharray:2 2; }
.art-int .node{ position:absolute; width:66px; height:66px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md); display:grid; place-items:center; z-index:2; color:var(--navy); }
.art-int .node i { font-size:24px; }
.art-int .n1{ left:16%; top:22%; } .art-int .n2{ right:16%; top:18%; } .art-int .n3{ left:44%; bottom:14%; }

.sv-badge { position:absolute; background:#fff; border-radius:12px; box-shadow:var(--shadow-md); padding:12px 15px; display:flex; align-items:center; gap:11px; z-index:3; }
.sv-badge .ic { width:36px; height:36px; border-radius:9px; background:var(--blue); display:grid; place-items:center; flex:none; color:#fff; }
.sv-badge .ic i { font-size:16px; }
.sv-badge b { display:block; font-family:var(--head); color:var(--navy); font-size:.92rem; line-height:1.1; }
.sv-badge span { font-size:.74rem; color:var(--slate-2); }

/* Carousel controls */
.carousel-nav { display:flex; align-items:center; justify-content:space-between; margin-top:36px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.carousel-dots { display:flex; gap:10px; }
.carousel-dots button { width:36px; height:5px; border-radius:999px; border:0; background:rgba(255,255,255,.2); padding:0; transition: background .25s, width .25s; cursor:pointer; position:relative; overflow:hidden; }
.carousel-dots button.active { background:rgba(255,255,255,.3); width:56px; }
.carousel-dots button.active::after { content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--blue); animation: fill 6s linear forwards; }
@media (prefers-reduced-motion: reduce){ .carousel-dots button.active::after{ animation:none; width:100%; } }
@keyframes fill { to { width:100%; } }
.carousel-arrows { display:flex; gap:10px; }
.carousel-arrows button { width:46px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; transition: background .2s, border-color .2s, transform .15s; }
.carousel-arrows button:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); }
.carousel-arrows button:active { transform: scale(.94); }
.carousel-arrows button i { font-size:16px; }

@media (max-width:980px){
  .slide-grid { grid-template-columns:1fr; }
  .slide-visual { max-width:520px; }
}
@media (max-width:720px){
  .carousel-nav { flex-direction:column-reverse; gap:20px; align-items:stretch; }
  .carousel-arrows { justify-content:center; }
  .carousel-dots { justify-content:center; }
}

/* ==========================================================================
   Work / portfolio
   ========================================================================== */
.work-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
.work-card {
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; transition: transform .22s ease, box-shadow .22s ease; display:flex; flex-direction:column;
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.work-visual { aspect-ratio: 16/9; background:var(--navy); position:relative; overflow:hidden; }
.work-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.work-card:hover .work-photo img { transform:scale(1.05); }
.work-visual .hc-top { position:absolute; inset:0 0 auto 0; }
.work-visual .mini { position:absolute; inset:44px 20px 20px; background:#fff; border-radius:10px; padding:14px; display:grid; gap:10px; align-content:start; }
.work-visual .mini .mrow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.work-visual .mini .mrow div { background:var(--mist); border:1px solid var(--line-2); border-radius:6px; padding:10px; }
.work-visual .mini .mrow b { font-family:var(--head); color:var(--navy); font-size:1rem; display:block; }
.work-visual .mini .mrow span { font-size:.6rem; color:var(--slate-2); }
.work-visual .mini .mbars { display:flex; align-items:flex-end; gap:6px; height:52px; }
.work-visual .mini .mbars i { flex:1; background:var(--blue-soft); border-radius:3px 3px 0 0; position:relative; }
.work-visual .mini .mbars i::after { content:""; position:absolute; inset:auto 0 0 0; height:var(--h,50%); background:var(--blue); border-radius:3px 3px 0 0; }
.work-body { padding:28px 28px 30px; display:flex; flex-direction:column; flex:1; }
.work-body .tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.work-body .tag-row span { font-family:var(--head); font-size:.76rem; font-weight:600; color:var(--blue-ink); background:var(--blue-soft); padding:4px 11px; border-radius:999px; }
.work-body h3 { font-size:1.45rem; margin-bottom:10px; }
.work-body p { font-size:1.02rem; margin-bottom:20px; flex:1; }
.work-body .go { font-family:var(--head); font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:8px; align-self:flex-start; border-bottom:2px solid var(--blue); padding-bottom:3px; }
.work-body .go i { font-size:14px; transition:transform .2s; }
.work-card:hover .go i { transform: translateX(4px); }
.work-soon { display:grid; place-items:center; text-align:center; border:2px dashed var(--line); border-radius:var(--radius-lg); background:var(--mist); padding:40px; }
.work-soon .badge { font-family:var(--head); font-weight:600; font-size:.8rem; color:var(--slate-2); background:#fff; border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.work-soon h3 { font-size:1.3rem; margin-bottom:8px; }
.work-soon p { font-size:1rem; max-width:34ch; }
@media (max-width:720px){ .work-grid { grid-template-columns:1fr; } }

/* Portfolio grid — 3-up project cards */
.portfolio { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pcard { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; }
.pcard:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.pcard-img { position:relative; aspect-ratio:16/10; overflow:hidden; }
.pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard-img img { transform:scale(1.07); }
.pcard-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,28,66,0) 40%, rgba(14,28,66,.55)); }
.pcard-cat { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--head); font-size:.72rem; font-weight:600; letter-spacing:.03em; color:#fff; background:rgba(43,127,255,.9); padding:5px 12px; border-radius:999px; }
.pcard-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pcard-body h3 { font-size:1.22rem; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.pcard-body h3 i { color:var(--blue-ink); font-size:1rem; }
.pcard-body p { font-size:.96rem; margin-bottom:16px; flex:1; }
.pcard-tags { display:flex; gap:7px; flex-wrap:wrap; }
.pcard-tags span { font-family:var(--head); font-size:.72rem; font-weight:600; color:var(--slate-2); background:var(--mist); border:1px solid var(--line); padding:4px 10px; border-radius:999px; }
.pcard.featured { grid-column:span 1; }
.pcard.featured .pcard-cat { background:rgba(22,41,92,.92); }
@media (max-width:900px){ .portfolio { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .portfolio { grid-template-columns:1fr; } }

/* Marquee */
.strip { background: var(--paper); border-bottom:1px solid var(--line); padding-block: 26px; }.strip .wrap { display:flex; align-items:center; gap:28px; }
.strip .label { font-family:var(--head); font-weight:600; font-size:.82rem; letter-spacing:.06em; color:var(--slate-2); white-space:nowrap; flex:none; }
.marquee { overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee ul { display:flex; gap:52px; width:max-content; animation: slide 26s linear infinite; }
.marquee li { font-family:var(--head); font-weight:600; font-size:1.15rem; color:var(--navy); opacity:.55; white-space:nowrap; display:flex; align-items:center; gap:12px; }
.marquee li::before { content:""; width:7px; height:7px; background:var(--blue); border-radius:2px; transform:rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee ul { animation:none; } }

/* Paths */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.path { position:relative; overflow:hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; background: var(--paper); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.path::before { content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--blue); }
.path.alt::before { background:var(--navy); }
.path:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.path .path-ic { width:56px; height:56px; border-radius:14px; background:var(--blue-soft); display:grid; place-items:center; margin-bottom:22px; }
.path.alt .path-ic { background:var(--mist); }
.path .path-ic i { font-size:24px; color:var(--blue-ink); }
.path.alt .path-ic i { color:var(--navy); }
.path h3 { margin-bottom:12px; font-size:1.55rem; }
.path p { flex: 1; margin-bottom: 24px; font-size:1.05rem; }
.path .go { font-family: var(--head); font-weight: 600; color: var(--navy); align-self: flex-start; display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--blue); padding-bottom:3px; }
.path .go i { font-size:14px; transition: transform .2s; }
.path:hover .go i { transform: translateX(4px); }

/* Bento */
.bento { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1000px; }
.cell { border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--paper); padding: 30px; transition: transform .18s ease, box-shadow .22s ease, border-color .2s; position:relative; overflow:hidden; transform-style: preserve-3d; will-change: transform; }
.cell:hover { box-shadow: var(--shadow-md); border-color:transparent; }
.cell .ic { width:48px; height:48px; border-radius:12px; background:var(--blue-soft); display:grid; place-items:center; margin-bottom:18px; transition: background .2s, color .2s; color:var(--blue-ink); }
.cell:hover .ic { background:var(--blue); color:#fff; }
.cell .ic i { font-size:19px; line-height:1; }
.cell h3 { margin-bottom:9px; font-size:1.12rem; }
.cell p { font-size:.98rem; }
.cell .cell-inner { transform: translateZ(24px); }
.cell.wide { grid-column: span 2; }
.cell.dark { background:var(--navy); border-color:var(--navy); color:#dbe4f5; }
.cell.dark h3 { color:#fff; }
.cell.dark p { color:#c0cce4; }
.cell.dark .ic { background:rgba(255,255,255,.12); color:#fff; }
.cell.dark:hover .ic { background:var(--blue); }

/* Showcase */
.showcase { display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px,4vw,60px); align-items:center; }
.tabs { display:grid; gap:12px; }
.tab { text-align:left; background:transparent; border:1px solid transparent; border-radius:12px; padding:20px 22px; display:flex; gap:16px; align-items:flex-start; transition: all .2s ease; color:#c7d2ea; }
.tab:hover { background: rgba(255,255,255,.05); }
.tab.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.tab .tn { flex:none; width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.1); display:grid; place-items:center; transition: background .2s; }
.tab.active .tn { background:var(--blue); }
.tab .tn svg { width:20px; height:20px; stroke:#fff; }
.tab h4 { color:#fff; font-size:1.12rem; margin-bottom:4px; }
.tab p { color:#a7b5d6; font-size:.96rem; margin:0; }
.tab.active p { color:#cdd8ef; }
.showcase-stage { position:relative; }
.stage-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.stage-panel { display:none; }
.stage-panel.show { display:block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.sp-top { background:var(--navy); padding:14px 18px; display:flex; align-items:center; gap:8px; }
.sp-top i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25);}
.sp-top b { color:#fff; font-family:var(--head); font-size:.88rem; margin-left:8px;}
.sp-inner { padding:24px; min-height:320px; }
.sp-inner h5 { font-family:var(--head); color:var(--navy); font-size:1.1rem; margin-bottom:16px;}
.sp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
.sp-grid .k { background:var(--mist); border:1px solid var(--line-2); border-radius:9px; padding:16px;}
.sp-grid .k b { display:block; font-family:var(--head); color:var(--navy); font-size:1.5rem;}
.sp-grid .k span { font-size:.74rem; color:var(--slate-2);}
.sp-list { display:grid; gap:10px;}
.sp-list .r { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px 14px; background:var(--mist); border-radius:8px; font-size:.9rem; color:var(--ink); font-family:var(--head); font-weight:500;}
.sp-list .r .pill { font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:600;}
.sp-list .r .pill.ok { background:#e3f5ec; color:#1a7a4a;}
.sp-list .r .pill.due { background:#fdeede; color:#b6791f;}
.sp-bars { display:flex; align-items:flex-end; gap:12px; height:150px;}
.sp-bars i { flex:1; background:var(--blue-soft); border-radius:6px 6px 0 0; position:relative;}
.sp-bars i::after { content:""; position:absolute; inset:auto 0 0 0; height:var(--h,50%); background:var(--blue); border-radius:6px 6px 0 0;}

/* Why grid (about) */
.about-intro { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,4vw,56px); align-items:center; margin-bottom: 40px; }
.about-intro .prose h2 { margin-top:0; }
.about-photo img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); aspect-ratio:9/7; object-fit:cover; }
@media (max-width:860px){ .about-intro { grid-template-columns:1fr; } .about-photo { order:-1; max-width:520px; } }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px 56px; }
.why { display:flex; gap:20px; }
.why .mark { flex:none; width:52px; height:52px; border-radius:13px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; }
.why .mark i { font-size:22px; color:#7fb0ff; }
.why h3 { font-size:1.2rem; margin-bottom:8px; }
.why p { font-size:1.02rem; }
@media (max-width:720px){ .why-grid{ grid-template-columns:1fr; } }

/* Feature list */
.pp-list { margin-top: 26px; display: grid; gap: 14px; }
.pp-list li { display: flex; gap: 14px; align-items: flex-start; color: #c7d2ea; font-size:1.05rem; }
.pp-list .tick { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--blue); display: grid; place-items: center; margin-top: 2px; }
.pp-list .tick i { font-size:12px; color:#fff; }

/* Steps */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: s; }
.step { position:relative; padding-top: 60px; }
.step::before { counter-increment: s; content: counter(s,decimal-leading-zero); font-family:var(--head); font-weight:700; font-size:1rem; color:#fff; position:absolute; top:0; left:0; width:44px; height:44px; border-radius:11px; background:var(--blue); display:grid; place-items:center; }
.step h4 { font-size:1.2rem; margin-bottom:8px; }
.step p { font-size:.98rem; }
.step .bar { position:absolute; top:22px; left:56px; right:-10px; height:2px; background:var(--line); }
.step:last-child .bar { display:none; }

/* Testimonial */
.quote-wrap { max-width: 940px; margin-inline:auto; text-align:center; }
.quote-mark { font-family:var(--head); font-size:5rem; line-height:.6; color:var(--blue); height:44px; }
.quote-wrap blockquote { font-family:var(--head); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--navy); line-height:1.32; letter-spacing:-.02em; margin:20px 0 28px; }
.quote-by { font-weight:600; color:var(--ink); }
.quote-by span { display:block; color:var(--slate-2); font-weight:400; font-size:.95rem; margin-top:2px; }

/* CTA */
.cta-band { background: var(--navy); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; z-index:0; background-image:url("../img/photo-section.jpg"); background-size:cover; background-position:center; opacity:.3; }
.cta-band .glow { position:absolute; width:360px; height:360px; border-radius:30px; background:var(--navy-800); transform:rotate(35deg); right:-80px; top:-100px; opacity:.5; z-index:1; }
.cta-inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-inner h2 { color:#fff; max-width: 18ch; }
.cta-inner p { color:#b9c6e4; margin-top:12px; max-width: 44ch; font-size:1.12rem;}

/* Contact */
.contact { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,60px); }
.contact-info li { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-info li:last-child { border-bottom:0; }
.contact-info .ic { flex:none; width:48px; height:48px; border-radius:11px; background:var(--blue); display:grid; place-items:center; }
.contact-info .ic i { font-size:19px; color:#fff; }
.contact-info b { font-family:var(--head); color:var(--slate-2); display:block; font-size:.78rem; letter-spacing:.05em; margin-bottom:4px;}
.contact-info span, .contact-info a { color: var(--ink); font-size:1.05rem; }
.contact-info a:hover { color: var(--blue-ink); }
.form { background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(26px,3.5vw,40px); }
.field { margin-bottom: 18px; }
.field label { display:block; font-family:var(--head); font-weight:500; font-size:.95rem; color:var(--navy); margin-bottom:8px; }
.field input, .field textarea, .field select { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font:inherit; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,127,255,.14); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size:.9rem; color:var(--slate); margin-top:14px; }
.form-status { margin-top:14px; font-family:var(--head); font-weight:600; font-size:.98rem; display:none; }
.form-status.ok { display:block; color:#1a7a4a; }
.form-status.err { display:block; color:#c0392b; }

/* Footer */
.site-footer { background: var(--navy-deep); color:#93a3c9; padding-block: 68px 30px; }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:36px; }
.foot-brand img { height: 48px; margin-bottom: 20px; }
.foot-brand p { color:#8496ba; max-width: 34ch; font-size:1rem; }
.site-footer h4 { color:#fff; font-family:var(--head); font-size:.98rem; letter-spacing:.03em; margin-bottom:16px; }
.site-footer a { color:#93a3c9; font-size:1rem; line-height: 2.15; transition:color .15s; }
.site-footer a:hover { color:#fff; }
.foot-bottom { margin-top:46px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.9rem; color:#69789e; }

/* Sub-page hero */
.page-hero { background: var(--navy-deep); color:#c7d2ea; padding-block: clamp(56px,7vw,88px); position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:0; background-image:url("../img/photo-page.jpg"); background-size:cover; background-position:center; opacity:.85; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,28,66,.7), rgba(14,28,66,.88)); }
.page-hero .hero-bg { z-index:1; }
.page-hero .wrap { position:relative; z-index:2; }
.page-hero h1 { color:#fff; }
.page-hero p { color:#b9c6e4; margin-top:18px; max-width: 58ch; font-size:1.2rem; }
.crumb { font-family:var(--head); font-size:.9rem; color:#7fb0ff; margin-bottom:18px; }
.crumb a:hover { color:#fff; }

.prose h2 { margin: 44px 0 16px; }
.prose h3 { margin: 32px 0 10px; }
.prose p { margin-bottom: 16px; max-width: 68ch; font-size:1.1rem; }
.prose ul.bullets { margin: 0 0 22px; display:grid; gap:12px; max-width:68ch; }
.prose ul.bullets li { display:flex; gap:14px; color:var(--slate); font-size:1.08rem; }
.prose ul.bullets li::before { content:""; flex:none; width:9px; height:9px; margin-top:10px; background:var(--blue); border-radius:2px; transform:rotate(45deg); }

.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan { border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 30px; background:#fff; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.plan:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.plan.feature { border:2px solid var(--blue); position:relative; box-shadow:var(--shadow-md); }
.plan.feature .flag { position:absolute; top:-14px; left:30px; background:var(--blue); color:#fff; font-family:var(--head); font-size:.74rem; font-weight:600; padding:5px 13px; border-radius:6px; letter-spacing:.03em;}
.plan h3 { margin-bottom:6px; }
.plan .price { font-family:var(--head); font-size:2.3rem; color:var(--navy); font-weight:700; margin:14px 0 4px;}
.plan .price small { font-size:.92rem; color:var(--slate); font-weight:500; }
.plan .plan-desc { font-size:.98rem; margin-bottom:24px; }
.plan ul { display:grid; gap:13px; margin-bottom:30px; flex:1; }
.plan ul li { display:flex; gap:11px; font-size:.98rem; color:var(--ink); }
.plan ul li svg { flex:none; width:19px; height:19px; margin-top:2px; }
.plan .btn { width:100%; }

.faq { max-width: 880px; }
.faq details { border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:#fff; transition:box-shadow .2s; overflow:hidden;}
.faq details[open] { box-shadow:var(--shadow-sm); }
.faq summary { font-family:var(--head); font-weight:600; color:var(--navy); font-size:1.12rem; padding:22px 56px 22px 24px; position:relative; list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:22px; top:18px; font-size:1.6rem; color:var(--blue); font-weight:400; transition:transform .2s;}
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding: 0 24px 22px; max-width:68ch; font-size:1.05rem;}

.reveal { opacity:0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
/* Animate.css tuning */
.animate__animated { --animate-duration: .8s; }
:root { --animate-delay: 1; }
.reveal[data-d="1"]{ transition-delay:.08s;} .reveal[data-d="2"]{ transition-delay:.16s;}
.reveal[data-d="3"]{ transition-delay:.24s;} .reveal[data-d="4"]{ transition-delay:.32s;}
.reveal[data-d="5"]{ transition-delay:.40s;}
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} .hero-card{transform:none;} }

@media (max-width: 980px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 520px; }
  .hero-card { transform:none; }
  .showcase { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap:30px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap:28px; }
  .step .bar { display:none; }
  .plans { grid-template-columns: 1fr; max-width:440px; margin-inline:auto; }
}
@media (max-width: 720px){
  body { font-size: 17px; }
  .site-header { backdrop-filter:none; background:#fff; }
  .nav-links { position: fixed; inset: 0 0 0 auto; width:min(320px,84vw); background:#ffffff; flex-direction:column; align-items:stretch; gap:0; padding: 96px var(--gutter) 30px; border-left:1px solid var(--line); transform: translateX(105%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); z-index:80; overflow-y:auto; }
  .nav-links.open { transform:none; }
  .nav-links a { padding:16px 0; border-bottom:1px solid var(--line); font-size:1.08rem; }
  .nav-links a:not(.btn)::after { display:none; }
  .nav-cta { margin:16px 0 0; }
  .nav-toggle { display:block; }
  .site-header.menu-open { background:#fff; }
  .paths, .bento, .steps { grid-template-columns: 1fr; }
  .cell.wide { grid-column: span 1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-badge { display:none; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
  .hero-stats { gap:22px; }
}
@media (max-width: 460px){ .foot-grid { grid-template-columns: 1fr; } .hc-body{grid-template-columns:56px 1fr;} }