/*
Theme Name: Trishant Technologies
Theme URI: https://trishanttech.com
Author: Trishant Technologies
Author URI: https://trishanttech.com
Description: A one-page software consulting & engineering site for Trishant Technologies. Custom isometric brand design — Solutions. Innovation. Impact.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trishant-technologies
*/

:root{
  --ink:#0A1426; --navy:#112340; --navy-2:#0d1b33;
  --blue-deep:#1A4FB0; --blue:#2D7FFF; --blue-bright:#4E96FF;
  --paper:#F4F5F3; --paper-2:#ECEEEA; --white:#ffffff;
  --slate:#54607026; --text:#1d2738; --body:#55617450; --muted:#8A94A3;
  --bd:rgba(10,20,38,.10); --bd-strong:rgba(10,20,38,.16);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:#27313f;
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; color:var(--ink); margin:0; line-height:1.05; letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-deep);
  display:inline-flex; align-items:center; gap:10px;
}
.tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--blue);display:inline-block;transform:translateY(-1px)}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,245,243,.82); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--bd);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav img.logo{height:34px; width:auto; display:block}
.nav .links{display:flex; align-items:center; gap:34px}
.nav .links a{font-size:14.5px; font-weight:500; color:#33405288; letter-spacing:.01em; transition:color .2s}
.nav .links a:hover{color:var(--ink)}
.btn{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0;
  padding:12px 20px; border-radius:2px; transition:transform .18s var(--ease), box-shadow .2s, background .2s;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--bd-strong); clip-path:none; border-radius:2px}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-bright); transform:translateY(-2px)}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.nav-toggle{display:none}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; padding:88px 0 96px}
