/* =========================================================
   RahulTech Solutions — Design Tokens
   Palette: vibrant orange + dark navy + white/light-gray
   Type: Sora (display) + Inter (body)
   ========================================================= */

:root{
  --orange: #FF5E1A;
  --orange-2: #FF8A3D;
  --orange-deep: #E64A0D;
  --navy: #0A1930;
  --navy-2: #10233F;
  --navy-3: #16304F;
  --ink: #0D1B2A;
  --muted: #5B6B7E;
  --muted-soft: #8B98A8;
  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --bg-alt-2: #EEF1F6;
  --line: #E4E9F0;
  --line-dark: rgba(255,255,255,0.12);
  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 4px 16px rgba(10,25,48,0.06);
  --shadow-md: 0 14px 40px rgba(10,25,48,0.12);
  --shadow-orange: 0 12px 28px rgba(255,94,26,0.28);

  --container: 1180px;
  --nav-h: 76px;

  --ease: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

h1,h2,h3,h4{
  font-family:'Sora', 'Inter', sans-serif;
  color:var(--navy);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.01em;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,svg{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

section{ position:relative; }

.eyebrow-line{
  display:flex; align-items:center; gap:10px;
  color:var(--orange-deep);
  font-weight:700; font-size:0.95rem;
  margin-bottom:14px;
}
.eyebrow-line::before{
  content:""; width:26px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}

.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:14px; }
.section-head p{ color:var(--muted); font-size:1.05rem; }
.section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  border-radius:10px;
  font-weight:600; font-size:0.98rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;
  box-shadow:var(--shadow-orange);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px rgba(255,94,26,0.36); }

.btn-outline{
  border:1.5px solid var(--line);
  color:var(--navy);
  background:#fff;
}
.btn-outline:hover{ border-color:var(--orange); color:var(--orange-deep); transform:translateY(-3px); }

.btn-outline-light{
  border:1.5px solid rgba(255,255,255,0.28);
  color:#fff;
}
.btn-outline-light:hover{ border-color:var(--orange-2); background:rgba(255,255,255,0.06); transform:translateY(-3px); }

.btn-ghost{
  color:var(--navy); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost svg{ transition:transform .25s var(--ease); }
.btn-ghost:hover svg{ transform:translateX(4px); }

.btn-block{ width:100%; }
.btn-sm{ padding:11px 20px; font-size:0.9rem; }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.nav-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:1.18rem;
  color:var(--navy);
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.02rem;
  box-shadow:var(--shadow-orange);
}
.logo-img{
  height:42px;
  width:auto;
  object-fit:contain;
}
.brand span{ color:var(--orange-deep); }

.nav-links{
  display:flex; align-items:center; gap:38px;
}
.nav-links a{
  font-weight:600; font-size:0.96rem; color:var(--navy);
  position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); transition:width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--orange-deep); }

.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-cta{ padding:12px 24px; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  border-radius:8px;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; display:block; width:22px; height:2px; background:var(--navy);
  position:relative; transition:all .3s var(--ease);
}
.nav-toggle::before{ position:absolute; transform:translateY(-7px); }
.nav-toggle::after{ position:absolute; transform:translateY(7px); }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open::before{ transform:rotate(45deg); }
.nav-toggle.open::after{ transform:rotate(-45deg); }

.mobile-panel{
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  background:#fff; z-index:999;
  display:none; flex-direction:column;
  padding:32px 28px; gap:6px;
  transform:translateY(-8px); opacity:0;
  transition:all .3s var(--ease);
  overflow-y:auto;
}
.mobile-panel.show{ display:flex; transform:translateY(0); opacity:1; }
.mobile-panel a{
  font-family:'Sora',sans-serif; font-weight:600; font-size:1.25rem;
  padding:16px 4px; border-bottom:1px solid var(--line); color:var(--navy);
}
.mobile-panel .btn{ margin-top:20px; }

