/* =========================================================
   AROBASE 31 — Design system
   Ink & Antique Gold — a "web atelier" identity
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #0b0c10;
  --ink-2:      #12141a;
  --ink-3:      #191c24;
  --line:       rgba(201,162,39,.16);
  --line-strong:rgba(201,162,39,.34);
  --gold:       #c9a227;
  --gold-light: #e9cf82;
  --gold-dim:   #8a7228;
  --ivory:      #f4f1ea;
  --muted:      #9a978d;
  --muted-2:    #6d6a61;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', 'SFMono-Regular', monospace;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --ease: cubic-bezier(.16,.84,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0 0 .5em;letter-spacing:.01em;}
p{margin:0 0 1em;color:var(--muted);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important;}
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--gold);
  display:inline-block;
}

/* ---------- gold underline "signature" reveal ---------- */
.signed{position:relative; display:inline-block;}
.signed svg{
  position:absolute; left:0; bottom:-.12em; width:100%; height:.4em;
  overflow:visible;
}
.signed path{
  fill:none; stroke:var(--gold); stroke-width:2;
  stroke-dasharray:1 260; stroke-dashoffset:0;
  transition:stroke-dasharray 1.1s var(--ease);
}
.signed.in-view path{stroke-dasharray:260 0;}

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted);
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  height:38px; gap:24px; flex-wrap:wrap;
}
.topbar .tb-links{display:flex; gap:22px;}
.topbar a:hover{color:var(--gold-light);}

/* ---------- header / nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,12,16,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:border-color .3s, background .3s;
}
header.site-header.scrolled{
  background:rgba(11,12,16,.92);
  border-bottom-color:var(--line-strong);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-size:22px; letter-spacing:.02em;
  color:var(--ivory);
}
.brand .at{
  color:var(--ink); background:linear-gradient(135deg,var(--gold-light),var(--gold));
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono); font-weight:600; font-size:15px;
}
nav.main-nav{display:flex; gap:34px; align-items:center;}
nav.main-nav a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  position:relative; padding:6px 0; transition:color .25s;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ivory);}
nav.main-nav a:hover::after, nav.main-nav a.active::after{transform:scaleX(1);}

.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:9px 18px; border-radius:999px;
  color:var(--gold-light); transition:all .3s var(--ease); white-space:nowrap;
}
.nav-cta:hover{background:var(--gold); color:var(--ink); border-color:var(--gold);}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;}
.burger span{width:22px;height:1px;background:var(--ivory); display:block;}

@media (max-width: 880px){
  nav.main-nav{
    position:fixed; inset:78px 0 0 0; height:calc(100vh - 78px);
    background:var(--ink); flex-direction:column; justify-content:flex-start;
    padding:40px var(--pad); gap:26px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{font-size:15px;}
  .burger{display:flex;}
  .nav-cta{display:none;}
  .topbar .tb-links{display:none;}
}

/* ---------- hero ---------- */
.hero{
  position:relative; padding:120px var(--pad) 90px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(201,162,39,.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(201,162,39,.08), transparent 60%);
}
.hero-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5.4vw, 68px); line-height:1.06; color:var(--ivory);
  margin-bottom:.4em;
}
.hero h1 em{font-style:italic; color:var(--gold-light);}
.hero .lead{font-size:17.5px; max-width:520px;}
.hero-cta-row{display:flex; gap:16px; margin-top:28px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 28px; border-radius:8px; display:inline-flex; align-items:center; gap:10px;
  transition:all .35s var(--ease); border:1px solid transparent; cursor:pointer;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#171307;}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(201,162,39,.55);}
.btn-ghost{border-color:var(--line-strong); color:var(--ivory);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-light);}

.hero-contacts{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap;}
.hero-contacts a{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13.5px; color:var(--muted);}
.hero-contacts a:hover{color:var(--gold-light);}
.hero-contacts svg{width:16px;height:16px; stroke:var(--gold);}

