/* ====== ArchiPage — Blue + Yellow Artsy Theme ====== */
/* Fonts & base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root{
  --bg: #FCFCFD;
  --text: #0F172A;
  --muted: #334155;
  --brand: #1E3A8A;     /* deep blue */
  --brand-2:#3B82F6;    /* bright blue */
  --accent:#F59E0B;     /* warm yellow/orange */
  --glass: rgba(255,255,255,.65);
  --card: #FFFFFF;
  --tint: #F5F8FF;
  --ring: rgba(30,58,138,.15);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}

/* Layout helpers */
.container{width:min(1100px,92%); margin:0 auto}
.section{position:relative; padding:96px 0}
.section.small{padding:72px 0}
.tinted{background:var(--tint)}
.section-title{font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin:0 0 24px}
.lead{font-size:1.125rem; color:var(--muted)}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; backdrop-filter:saturate(140%) blur(10px);
  background:var(--glass); border-bottom:1px solid rgba(30,58,138,.08);
}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit}
.brand.mini .brand-text{font-weight:700}
.brand-text{font-weight:800; letter-spacing:.2px}
.arch-logo{width:28px; height:28px; border:3px solid var(--brand); border-bottom:none; border-radius:12px 12px 0 0; display:inline-block}
.nav-links a{
  text-decoration:none; color:inherit; margin-left:20px; position:relative; font-weight:600;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent)); transform:scaleX(0); transform-origin:left; transition:.25s;
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1)}

/* Hamburger for mobile */
.hamburger{
  display:none; flex-direction:column; justify-content:space-between;
  width:28px; height:22px; background:transparent; border:none; cursor:pointer;
  padding:0; margin-left:10px;
}
.hamburger span{
  display:block; height:4px; width:100%; background:var(--text); border-radius:2px;
}

/* HERO */
.hero{overflow:hidden}
.display{font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-copy .hero-highlights{display:flex; gap:18px; padding:0; margin:18px 0 0; list-style:none; color:var(--muted)}
.hero-illustration{position:relative; min-height:360px}
.card.browser{background:var(--card); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.browser-bar{display:flex; gap:6px; padding:10px}
.browser-bar span{width:10px; height:10px; border-radius:50%; background:#e2e8f0}
.browser-body{padding:20px}
.illus-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.illus-block{height:58px; border-radius:10px; background:linear-gradient(135deg,rgba(30,58,138,.12),rgba(245,158,11,.18))}
.illus-block.large{grid-column:span 2; height:120px}

/* Decorative rings */
.ring{position:absolute; border:2px solid var(--ring); border-radius:50%}
.ring-1{width:240px;height:240px; right:-30px; top:-30px}
.ring-2{width:160px;height:160px; right:80px; bottom:-30px}

/* Blobs */
.blob{position:absolute; filter:blur(6px); opacity:.9; pointer-events:none}
.b1{inset:auto auto -20% -15%; width:55vw; height:55vw; background:
  radial-gradient(40% 40% at 30% 30%, rgba(30,58,138,.25), transparent 60%),
  radial-gradient(45% 45% at 70% 60%, rgba(245,158,11,.32), transparent 65%);}
.b2{inset:-18% -10% auto auto; width:48vw; height:48vw; background:
  radial-gradient(35% 35% at 65% 45%, rgba(59,130,246,.25), transparent 60%),
  radial-gradient(45% 45% at 30% 70%, rgba(245,158,11,.26), transparent 65%);}
.b3{inset:-22% -20% auto auto; width:55vw; height:55vw; background:
  radial-gradient(35% 35% at 60% 40%, rgba(59,130,246,.28), transparent 60%),
  radial-gradient(45% 45% at 30% 70%, rgba(245,158,11,.22), transparent 65%);}
.b4{inset:-18% auto auto -18%; width:52vw; height:52vw; background:
  radial-gradient(35% 35% at 60% 40%, rgba(30,58,138,.26), transparent 60%),
  radial-gradient(45% 45% at 30% 70%, rgba(245,158,11,.24), transparent 65%);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; transition:transform .15s ease, box-shadow .2s ease; will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--accent)); color:white; box-shadow:0 10px 20px rgba(59,130,246,.25)}
.btn-ghost{border:2px solid rgba(30,58,138,.18); color:var(--text)}
.link-arrow{font-weight:700; text-decoration:none}
.link-arrow::after{content:"→"; margin-left:6px; transition:transform .2s}
.link-arrow:hover::after{transform:translateX(2px)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

/* Cards & grids */
.grid{display:grid; gap:22px}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.card.mini{padding:16px}
.hover-lift{transition:transform .25s ease, box-shadow .25s ease}
.hover-lift:hover{transform:translateY(-6px); box-shadow:0 16px 38px rgba(2,6,23,.12)}

.portfolio-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.folio-card{display:block; border-radius:18px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); text-decoration:none; color:inherit}
.folio-card img{width:100%; height:200px; object-fit:cover}
.folio-meta{padding:14px 16px}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Process list */
.process{counter-reset:step; padding:0; margin:0; display:grid; gap:12px}
.process li{list-style:none; background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px}
.process li span{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-2),var(--accent)); color:#fff; font-weight:800}