/* ---------- Hero ---------- */
.hero{
  padding:calc(var(--nav-h) + 64px) 0 90px;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(255,94,26,0.10), transparent 60%),
    var(--bg);
  position:relative; overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  margin-bottom:22px;
}
.hero-copy h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--orange-deep),var(--orange-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{
  color:var(--muted); font-size:1.14rem; max-width:520px; margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stats .stat b{
  font-family:'Sora',sans-serif; font-size:1.5rem; color:var(--navy); display:block;
}
.hero-stats .stat span{ color:var(--muted-soft); font-size:0.88rem; }

/* Code-editor hero illustration */
.code-card{
  background:var(--navy);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(10,25,48,0.35);
  overflow:hidden;
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition:transform .5s var(--ease);
}
.code-card:hover{ transform:perspective(1200px) rotateY(-2deg) rotateX(0.5deg); }
.code-topbar{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; background:var(--navy-2); border-bottom:1px solid var(--line-dark);
}
.code-dot{ width:11px; height:11px; border-radius:50%; }
.code-dot:nth-child(1){ background:#FF5F57; }
.code-dot:nth-child(2){ background:#FEBC2E; }
.code-dot:nth-child(3){ background:#28C840; }
.code-topbar span{ margin-left:12px; color:var(--muted-soft); font-size:0.8rem; font-family:monospace; }
.code-body{ padding:26px 24px; font-family:'JetBrains Mono','Courier New',monospace; font-size:0.86rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.code-body .ln{ color:#5b7396; display:inline-block; width:22px; }
.code-body .kw{ color:#ff8a3d; }
.code-body .fn{ color:#7dd3fc; }
.code-body .str{ color:#a3e635; }
.code-body .cm{ color:#5b7396; }
.code-body p{ color:#dce7f5; white-space:pre; margin:0; }
.code-badge{
  position:absolute; bottom:-22px; right:26px;
  background:#fff; border-radius:var(--radius-md);
  padding:14px 20px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:12px;
}
.code-badge b{ display:block; font-family:'Sora',sans-serif; font-size:1.1rem; }
.code-badge span{ color:var(--muted); font-size:0.82rem; }
.code-visual{ position:relative; padding-bottom:10px; }

/* ---------- Icon ---------- */
.icon-box{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(255,94,26,0.14),rgba(255,94,26,0.05));
  color:var(--orange-deep);
  flex-shrink:0;
}
.icon-box svg{ width:26px; height:26px; }
.icon-box.dark{
  background:linear-gradient(135deg,var(--navy-2),var(--navy));
  color:var(--orange-2);
}

/* ---------- Cards Grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:32px 28px;
  border-left:3px solid transparent;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover{
  border-left-color:var(--orange);
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
.service-card h3{ font-size:1.18rem; margin:20px 0 10px; }
.service-card p{ color:var(--muted); font-size:0.96rem; }
.service-card .icon-box{ margin-bottom:6px; }

/* ---------- Section variants ---------- */
.section{ padding:96px 0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#dce7f5;
}
.section-dark h2, .section-dark h3, .section-dark h4{ color:#fff; }
.section-dark .section-head p{ color:var(--muted-soft); }

/* Tech stack strip */
.tech-strip{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.tech-pill{
  display:flex; align-items:center; gap:10px;
  padding:12px 22px;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  font-weight:600; font-size:0.92rem; color:var(--navy);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.tech-pill:hover{ transform:translateY(-3px); border-color:var(--orange); }
.tech-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); }

/* Why choose us */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.why-item{
  padding:26px 22px; border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04); border:1px solid var(--line-dark);
}
.why-item h4{ font-size:1.02rem; margin:14px 0 8px; color:#fff; }
.why-item p{ color:var(--muted-soft); font-size:0.88rem; }
.why-item .icon-box{ background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff; }

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--orange-deep),var(--orange) 55%,var(--orange-2));
  border-radius:var(--radius-lg);
  padding:56px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  color:#fff;
  box-shadow:var(--shadow-orange);
}
.cta-band h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:8px; }
.cta-band p{ color:rgba(255,255,255,0.9); }
.cta-band .btn-outline-light{ background:#fff; color:var(--orange-deep); border-color:#fff; }
.cta-band .btn-outline-light:hover{ background:rgba(255,255,255,0.9); }

/* About preview split */
.about-preview {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* =========================
   ABOUT PHOTO CARD
========================= */

.about-photo-frame {
    border-radius: var(--radius-lg);
    background: linear-gradient(
        160deg,
        var(--navy),
        var(--navy-2)
    );

    aspect-ratio: 4 / 4.6;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 26px;
    padding: 30px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);
}


/* =========================
   PHOTO RING
========================= */

.photo-ring {
    position: relative;

    width: 62%;
    max-width: 280px;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    padding: 6px;

    background: linear-gradient(
        135deg,
        var(--orange),
        var(--orange-2),
        var(--navy-3),
        var(--orange)
    );

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 15px 35px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(255, 94, 26, 0.20);

    flex-shrink: 0;

    animation: photo-ring-glow 5s ease-in-out infinite;
}


/* =========================
   OUTER GLOW
========================= */

.photo-ring::after {
    content: "";

    position: absolute;
    inset: -14px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255, 94, 26, 0.25),
        transparent 68%
    );

    z-index: -1;

    animation: ring-pulse 3s ease-in-out infinite;
}


/* =========================
   PROFILE PHOTO
========================= */

.about-photo-frame .profile-photo {
    position: relative;
    inset: auto;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    /* Face ko thoda upar rakhega */
    object-position: center 28%;

    display: block;

    background: #ffffff;

    border: 4px solid var(--navy-2);

    transition:
        transform 0.45s var(--ease),
        object-position 0.45s ease;
}


/* =========================
   HOVER
========================= */

.photo-ring:hover .profile-photo {
    transform: scale(1.04);
}


/* =========================
   RING ANIMATION
========================= */

@keyframes photo-ring-glow {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.08),
            0 15px 35px rgba(0, 0, 0, 0.35),
            0 0 25px rgba(255, 94, 26, 0.18);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.10),
            0 18px 40px rgba(0, 0, 0, 0.40),
            0 0 40px rgba(255, 94, 26, 0.30);
    }
}


/* =========================
   GLOW PULSE
========================= */

@keyframes ring-pulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.06);
    }
}


/* =========================
   CARD GLOW
========================= */

.about-photo-frame .glow {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(255, 138, 61, 0.22),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================
   PROFILE INFORMATION
========================= */

.about-photo-frame .tag {
    position: relative;

    margin: 0;

    padding: 16px 24px;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: var(--radius-md);

    color: #fff;

    width: auto;
    max-width: 90%;

    text-align: center;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15);
}


/* Name */

.about-photo-frame .tag b {
    display: block;

    font-family: 'Sora', sans-serif;

    font-size: 1.1rem;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 6px;
}


/* Designation */

.about-photo-frame .tag span {
    color: #d9e2ef;

    font-size: 0.88rem;

    line-height: 1.5;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .about-preview {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-photo-frame {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .photo-ring {
        width: 260px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .about-photo-frame {
        aspect-ratio: auto;

        min-height: 520px;

        padding: 25px;

        gap: 22px;
    }

    .photo-ring {
        width: 230px;
        max-width: 75vw;
    }

    .about-photo-frame .tag {
        padding: 14px 18px;
        max-width: 95%;
    }

    .about-photo-frame .tag b {
        font-size: 1rem;
    }

    .about-photo-frame .tag span {
        font-size: 0.8rem;
    }
}

/* ---------- Page Header (inner pages) ---------- */
.page-header{
  padding:calc(var(--nav-h) + 60px) 0 70px;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.page-header::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle,rgba(255,94,26,0.28),transparent 65%);
}
.page-header .crumb{ color:var(--orange-2); font-weight:700; margin-bottom:14px; display:block; }
.page-header h1{ color:#fff; font-size:clamp(2rem,4vw,3rem); max-width:680px; }
.page-header p{ color:var(--muted-soft); max-width:560px; margin-top:16px; font-size:1.05rem; }

/* ---------- Services page detail rows ---------- */
.service-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:64px 0; border-bottom:1px solid var(--line);
}
.service-detail:last-of-type{ border-bottom:none; }
.service-detail.reverse{ direction:rtl; }
.service-detail.reverse > *{ direction:ltr; }
.service-detail h3{ font-size:clamp(1.35rem,3vw,1.7rem); margin:16px 0 14px; }
.service-detail p{ color:var(--muted); margin-bottom:20px; }
.feature-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.feature-list li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:0.97rem; }
.feature-list svg{ flex-shrink:0; margin-top:3px; color:var(--orange-deep); }
.service-visual{
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--bg-alt),var(--bg-alt-2));
  border:1px solid var(--line);
  aspect-ratio:5/4;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.service-visual svg{ width:56%; height:56%; }
.service-num{
  position:absolute; top:18px; left:22px;
  font-family:'Sora',sans-serif; font-weight:800; font-size:0.85rem;
  color:var(--orange-deep); background:#fff; padding:6px 12px; border-radius:100px;
  border:1px solid var(--line);
}

/* ---------- Approach steps ---------- */
.approach-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.approach-step{ padding:0 20px; position:relative; }
.approach-step .num{
  font-family:'Sora',sans-serif; font-weight:800; font-size:2.6rem;
  color:transparent; -webkit-text-stroke:1.4px var(--orange);
  margin-bottom:14px;
}
.approach-step h4{ font-size:1.12rem; margin-bottom:10px; }
.approach-step p{ color:var(--muted); font-size:0.92rem; }
.approach-row .approach-step:not(:last-child)::after{
  content:""; position:absolute; top:22px; right:-10px; width:20px; height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);
}