/* browser-window frame — signature device, reused for every screenshot/video */
.browser-frame{
  border-radius:var(--radius); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.browser-chrome{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:var(--ink-3); border-bottom:1px solid var(--line);
}
.browser-dot{width:9px;height:9px;border-radius:50%;}
.browser-dot:nth-child(1){background:#5a4517;}
.browser-dot:nth-child(2){background:var(--gold-dim);}
.browser-dot:nth-child(3){background:var(--gold-light);}
.browser-url{
  flex:1; margin-left:8px; background:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:5px 12px; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.browser-body{aspect-ratio:16/10.2; overflow:hidden; background:#000;}
.browser-body img, .browser-body iframe, .browser-body video{width:100%; height:100%; object-fit:cover; border:0;}
.browser-body.contain img{object-fit:contain; background:var(--ink);}

.hero-visual{position:relative;}
.hero-visual .browser-frame{animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ---------- sections ---------- */
section{padding:100px 0; position:relative;}
.section-alt{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,44px); color:var(--ivory);}
.hairline{height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); margin:0;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in-view > *{opacity:1; transform:translateY(0);}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} .hero-grid{grid-template-columns:1fr; gap:44px;}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 30px 60px -30px rgba(201,162,39,.25);}
.card .num{font-family:var(--mono); color:var(--gold); font-size:12.5px; letter-spacing:.1em;}
.card h3{font-size:21px; color:var(--ivory); margin-top:10px;}
.card img{border-radius:10px; margin-bottom:18px;}

.feature-list{list-style:none; margin:0 0 1.4em; padding:0; display:flex; flex-direction:column; gap:13px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; color:var(--ivory); font-size:15px;}
.feature-list li svg{flex:0 0 auto; width:16px; height:16px; margin-top:3px; stroke:var(--gold);}

/* pricing */
.price-card{
  position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:18px;
  padding:44px 36px; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), border-color .45s;
}
.price-card:hover{transform:translateY(-8px); border-color:var(--line-strong);}
.price-card.featured{border-color:var(--gold-dim); background:linear-gradient(180deg, rgba(201,162,39,.08), var(--ink-2) 40%);}
.price-card .tag{position:absolute; top:-13px; right:32px; background:var(--gold); color:#171307; font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:5px 12px; border-radius:999px; text-transform:uppercase;}
.price-card h3{font-size:24px; color:var(--ivory);}
.price-card .price{font-family:var(--serif); font-size:36px; color:var(--gold-light); margin:6px 0 2px;}
.price-card .price small{font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:500;}
.price-card .desc{font-style:italic; color:var(--muted); margin-bottom:20px;}
.price-card .examples{margin-top:auto; padding-top:20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:6px;}
.price-card .examples a{color:var(--gold-light);}
.price-card .examples a:hover{text-decoration:underline;}

/* logo / marquee strip */
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; gap:64px; width:max-content; animation:scroll-left 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{height:38px; width:auto; filter:grayscale(1) brightness(1.6) opacity(.75); transition:filter .3s;}
.marquee-track img:hover{filter:none;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* stat row */
.stat-row{display:flex; gap:56px; flex-wrap:wrap;}
.stat b{display:block; font-family:var(--serif); font-size:40px; color:var(--gold-light);}
.stat span{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

/* video/media grid */
.media-tile .browser-body{aspect-ratio:16/9;}

/* portfolio realisations grid rendered via JS */
#realisations-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:980px){#realisations-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){#realisations-grid{grid-template-columns:1fr;}}
.port-tile{opacity:0; transform:translateY(20px) scale(.98); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.port-tile.in-view{opacity:1; transform:translateY(0) scale(1);}
.port-tile .browser-frame{transition:transform .5s var(--ease), box-shadow .5s;}
.port-tile:hover .browser-frame{transform:translateY(-8px); box-shadow:0 40px 70px -25px rgba(201,162,39,.35);}
.port-tile figcaption{margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:10px;}
.port-tile figcaption a{color:var(--gold-light);}

/* filter pills */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.filters button{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .3s;
}
.filters button.active, .filters button:hover{border-color:var(--gold); color:var(--gold-light);}

/* CTA banner */
.cta-banner{
  background:linear-gradient(120deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-strong); border-radius:22px;
  padding:60px var(--pad); text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,39,.16), transparent 55%);
}
.cta-banner h2{position:relative; font-size:clamp(26px,3.4vw,38px);}
.cta-banner .btn{position:relative;}

/* address / contact cards */
.contact-card{display:flex; gap:16px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line);}
.contact-card:last-child{border-bottom:0;}
.contact-card svg{flex:0 0 auto; width:20px;height:20px; stroke:var(--gold); margin-top:3px;}
.contact-card strong{color:var(--ivory); display:block; margin-bottom:2px; font-weight:600;}
.map-frame{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-strong); filter:grayscale(.25) invert(.92) contrast(.9);}
.map-frame iframe{width:100%; height:340px; border:0; display:block;}

/* legal page */
.legal-body{max-width:760px;}
.legal-body h2{font-size:20px; color:var(--gold-light); margin-top:2em;}
.legal-body p{font-size:14.5px; color:var(--muted);}

/* footer */
footer.site-footer{background:var(--ink-2); border-top:1px solid var(--line); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; margin-bottom:50px;}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr; gap:36px;}}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{max-width:320px; font-size:14px;}
.footer-col h4{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:14.5px; color:var(--ivory); transition:color .25s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--muted-2);
}
.socials{display:flex; gap:14px;}
.socials a{
  width:34px;height:34px;border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.socials a:hover{border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px);}
.socials svg{width:15px;height:15px; stroke:currentColor; fill:none;}

/* misc */
.mono{font-family:var(--mono);}
.center{text-align:center;}
.mt-lg{margin-top:60px;}
.text-gold{color:var(--gold-light);}
::selection{background:var(--gold); color:#171307;}

/* scroll progress bar */
#scroll-bar{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); z-index:200; width:0%;}