/* About */
.about-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center}
.about-photo{min-height:340px; border-radius:22px; background:
  radial-gradient(120% 120% at 20% 0%, rgba(59,130,246,.35), transparent 60%),
  radial-gradient(120% 120% at 80% 100%, rgba(245,158,11,.35), transparent 60%);}
.checklist{padding-left:0; list-style:none; display:grid; gap:8px; margin:12px 0 16px}
.checklist li::before{content:"✓ "; color:var(--brand-2); font-weight:800}

/* About hero panel (carousel + text) */
.about-hero-panel{
  margin-top:36px;
  background:rgba(255,255,255,.96);
  border-radius:26px;
  padding:26px 28px;
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:32px;
  align-items:center;
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
}

.about-hero-media{
  display:flex;
  justify-content:center;
}

.about-hero-text{
  font-size:1.02rem;
  color:var(--muted);
}

.about-hero-text p{
  margin:0;
}

/* About hero image carousel – improved crossfade */
.about-carousel{
  margin-top:32px;
  width:320px;
  max-width:100%;
  aspect-ratio:1 / 1;  /* perfect square */
  padding:3px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--brand-2),var(--accent));
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Remove extra top margin when inside panel */
.about-hero-panel .about-carousel{
  margin-top:0;
}

.about-carousel-inner{
  position:relative;
  width:100%;
  height:100%;
  border-radius:21px;
  overflow:hidden;
  background:var(--card);
}

.about-carousel-track{
  position:relative;
  width:100%;
  height:100%;
}

.about-carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  animation:aboutCarouselFade 12s infinite ease-in-out;
}

.about-carousel-slide:nth-child(1){animation-delay:0s;}
.about-carousel-slide:nth-child(2){animation-delay:4s;}
.about-carousel-slide:nth-child(3){animation-delay:8s;}

.about-carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;  /* square image into square box – no distortion */
  display:block;
}

/* Chips, bullets, filters */
.chips{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.chip{display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; background:var(--card);
  border:1px solid rgba(30,58,138,.15); box-shadow:var(--shadow); cursor:pointer; user-select:none}
.chip.active{background:linear-gradient(135deg,var(--brand-2),var(--accent)); color:#fff; border:none}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.bullets{padding-left:18px}
.bullets li{margin:6px 0}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:26px}
.contact-form{display:grid; gap:12px; background:var(--card); border-radius:16px; padding:22px; box-shadow:var(--shadow)}
.contact-form label{display:grid; gap:6px; font-weight:600}
.contact-form input, .contact-form textarea, .contact-form select{
  padding:12px 14px; border-radius:12px; border:1px solid rgba(30,58,138,.18); background:transparent; color:inherit
}
.form-note{color:var(--muted); margin:8px 0 0}
.contact-aside{display:grid; gap:14px}

/* CTA panel */
.cta-panel{background:linear-gradient(120deg, rgba(59,130,246,.12), rgba(245,158,11,.12)); border:1px solid rgba(30,58,138,.12);
  padding:26px; border-radius:20px; text-align:center}
.cta-panel p{color:var(--muted)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Footer */
.footer{padding:28px 0; border-top:1px solid rgba(30,58,138,.12); background:var(--glass); backdrop-filter:blur(8px)}
.footer-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.footer-links a{margin:0 10px; text-decoration:none; color:inherit}
.copy{text-align:right; color:var(--muted)}

/* Utilities */
.float-up{animation:floatUp 6s ease-in-out infinite alternate}
@keyframes floatUp{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}

/* About carousel crossfade keyframes */
@keyframes aboutCarouselFade{
  0%   { opacity:0; }
  8%   { opacity:1; }   /* fade in */
  28%  { opacity:1; }   /* fully visible */
  36%  { opacity:0; }   /* fade out */
  100% { opacity:0; }
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner, .about-wrap, .contact-wrap{grid-template-columns:1fr}
  .hero-illustration{order:-1; min-height:280px}
  .footer-grid{grid-template-columns:1fr; gap:10px; text-align:center}
  .copy{text-align:center}

  /* Show hamburger on mobile */
  .hamburger{display:flex}

  /* Hide nav-links by default and show as column on open */
  .nav-links{
    display:none; 
    flex-direction:column; 
    gap:12px; 
    position:absolute; 
    top:60px; 
    right:18px; 
    background:var(--card); 
    border-radius:14px; 
    padding:14px; 
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}

  .nav-links a{
    margin:0;
    padding:8px 14px;
    border-radius:12px;
  }

  /* Make the about hero panel stack nicely */
  .about-hero-panel{
    grid-template-columns:1fr;
    padding:20px 18px;
    margin-top:28px;
  }

  .about-hero-media{
    justify-content:center;
    order:-1; /* show carousel above text on mobile */
  }

  /* Make the about carousel scale nicely on small screens */
  .about-carousel{
    width:70vw;
    max-width:360px;
  }
}