/* ---------- Portfolio ---------- */
.portfolio-card{
  border-radius:var(--radius-md); overflow:hidden; background:#fff;
  border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.portfolio-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.portfolio-thumb{
  aspect-ratio:16/10.5; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--navy),var(--navy-2));
  display:flex; align-items:center; justify-content:center;
}
.portfolio-thumb svg{ width:44%; opacity:0.9; }
.portfolio-thumb .ph-tag{
  position:absolute; top:14px; left:14px;
  background:rgba(255,94,26,0.9); color:#fff; font-size:0.72rem; font-weight:700;
  padding:5px 12px; border-radius:100px;
}
.portfolio-body{ padding:22px 22px 24px; }
.portfolio-body .stack{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.portfolio-body .stack span{
  font-size:0.74rem; font-weight:700; color:var(--orange-deep);
  background:rgba(255,94,26,0.08); padding:4px 10px; border-radius:100px;
}
.portfolio-body h3{ font-size:1.1rem; }
.portfolio-body p{ color:var(--muted); font-size:0.9rem; margin-bottom:14px; }
.portfolio-link{ font-weight:700; color:var(--navy); font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; }
.portfolio-link svg{ transition:transform .25s var(--ease); }
.portfolio-link:hover svg{ transform:translate(3px,-3px); }
.placeholder-note{
  margin-top:36px; padding:18px 22px; border:1px dashed var(--line);
  border-radius:var(--radius-md); color:var(--muted); font-size:0.9rem; text-align:center;
}

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:start; }
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px; box-shadow:var(--shadow-sm);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; font-size:0.92rem; color:var(--navy); }
.field input, .field select, .field textarea{
  padding:13px 16px; border:1.5px solid var(--line); border-radius:10px;
  color:var(--ink); background:var(--bg-alt); transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }
