/*
Theme Name: TejVijTech
Description: Custom theme for TejVijTech Software (OPC) Pvt. Ltd. — built from the approved site design.
Author: TejVijTech
Version: 1.0
Text Domain: tejvijtech
*/
/* =========================================================================
   TejVijTech — design system
   Brand: navy + orange (carried over from the live internship module)
   Type:  Inter throughout (site already ships Inter; keep one family)
   ========================================================================= */

:root{
  --navy-950:#0a1220;
  --navy-900:#0f1b2d;
  --navy-800:#1b2a41;
  --navy-700:#28405e;
  --orange:#ff6b35;
  --orange-d:#e5561f;
  --orange-50:#fff1ea;

  --ink:#0f172a;
  --ink-2:#1f2937;
  --muted:#5b6475;
  --muted-2:#7c8494;
  --line:#e6e9f0;
  --line-2:#eef1f6;
  --bg:#ffffff;
  --bg-alt:#f6f8fb;
  --bg-card:#ffffff;

  --ok:#0f8a4b; --ok-bg:#e6f6ed;
  --warn:#9a5b00; --warn-bg:#fff4e0;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 64px -24px rgba(15,23,42,.28);
  --container:1200px;

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
/* NOTE: scroll-behavior:smooth removed -- combined with the reveal-on-scroll IntersectionObserver
   (which toggles transform/opacity on .reveal elements as they enter view), it made Chrome silently
   abort in-progress anchor-link scrolls -- clicking Expertise/Solutions dropdown items, or loading a
   URL with a #hash, would leave the page stuck at the top instead of jumping to the target section.
   scroll-padding-top alone (kept) still offsets the jump target below the sticky header. */
/* off-canvas nav dropdown + mobile drawer are positioned outside the viewport when closed;
   clip (not hidden, which forces overflow-y to auto and breaks .site-header's position:sticky)
   on html -- the actual root scrolling element -- stops that from creating page-wide horizontal
   scroll (clip on body alone doesn't constrain the root scrollport). */
html{scroll-padding-top:84px;overflow-x:clip}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","cv02";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
p{margin:0}
button{font:inherit;cursor:pointer}
.tabular{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
@media (min-width:640px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 32px}}

section{position:relative}
.sec{padding:64px 0}
@media (min-width:768px){.sec{padding:80px 0}}
@media (min-width:1024px){.sec{padding:96px 0}}
.sec-tight{padding:48px 0}
.alt{background:var(--bg-alt)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange-d);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

.lede{color:var(--muted);font-size:17px;line-height:1.7;max-width:60ch}
.section-head{max-width:640px;margin-bottom:40px}
.section-head h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:10px;font-weight:700;font-size:15px;
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,107,53,.35)}
.btn-ghost-dark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink-2);background:var(--bg-alt)}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:8px}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(15,23,42,.04),0 8px 24px -18px rgba(15,23,42,.35)}
.header-in{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:10px 0;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-mark svg{width:18px;height:18px}
.brand b{color:var(--orange-d)}

.nav-desktop{display:none}
@media (min-width:1180px){.nav-desktop{display:flex;align-items:center;gap:2px}}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:8px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);
}
.nav-link:hover{background:var(--bg-alt);color:var(--ink)}
.nav-link svg{width:14px;height:14px;transition:transform .15s ease}
.nav-item.open .nav-link svg{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:280px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:50;
}
.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px}
.dd-link:hover{background:var(--bg-alt)}
.dd-ico{
  width:34px;height:34px;border-radius:8px;flex:none;background:var(--orange-50);
  display:flex;align-items:center;justify-content:center;color:var(--orange-d);
}
.dd-ico svg{width:17px;height:17px}
.dd-text b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.dd-text span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