.hero-grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,72px); font-weight:700; letter-spacing:-.025em}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln > span{display:block; transform:translateY(110%); animation:rise .9s var(--ease) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.05s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.16s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.27s}
.hero h1 em{font-style:normal; color:var(--blue-deep); position:relative}
@keyframes rise{to{transform:translateY(0)}}
.hero .lead{margin:26px 0 0; max-width:540px; color:#46525f; font-size:18.5px; opacity:0; animation:fade .8s var(--ease) .5s forwards}
.hero .cta-row{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:fade .8s var(--ease) .62s forwards}
.hero .trust{margin-top:30px; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:11px; opacity:0; animation:fade .8s var(--ease) .74s forwards}
@keyframes fade{to{opacity:1}}

/* hero iso art card */
.hero-art{position:relative; opacity:0; animation:fade 1s var(--ease) .35s forwards}
.iso-card{
  position:relative; background:linear-gradient(155deg,#fff, #eef1f6);
  border:1px solid var(--bd); border-radius:3px;
  padding:40px 38px 34px; box-shadow:0 30px 70px -34px rgba(10,20,38,.32);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.iso-card .corner{position:absolute; right:0; bottom:0; width:34px; height:34px; background:var(--blue); clip-path:polygon(100% 0,100% 100%,0 100%)}
.iso-card img.mark{width:96px; height:auto; display:block; filter:drop-shadow(0 14px 22px rgba(26,79,176,.22))}
.iso-card .stamp{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.16em; color:var(--muted); margin-top:26px; text-transform:uppercase}
.iso-card .big{font-family:'Space Grotesk'; font-weight:600; font-size:23px; color:var(--ink); margin-top:7px; letter-spacing:-.01em; line-height:1.2}
.iso-card .rule{height:1px; background:var(--bd); margin:22px 0}
.iso-card .three{display:flex; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; color:var(--blue-deep); flex-wrap:wrap}
.iso-card .three span{background:rgba(45,127,255,.09); padding:5px 9px; border-radius:2px}

/* ---------- STATS BAND ---------- */
.band-dark{background:var(--ink); color:#dfe6f1; position:relative; overflow:hidden}
.band-dark::before{content:""; position:absolute; inset:0; background:
  radial-gradient(900px 320px at 85% -10%, rgba(45,127,255,.22), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  pointer-events:none}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:54px 0; position:relative}
.stat .num{font-family:'Space Grotesk'; font-weight:700; font-size:46px; color:#fff; letter-spacing:-.02em; line-height:1}
.stat .num b{color:var(--blue-bright); font-weight:700}
.stat .lab{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.1em; color:#9fb0c9; margin-top:12px; text-transform:uppercase}

/* ---------- SECTION SHELL ---------- */
.section{padding:104px 0}
.section.alt{background:var(--white)}
.sec-head{max-width:760px; margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px); font-weight:700; margin-top:16px; letter-spacing:-.02em}
.sec-head p{color:#5a6675; margin:18px 0 0; font-size:18px}

/* ---------- SERVICES ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--paper); border:1px solid var(--bd); padding:30px 28px 28px;
  position:relative; transition:transform .28s var(--ease), box-shadow .28s, border-color .28s;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.section.alt .card{background:var(--white)}
.card:hover{transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(10,20,38,.30); border-color:var(--bd-strong)}
.card .ix{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--blue); letter-spacing:.05em}
.card h3{font-size:21px; font-weight:600; margin:16px 0 10px; letter-spacing:-.01em}
.card p{font-size:15.5px; color:#5a6675; margin:0 0 18px; line-height:1.55}
.card .tags{display:flex; gap:7px; flex-wrap:wrap}
.card .tags span{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; color:#46525f; background:rgba(10,20,38,.05); padding:5px 9px; border-radius:2px}
.card .cut{position:absolute; right:0; bottom:0; width:22px; height:22px; background:var(--bd); clip-path:polygon(100% 0,100% 100%,0 100%); transition:background .28s}
.card:hover .cut{background:var(--blue)}

/* ---------- APPROACH ---------- */
.approach{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--bd); background:var(--white)}
.step{padding:42px 36px; border-right:1px solid var(--bd); position:relative}
.step:last-child{border-right:0}
.step .sn{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted); letter-spacing:.1em}
.step h3{font-size:27px; font-weight:700; margin:14px 0 14px; color:var(--ink); display:flex; align-items:center; gap:12px}
.step h3 .tri{transform:translateY(0)}
.step p{font-size:15.5px; color:#5a6675; margin:0; line-height:1.6}
.step .bar{position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue-deep),var(--blue-bright)); transition:width .6s var(--ease)}
.step.in .bar{width:100%}

/* ---------- WHY ---------- */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
.why-list{display:grid; gap:2px}
.why-item{padding:26px 0; border-top:1px solid var(--bd); display:grid; grid-template-columns:auto 1fr; gap:20px}
.why-item:last-child{border-bottom:1px solid var(--bd)}
.why-item .k{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--blue); padding-top:3px}
.why-item h3{font-size:20px; font-weight:600; margin:0 0 7px; letter-spacing:-.01em}
.why-item p{margin:0; font-size:15.5px; color:#5a6675; line-height:1.55}
.why-aside{position:sticky; top:100px; background:var(--ink); color:#dbe3ef; padding:42px 38px; border-radius:3px; position:relative; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.why-aside::after{content:""; position:absolute; right:0; bottom:0; width:30px; height:30px; background:var(--blue); clip-path:polygon(100% 0,100% 100%,0 100%)}
.why-aside .q{font-family:'Space Grotesk'; font-weight:500; font-size:23px; line-height:1.4; color:#fff; letter-spacing:-.01em}
.why-aside .who{margin-top:22px; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.08em; color:#9fb0c9}
.why-aside .glow{position:absolute; inset:0; background:radial-gradient(420px 200px at 110% -10%,rgba(45,127,255,.3),transparent 60%); pointer-events:none}

/* ---------- MARQUEE ---------- */
.stack-band{background:var(--paper-2); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); padding:30px 0; overflow:hidden}
.stack-lab{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; text-align:center; margin-bottom:20px}
.marquee{display:flex; gap:0; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex; gap:46px; padding-right:46px; animation:scroll 32s linear infinite}
.marquee .track span{font-family:'Space Grotesk'; font-weight:500; font-size:19px; color:#3b4858; letter-spacing:-.01em; display:flex; align-items:center; gap:46px}
.marquee .track span::after{content:""; width:5px;height:5px; background:var(--blue); border-radius:50%}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- CTA ---------- */
.cta{background:var(--ink); color:#fff; text-align:center; padding:96px 0; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 50% -30%,rgba(45,127,255,.26),transparent 65%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(32px,4.4vw,56px); font-weight:700; color:#fff; letter-spacing:-.025em}
.cta p{color:#aebbcf; max-width:560px; margin:20px auto 34px; font-size:18px}
.cta .em{display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-family:'JetBrains Mono',monospace; font-size:14px; color:#9fb0c9}
.cta .em a{color:var(--blue-bright)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.contact-info h2{font-size:clamp(30px,3.6vw,44px); font-weight:700; letter-spacing:-.02em}
.contact-info p{color:#5a6675; margin:18px 0 30px; font-size:18px}
.info-row{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--bd); align-items:flex-start}
.info-row:last-child{border-bottom:1px solid var(--bd)}
.info-row .ic{width:34px;height:34px;flex:0 0 34px; display:grid; place-items:center; background:rgba(45,127,255,.1); border-radius:2px}
.info-row .ic svg{width:17px;height:17px; stroke:var(--blue-deep); fill:none; stroke-width:1.7}
.info-row .l{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.info-row .v{font-weight:600; color:var(--ink); font-size:16px}
form.lead-form{background:var(--white); border:1px solid var(--bd); padding:34px; border-radius:3px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); position:relative}
form.lead-form .fc{position:absolute; right:0; bottom:0; width:26px;height:26px; background:var(--blue); clip-path:polygon(100% 0,100% 100%,0 100%)}
.field{margin-bottom:18px}
.field label{display:block; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.08em; color:#5a6675; text-transform:uppercase; margin-bottom:8px}
.field input,.field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--bd-strong); border-radius:2px; background:var(--paper);
  font-family:'Inter'; font-size:15.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,255,.14); background:#fff}
.field textarea{resize:vertical; min-height:120px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form.lead-form button{width:100%; justify-content:center; padding:15px; margin-top:6px}
.form-note{font-size:12.5px; color:var(--muted); margin-top:14px; text-align:center}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-2); color:#aebbcf; padding:64px 0 30px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand .tile{display:inline-block; background:#fff; padding:14px 18px; border-radius:3px}
.foot-brand .tile img{height:30px; display:block}
.foot-brand p{margin:20px 0 0; font-size:14.5px; color:#8696ad; max-width:300px; line-height:1.6}
.foot-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; color:#6f8099; text-transform:uppercase; margin:0 0 16px; font-weight:500}
.foot-col a{display:block; font-size:14.5px; color:#aebbcf; margin-bottom:11px; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px}
.foot-bot .tag{font-family:'Space Grotesk'; font-weight:500; font-size:13.5px; letter-spacing:.04em; color:#7e8fa7}
.foot-bot .tag b{color:var(--blue-bright); font-weight:500}
.foot-bot .cp{font-size:13px; color:#6f8099}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}.rv.d4{transition-delay:.24s}.rv.d5{transition-delay:.3s}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr; gap:44px}
  .hero-art{max-width:420px}
  .cards{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr; gap:38px 24px}
  .approach{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--bd)}
  .step:last-child{border-bottom:0}
  .why-grid,.contact-grid{grid-template-columns:1fr; gap:36px}
  .why-aside{position:static}
  .foot-top{grid-template-columns:1fr 1fr; gap:34px}
}
@media(max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav .links{display:none}
  .nav .links.open{display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--bd); padding:8px 20px 18px}
  .nav .links.open a{padding:12px 0; border-bottom:1px solid var(--bd)}
  .nav .links.open .btn{margin-top:12px; justify-content:center}
  .nav-toggle{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
  .nav-toggle span{width:24px;height:2px;background:var(--ink);display:block; transition:.3s}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .section{padding:74px 0}
  .two{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .hero h1 .ln>span{transform:none}
  .rv{opacity:1; transform:none}
  .marquee .track{animation:none}
}