.field .err{ font-size:0.8rem; color:var(--orange-deep); display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#E23744; }
.field.invalid .err{ display:block; }
.form-note{ font-size:0.82rem; color:var(--muted-soft); margin-top:6px; }
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success.show{ display:block; }
.form-success svg{ margin:0 auto 18px; }

.contact-side .info-card{
  background:var(--navy); color:#fff; border-radius:var(--radius-lg);
  padding:30px; margin-bottom:20px;
}
.info-card h4{ color:#fff; font-size:1.02rem; margin-bottom:4px; }
.info-card p{ color:var(--muted-soft); font-size:0.9rem; margin-bottom:18px; }
.contact-method{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-top:1px solid var(--line-dark);
}
.contact-method:first-of-type{ border-top:none; }
.contact-method .icon-box{ width:44px; height:44px; border-radius:11px; }
.contact-method .icon-box svg{ width:20px; height:20px; }
.contact-method b{ display:block; font-size:0.95rem; }
.contact-method span{ color:var(--muted-soft); font-size:0.82rem; }

.quick-actions{ display:flex; flex-direction:column; gap:12px; }
.quick-actions .btn{ justify-content:flex-start; padding:16px 20px; }

/* FAQ */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:22px 4px; text-align:left; font-family:'Sora',sans-serif; font-weight:600; font-size:1.02rem;
  color:var(--navy);
}
.faq-q svg{ flex-shrink:0; transition:transform .3s var(--ease); color:var(--orange-deep); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ color:var(--muted); padding:0 4px 22px; max-width:680px; }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:var(--muted-soft); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-dark); }
.footer-brand .brand{ color:#fff; margin-bottom:14px; }
.footer-brand p{ font-size:0.92rem; max-width:280px; margin-bottom:20px; }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; transition:background .25s var(--ease), transform .25s var(--ease);
}
.social-row a:hover{ background:var(--orange); transform:translateY(-3px); }
.social-row svg{ width:17px; height:17px; }
.footer-col h5{ color:#fff; font-family:'Sora',sans-serif; font-size:0.98rem; margin-bottom:18px; }
.footer-col li{ margin-bottom:12px; font-size:0.92rem; }
.footer-col a:hover{ color:var(--orange-2); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:26px 0; font-size:0.84rem;
}

/* ---------- Floating WhatsApp ---------- */
.float-whatsapp{
  position:fixed; bottom:26px; right:26px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(37,211,102,0.4);
  transition:transform .25s var(--ease);
}
.float-whatsapp:hover{ transform:scale(1.08); }
.float-whatsapp svg{ width:28px; height:28px; }

/* Portfolio CTA — animated rotating gradient border + shine sweep */
.portfolio-cta{
  display:inline-block;
  margin-top:30px;
  position:relative;
  padding:2.5px;
  border-radius:14px;
  background:conic-gradient(from var(--cta-angle,0deg), var(--orange), var(--navy), var(--orange-2), var(--navy-2), var(--orange));
  animation:cta-rotate 5s linear infinite;
}
@property --cta-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes cta-rotate{
  to{ --cta-angle:360deg; }
}
.portfolio-cta-inner{
  position:relative;
  display:flex; align-items:center; gap:12px;
  background:#fff;
  color:var(--navy);
  font-family:'Sora',sans-serif; font-weight:700; font-size:0.98rem;
  padding:15px 26px;
  border-radius:12px;
  overflow:hidden;
  transition:color .3s var(--ease);
}
.portfolio-cta-inner svg:first-child{ color:var(--orange-deep); flex-shrink:0; }
.portfolio-cta-inner .arrow{ transition:transform .3s var(--ease); flex-shrink:0; }
.portfolio-cta-inner::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,94,26,0.16) 50%, transparent 80%);
  transform:translateX(-100%);
  transition:transform .6s var(--ease);
}
.portfolio-cta:hover .portfolio-cta-inner::before{ transform:translateX(100%); }
.portfolio-cta:hover .portfolio-cta-inner .arrow{ transform:translate(4px,-4px); }
.portfolio-cta:hover{ animation-duration:1.4s; }

@media (prefers-reduced-motion: reduce){
  .portfolio-cta{ animation:none; }
}
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid-3, .why-grid, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-grid, .about-preview, .service-detail, .contact-grid{ grid-template-columns:1fr; }
  .service-detail{ direction:ltr !important; }
  .approach-row{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .approach-row .approach-step::after{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:760px){
  .nav-links, .nav-right .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .grid-3, .grid-2, .why-grid, .grid-4{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; padding:40px 28px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .code-badge{ position:static; margin-top:18px; }
  .code-card{ transform:none; }
  .code-body{ font-size:0.68rem; padding:18px 14px; }
  .section{ padding:64px 0; }
  .hero{ padding-bottom:60px; }
  .brand{ font-size:1rem; gap:8px; }
  .logo-img{ height:34px; }
}

@media (max-width:400px){
  .brand{ font-size:0.9rem; }
  .code-body{ font-size:0.62rem; }
}