.header-actions{display:flex;align-items:center;gap:10px}
.wa-btn{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#e9fbf1;color:#128c4a;flex:none;border:1px solid #d3f3e1;
}
.wa-btn:hover{background:#d3f3e1}
.wa-btn svg{width:19px;height:19px}
.menu-btn{
  display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;
  border:1px solid var(--line);background:#fff;
}
@media (min-width:1180px){.menu-btn{display:none}}
.menu-btn svg{width:19px;height:19px}
.header-actions .btn-primary{display:none}
@media (min-width:600px){.header-actions .btn-primary{display:inline-flex}}

/* mobile drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,18,32,.5);z-index:110;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:#fff;z-index:120;
  box-shadow:-24px 0 64px -24px rgba(0,0,0,.35);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.drawer-close{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.drawer-close svg{width:16px;height:16px}
.drawer nav{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.d-link{padding:13px 4px;font-weight:700;font-size:15.5px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;min-height:44px}
.d-link svg{width:15px;height:15px;color:var(--muted-2);transition:transform .15s ease}
.d-group.open .d-link svg{transform:rotate(180deg)}
.d-sub{max-height:0;overflow:hidden;transition:max-height .2s ease}
.d-group.open .d-sub{max-height:320px}
.d-sub a{display:block;padding:11px 4px 11px 14px;font-size:14.5px;color:var(--muted);font-weight:600;min-height:44px;display:flex;align-items:center}
.drawer-cta{margin-top:16px;display:flex;flex-direction:column;gap:10px}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(255,107,53,.18), transparent 60%),
    linear-gradient(160deg,var(--navy-900),var(--navy-950) 70%);
  color:#fff;overflow:hidden;padding:0;
}
.hero-grid{display:grid;gap:44px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}

/* Full-bleed hero: text pinned to a modest left margin, photo bleeds to the viewport's right edge */
.hero-grid-full{display:grid;gap:32px;padding:0 24px}
@media (min-width:640px){.hero-grid-full{padding:0 32px}}
@media (min-width:840px){
  .hero-grid-full{
    grid-template-columns:minmax(0,520px) 1fr;gap:36px;align-items:stretch;
    padding:0 0 0 56px;
  }
}
.hero-copy{max-width:540px;align-self:center;padding:40px 0 48px}
@media (min-width:768px){.hero-copy{padding:52px 0 64px}}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#cfd8e6;
}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;color:#fff;max-width:16ch}
.hero h1 em{color:var(--orange);font-style:normal}
.hero .lede{color:#b9c3d4;font-size:18px;margin-top:18px;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#b9c3d4;font-weight:600}
.trust-item svg{width:16px;height:16px;color:var(--orange);flex:none}

.hero-visual{position:relative}
.hero-photo{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.12);
  height:100%;
}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:840px){
  /* bleed the photo to the right edge of the viewport: no radius/border on that side */
  .hero-grid-full .hero-photo{border-radius:var(--radius-lg) 0 0 var(--radius-lg);border-right:0;min-height:420px}
  .hero-grid-full .hero-photo img{aspect-ratio:auto}
}
.hero-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);
  padding:22px;backdrop-filter:blur(6px);box-shadow:var(--shadow-lg);
}
.hero-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hero-card-top span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b96ab}
.dot-row{display:flex;gap:5px}
.dot-row span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.mini-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px}
.mini-stat b{display:block;font-size:22px;color:#fff;font-weight:800}
.mini-stat span{display:block;font-size:12px;color:#9aa5b8;margin-top:3px}
.hero-chart{height:108px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:14px;display:flex;align-items:flex-end;gap:6px}
.hero-chart i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--orange),var(--orange-d));opacity:.85}
.hero-card-foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.avatar-stack{display:flex}
.avatar-stack span{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--navy-900);
  background:linear-gradient(155deg,var(--orange),var(--navy-700));margin-left:-8px;
}
.avatar-stack span:first-child{margin-left:0}
.hero-card-foot p{font-size:12.5px;color:#9aa5b8}
.hero-card-foot b{color:#fff}
.float-badge{
  position:absolute;bottom:-16px;left:-16px;background:#fff;color:var(--ink);border-radius:12px;
  padding:12px 16px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;
}
.float-badge .ico{width:34px;height:34px;border-radius:9px;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;flex:none}
.float-badge .ico svg{width:17px;height:17px}
.float-badge b{font-size:13px;display:block}
.float-badge span{font-size:11.5px;color:var(--muted)}
@media (max-width:480px){.float-badge{display:none}}

/* ---------- Form grid (mobile-first: always 1 col until there's real room) ---------- */
.form-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.form-grid{grid-template-columns:1fr 1fr}}

/* ---------- Services ---------- */
.pillar-grid{display:grid;gap:20px}
@media (min-width:640px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pillar-grid{grid-template-columns:repeat(3,1fr)}}
.pillar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pillar:hover{border-color:var(--navy-700);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pillar-ico{width:46px;height:46px;border-radius:12px;background:var(--navy-900);color:var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pillar-ico svg{width:22px;height:22px}
.pillar h3{font-size:19px;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:16px}
.pillar ul{display:flex;flex-direction:column;gap:9px}
.pillar li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pillar li svg{width:15px;height:15px;color:var(--orange-d);flex:none}

/* ---------- Segmented tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--bg-alt);padding:6px;border-radius:12px;border:1px solid var(--line-2);margin-bottom:32px}
.tab-btn{padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--muted);border:1px solid transparent;min-height:40px}
.tab-btn.active{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
div.tab-panel{display:none}
div.tab-panel.active{display:grid}

.solutions-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.solutions-grid{grid-template-columns:repeat(3,1fr)}}
.solution-card{
  border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;background:#fff;
  display:flex;flex-direction:column;gap:12px;
}
.solution-card .ico{width:38px;height:38px;border-radius:10px;background:var(--orange-50);color:var(--orange-d);display:flex;align-items:center;justify-content:center}
.solution-card .ico svg{width:19px;height:19px}
.solution-card h4{font-size:15.5px}
.solution-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.solution-card .cta{font-size:13px;font-weight:700;color:var(--orange-d);display:inline-flex;align-items:center;gap:4px}
.solution-card .cta svg{width:13px;height:13px}

/* ---------- About strip ---------- */
.about-grid{display:grid;gap:44px}
@media (min-width:960px){.about-grid{grid-template-columns:.9fr 1.1fr;align-items:center}}
.about-visual{
  aspect-ratio:4/3;border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--navy-900),var(--navy-800));
  position:relative;overflow:hidden;border:1px solid var(--line);
}
.about-visual svg{position:absolute;inset:0;width:100%;height:100%}
.about-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.about-badge{border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.about-badge b{display:block;font-size:13.5px;color:var(--ink)}
.about-badge span{font-size:12.5px;color:var(--muted)}
.about-list{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.about-list li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-2)}
.about-list svg{width:18px;height:18px;color:var(--orange-d);flex:none;margin-top:1px}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-950));
  border-radius:24px;padding:48px 32px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 240px at 50% 0%, rgba(255,107,53,.22), transparent 70%);
}
.cta-band > *{position:relative}
.cta-band h2{font-size:clamp(24px,3.2vw,32px);color:#fff;margin-bottom:12px}
.cta-band p{color:#b9c3d4;max-width:52ch;margin:0 auto 26px;font-size:15.5px}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950);color:#cbd3e0;padding-top:64px}
.footer-grid{display:grid;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
@media (min-width:600px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.1fr}}
.footer-brand p{font-size:14px;color:#8b96ab;margin-top:14px;max-width:34ch;line-height:1.7}
.footer-brand .brand{color:#fff}
.footer-col h5{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8b96ab;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;color:#cbd3e0;font-weight:500}
.footer-col a:hover{color:#fff}
.contact-row{display:flex;align-items:center;gap:10px;font-size:14px}
.contact-row svg{width:16px;height:16px;color:var(--orange);flex:none}
.copy-btn{
  margin-left:auto;flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:6px;border:1px solid rgba(255,255,255,.14);color:#8b96ab;background:transparent;
}
.copy-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.copy-btn svg{width:13px;height:13px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:24px 0;font-size:13px;color:#7c8494}
.footer-social{display:flex;gap:10px}
.footer-social a{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.footer-social a:hover{background:rgba(255,255,255,.06)}
.footer-social svg{width:16px;height:16px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all .2s ease;z-index:200;display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.toast svg{width:15px;height:15px;color:#4ade80}

/* ---------- Utility ---------- */
.grain{position:absolute;inset:0;opacity:.5;pointer-events:none;mix-blend-mode:overlay}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
::selection{background:rgba(255,107,53,.25)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Internship-specific */
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.mod-badge{border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;min-width:96px;flex:1}
.mod-badge b{display:block;font-size:18px;color:var(--navy-900);font-weight:800}
.mod-badge span{font-size:12px;color:var(--muted)}
.phase-rail{display:grid;gap:16px}
@media (min-width:560px){.phase-rail{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.phase-rail{grid-template-columns:repeat(4,1fr)}}
.phase-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;background:#fff}
.phase-card span{font-size:12px;font-weight:700;color:var(--orange-d)}
.phase-card h4{font-size:15px;margin:8px 0 6px}
.phase-card p{font-size:13px;color:var(--muted);line-height:1.6}
.fee-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;background:#fff;box-shadow:var(--shadow-sm)}
.fee-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-2)}
.fee-row.total{border-bottom:none;padding-top:16px}
.fee-row.total b{font-size:26px;color:var(--navy-900)}
.fee-row span{color:var(--muted);font-size:14px}
.step-list{counter-reset:step;display:flex;flex-direction:column;gap:0}
.step-list li{counter-increment:step;position:relative;padding:0 0 26px 44px;border-left:2px solid var(--line-2);margin-left:15px}
.step-list li:last-child{border-color:transparent;padding-bottom:0}
.step-list li::before{
  content:counter(step);position:absolute;left:-15px;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--navy-900);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.step-list b{display:block;margin-bottom:3px;font-size:15px}
.step-list p{color:var(--muted);font-size:13.5px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:15px;background:none;border:0;min-height:44px}
.faq-q svg{width:16px;height:16px;flex:none;transition:transform .2s ease;color:var(--muted-2)}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--orange-d)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{padding:0 4px 18px;color:var(--muted);font-size:14.5px;line-height:1.7}
.internship-hero{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));color:#fff;padding:0;overflow:hidden}
.internship-hero h1{color:#fff}
.who-grid{display:grid;gap:20px}
@media (min-width:768px){.who-grid{grid-template-columns:1fr 1fr}}
.check-list{display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2)}
.check-list svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:2px}

/* ---------- Internship: project simulation card ---------- */
.sim-card{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-950));
  border-radius:var(--radius-lg);padding:clamp(26px,4vw,44px);color:#fff;
  position:relative;overflow:hidden;
}
.sim-card::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 240px at 15% 0%, rgba(255,107,53,.18), transparent 70%)}
.sim-card > *{position:relative}
.sim-card h3{font-size:clamp(19px,2.4vw,24px);line-height:1.3;margin:0 0 18px;max-width:46ch;color:#fff}
.sim-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.sim-pill{padding:9px 14px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dcecff;font-size:13px;font-weight:700}
.sim-flow{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#c7d5e7;font-size:14.5px;font-weight:600}

/* ---------- Internship: SAP tracks ---------- */
.track-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.track-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.track-grid{grid-template-columns:repeat(5,1fr)}}
.track-card{background:var(--navy-900);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px 14px;text-align:center}
.track-card strong{display:block;font-size:22px;color:var(--orange);margin-bottom:6px;letter-spacing:.02em}
.track-card span{color:#c7d5e7;font-size:12.5px}

/* ---------- Internship: ABAP track ---------- */
.abap-grid{display:grid;gap:24px}
@media (min-width:768px){.abap-grid{grid-template-columns:.9fr 1.1fr;align-items:center}}
.abap-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.abap-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-weight:700;font-size:13.5px;color:var(--ink)}

/* ---------- Internship: deliverables ---------- */
.deliver-list{border-top:1px solid var(--line-2)}
.deliver-item{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line-2)}
@media (min-width:700px){.deliver-item{grid-template-columns:260px 1fr;gap:32px;align-items:start}}
.deliver-item strong{font-size:15.5px;color:var(--ink)}
.deliver-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- Internship: enrollment flow (no numbering) ---------- */
.flow-list{display:flex;flex-direction:column;gap:22px}
.flow-list li{display:flex;gap:14px;align-items:flex-start}
.flow-ico{width:26px;height:26px;border-radius:50%;background:transparent;border:1.5px solid var(--orange);color:var(--orange-d);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.flow-ico svg{width:12px;height:12px;stroke-width:2.4}
.flow-list b{display:block;margin-bottom:3px;font-size:15px}
.flow-list p{color:var(--muted);font-size:13.5px;margin:4px 0 0}

.intern-hero-photo{min-height:320px}
@media (min-width:640px){.intern-hero-photo{min-height:380px}}

/* ---------- Brand logo (site seal): small + copy-protected ---------- */
.brand-mark--logo{
  width:34px;height:34px;border-radius:50%;overflow:hidden;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-mark--logo img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;user-drag:none;
  pointer-events:none;
}

/* ---------- Header: bigger logo + full legal name, WhatsApp/CTA removed ---------- */
/* header-in also carries the plain .wrap class (max-width:1200px, centered) -- that's why the logo
   sat ~250px in from the real page edge on wide screens instead of at the extreme left. max-width:none
   here lets the header bar itself span the full viewport, with .wrap's existing side padding kept as
   the (now genuinely "extreme-left") margin. */
.header-in{max-width:none}
.brand--full{gap:14px;flex-shrink:0;min-width:0;align-self:flex-start;position:relative;z-index:5}
.brand-mark--lg{width:56px;height:56px;flex-shrink:0}
@media (min-width:640px){.brand-mark--lg{width:78px;height:78px}}
/* Bigger still, and deliberately taller than the 68px header bar: align-self:flex-start above pins
   its top edge level with the header top, so the extra height overflows DOWNWARD, past the header's
   bottom edge, visually spanning into the hero section below without changing the header's own
   height (.header-in keeps its fixed height:68px regardless of this). */
@media (min-width:1024px){.brand-mark--lg{width:108px;height:108px;margin-top:4px}}
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1.18;min-width:0}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand-name--full{font-weight:800;white-space:normal;line-height:1.15;max-width:44vw;font-size:13px}
.brand-legal{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:1px;white-space:nowrap}
@media (min-width:480px){.brand-name--full{font-size:15px;max-width:none}}
@media (min-width:640px){.brand-name{font-size:19px}.brand-legal{font-size:11px}.brand-name--full{font-size:18px}}
@media (min-width:1024px){.brand-name--full{font-size:21px}}
@media (max-width:479px){.brand-legal{display:none}}
@media (max-width:359px){.brand-mark--lg{width:40px;height:40px}.brand-name{font-size:15px}.brand-name--full{font-size:12px}}
.header-actions{display:contents}
@media (min-width:1180px){.nav-desktop{gap:22px;margin-left:auto;margin-right:32px}}

/* ---------- About: full-height photo, CTA wide banner, Services/Solutions two-column ---------- */
@media (min-width:960px){.about-grid{align-items:stretch}}
/* Fixed square aspect ratio — keeps this photo from stretching into a tall,
   narrow strip at wide/short viewport ratios (a bounded aspect-ratio wins over
   grid's align-items:stretch once the track width is known). */
.about-photo{aspect-ratio:1/1;min-height:0;max-width:520px;margin:0 auto;width:100%}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-lg)}

#contact .wrap{max-width:1320px}
.cta-band--wide{padding:56px 40px}
@media (min-width:640px){.cta-band--wide{padding:64px 56px}}

.services-layout{display:grid;gap:28px;margin-top:32px}
.services-visual{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);position:relative;min-height:260px}
.services-visual img{width:100%;height:100%;object-fit:cover;display:block}
.pillar-grid--stacked{display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){
  .services-layout{grid-template-columns:1.35fr 1fr;align-items:stretch;gap:40px}
  .services-visual{min-height:100%}
  .pillar-grid--stacked{padding-left:24px}
}

.solutions-layout{display:grid;gap:28px;margin-top:8px}
.solutions-visual{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);position:relative;min-height:260px}
.solutions-visual img{width:100%;height:100%;object-fit:cover;display:block}
.solutions-content .solutions-grid{grid-template-columns:1fr}
@media (min-width:520px){.solutions-content .solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .solutions-layout{grid-template-columns:.85fr 1.15fr;align-items:stretch;gap:40px}
  .solutions-visual{min-height:100%}
  .solutions-content .solutions-grid{grid-template-columns:1fr}
}

/* ---------- Footer: real logo + Back-to-Top ---------- */
.footer-brand .brand--full{gap:10px;margin-bottom:14px;align-self:auto}
.footer-brand .brand-mark--lg{width:38px;height:38px;margin-top:0}
.footer-brand .brand-text{min-height:0}
.footer-brand .brand-legal{color:#9aa3b5}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-name b{color:var(--orange)}

/* ---------- Anchor scroll offset: keep sticky header from covering jump targets ---------- */
[id]{scroll-margin-top:84px}

/* ---------- CTA band: extend further to the edges (parent #contact .wrap is 1320px, so half-content = (1320-40)/2 = 640px) ---------- */
/* NOTE: overflow-x:clip, not hidden — hidden forces overflow-y to compute to "auto" (per CSS spec pairing
   rule), silently turning the section into its OWN hidden scroll container. That breaks anchor-jump
   navigation into anything nested inside it (e.g. #sap-erp, #ai-automation pillars): the browser scrolls
   the invisible inner scrollport instead of the page. clip avoids this — it clips without becoming a
   scroll container. */
#contact{overflow-x:clip}
@media (min-width:1340px){
  /* NOTE: this used to be margin-left:calc(640px - 50vw); width:calc(640px + 50vw) -- a fixed-px
     breakout that assumed a specific half-content-width. It undershot the real viewport edge by
     ~120px on common widths (the band stopped short, leaving a visible gap on the right). The
     left:50% + margin-left:-50vw technique below is viewport-relative and always reaches both
     edges exactly, regardless of the parent's width. */
  .cta-band--wide{
    max-width:none;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    border-radius:0;
  }
}

.footer-bottom{position:relative;padding-right:56px}
.back-to-top{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;border:0;cursor:pointer;transition:background .15s ease,transform .15s ease;
}
.back-to-top:hover{background:var(--orange-d)}
.back-to-top svg{width:16px;height:16px}
@media (max-width:600px){
  .footer-bottom{padding-right:0;justify-content:center;text-align:center}
  .back-to-top{position:static;transform:none;margin-top:12px}
}

/* ---------- Full-width banner (removes the 1200px wrap cap, keeps consistent 20px margins) ---------- */
.wrap-full{max-width:none;padding:0 20px}

/* ---------- Media-left sections: bleed the photo to the true viewport left edge, like the hero bleeds right ---------- */
#about, #services, #solutions{overflow-x:clip}
@media (min-width:1200px){
  #about .about-grid,
  .services-layout,
  .solutions-layout{
    /* #about .about-grid also carries the plain .wrap class (max-width:1200px), which was silently
       capping this calc() breakout at 1200px wide -- the image stayed narrow and a large gap was
       left on the right, no matter what the calc said. max-width:none removes that cap. */
    max-width:none;
    margin-left:calc(580px - 50vw);
    width:calc(580px + 50vw);
  }
}

/* ---------- About: bigger image, content shifted right, less crowding ---------- */
@media (min-width:960px){
  #about .about-grid{grid-template-columns:1.2fr 1fr;gap:64px;align-items:stretch}
}