/*
Theme Name: Taknik Webwares
Theme URI: https://takniks.com/
Author: Taknik Webwares Pvt Limited
Description: Minimal block theme for Taknik Webwares with editable header, footer, pages, marketing services, AI automation and software engineering.
Version: 4.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: taknik-webwares
*/

:root{
  --taknik-blue:#002190;
  --taknik-blue-2:#123fb6;
  --taknik-deep:#07142f;
  --taknik-ink:#172033;
  --taknik-text:#49566c;
  --taknik-soft:#f5f7fb;
  --taknik-line:#e4e9f0;
  --taknik-white:#ffffff;
  --taknik-green:#127c5a;
  --taknik-radius:14px;
  --taknik-shadow:0 18px 55px rgba(7,20,47,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--taknik-ink);font-family:"Poppins",Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--taknik-blue);text-decoration:none}
a:hover{color:#00176a}
img{max-width:100%;height:auto}
.taknik-shell{max-width:1180px;margin:0 auto;padding:0 24px}
.taknik-section{padding:84px 0}
.taknik-section-sm{padding:58px 0}
.taknik-soft{background:var(--taknik-soft)}
.taknik-dark{background:var(--taknik-deep);color:#fff}
.taknik-kicker{margin:0 0 10px;color:var(--taknik-blue);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.taknik-dark .taknik-kicker{color:#8fa7ff}
.taknik-heading{margin:0 0 18px;font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.08;letter-spacing:-.045em;color:var(--taknik-deep)}
.taknik-dark .taknik-heading{color:#fff}
.taknik-lead{max-width:820px;color:var(--taknik-text);font-size:1.05rem;margin:0}
.taknik-dark .taknik-lead{color:#c5d0df}
.taknik-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:8px;border:1px solid var(--taknik-blue);background:var(--taknik-blue);color:#fff!important;font-size:.9rem;font-weight:600;transition:.2s ease}
.taknik-btn:hover{background:#00176a;border-color:#00176a;transform:translateY(-1px)}
.taknik-btn-outline{background:#fff;color:var(--taknik-blue)!important}
.taknik-btn-outline:hover{background:#f4f6fb;color:#00176a!important}

/* Header and block navigation */
.wp-site-blocks{padding:0}
.taknik-header-wrap{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.98);border-bottom:1px solid var(--taknik-line)}
.taknik-header{max-width:1180px;margin:0 auto;padding:15px 24px;min-height:76px}
.taknik-header .wp-block-site-logo img{max-height:48px;width:auto!important}
.taknik-header .wp-block-navigation{font-size:.9rem;font-weight:500}
.taknik-header .wp-block-navigation a{color:#263247}
.taknik-header .wp-block-navigation a:hover{color:var(--taknik-blue)}
.taknik-header .wp-block-button__link{border-radius:7px!important;padding:11px 17px!important;font-size:.86rem!important;font-weight:600!important}

/* Hero */
.taknik-hero{padding:92px 0 78px;background:#fff;overflow:hidden}
.taknik-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center}
.taknik-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--taknik-blue);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.taknik-eyebrow:before{content:"";width:32px;height:2px;background:var(--taknik-blue)}
.taknik-hero h1{font-size:clamp(3rem,5.6vw,5.6rem);line-height:1.01;letter-spacing:-.058em;color:var(--taknik-deep);margin:16px 0 22px;max-width:820px}
.taknik-hero h1 span{color:var(--taknik-blue)}
.taknik-hero p{font-size:1.08rem;color:var(--taknik-text);max-width:750px;margin:0 0 28px}
.taknik-actions{display:flex;gap:12px;flex-wrap:wrap}
.taknik-proofline{margin-top:26px!important;font-size:.84rem!important;color:#6a7688!important}
.taknik-hero-panel{position:relative;border:1px solid var(--taknik-line);border-radius:18px;padding:28px;background:var(--taknik-soft);box-shadow:var(--taknik-shadow)}
.taknik-hero-panel:before{content:"";position:absolute;left:0;top:34px;bottom:34px;width:4px;background:var(--taknik-blue);border-radius:0 4px 4px 0}
.taknik-system-title{font-size:.77rem;text-transform:uppercase;letter-spacing:.1em;color:#65738a;font-weight:700;margin-bottom:18px}
.taknik-system{display:grid;gap:10px}
.taknik-system-row{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--taknik-line);padding:14px;border-radius:10px}
.taknik-system-row b{font-size:.9rem;color:var(--taknik-deep)}
.taknik-system-row span{font-size:.75rem;color:#6d7889}
.taknik-system-num{width:28px;height:28px;border-radius:50%;background:#eef2ff;color:var(--taknik-blue);display:grid;place-items:center;font-weight:700;font-size:.76rem}
.taknik-system-status{color:var(--taknik-green)!important;font-weight:700!important}

/* service and card grids */
.taknik-intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.taknik-sticky{position:sticky;top:110px}
.taknik-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.taknik-card{background:#fff;border:1px solid var(--taknik-line);border-radius:12px;padding:24px;min-height:220px;transition:.2s ease}
.taknik-card:hover{border-color:#bac7dd;box-shadow:0 12px 35px rgba(7,20,47,.06);transform:translateY(-2px)}
.taknik-card .num{display:block;font-size:.72rem;font-weight:700;color:var(--taknik-blue);letter-spacing:.1em;margin-bottom:24px}
.taknik-card h3{margin:0 0 8px;color:var(--taknik-deep);font-size:1.08rem;line-height:1.35}
.taknik-card p{margin:0;color:var(--taknik-text);font-size:.89rem;line-height:1.65}
.taknik-card small{display:block;margin-top:12px;color:#65728a;font-size:.76rem;font-weight:600}

/* AI services */
.taknik-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.taknik-ai-card{border:1px solid #2a3958;background:#0c1b38;border-radius:12px;padding:24px;min-height:228px}
.taknik-ai-card .tag{font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:#8fa7ff;font-weight:700}
.taknik-ai-card h3{color:#fff;margin:13px 0 8px;font-size:1.02rem;line-height:1.35}
.taknik-ai-card p{color:#b9c6d9;font-size:.86rem;margin:0;line-height:1.65}

/* Engineering */
.taknik-engineering{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.taknik-logo-card{background:#fff;border:1px solid var(--taknik-line);border-radius:16px;padding:36px;box-shadow:var(--taknik-shadow)}
.taknik-logo-card img{width:100%;max-width:460px;display:block;margin:0 auto 28px}
.taknik-stack{display:flex;flex-wrap:wrap;gap:8px}
.taknik-stack span{border:1px solid var(--taknik-line);border-radius:6px;background:#fff;padding:8px 11px;font-size:.78rem;font-weight:600;color:#425168}

/* Industries */
.taknik-industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--taknik-line);border:1px solid var(--taknik-line);border-radius:14px;overflow:hidden;margin-top:36px}
.taknik-industry{background:#fff;padding:25px;min-height:190px}
.taknik-industry h3{font-size:1rem;color:var(--taknik-deep);margin:0 0 8px}
.taknik-industry p{font-size:.86rem;color:var(--taknik-text);margin:0}
.taknik-industry b{display:block;margin-top:12px;color:var(--taknik-blue);font-size:.76rem}

/* Future ready */
.taknik-future-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.taknik-future-list{border-top:1px solid #33415e}
.taknik-future-item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid #33415e}
.taknik-future-item strong{color:#fff;font-size:.94rem}
.taknik-future-item span{display:block;color:#b8c5d8;font-size:.83rem;margin-top:3px}
.taknik-future-no{color:#8fa7ff;font-weight:700;font-size:.78rem}

/* Pakistan / SEO */
.taknik-seo-box{display:grid;grid-template-columns:1fr .9fr;gap:42px;border:1px solid var(--taknik-line);border-radius:16px;padding:36px;background:#fff}
.taknik-query-list{display:grid;gap:9px}
.taknik-query{padding:12px 14px;background:var(--taknik-soft);border-left:3px solid var(--taknik-blue);font-size:.84rem;color:#35445a;font-weight:500}

/* FAQ */
.taknik-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.taknik-faq-item{border:1px solid var(--taknik-line);border-radius:10px;padding:22px;background:#fff}
.taknik-faq-item h3{font-size:.95rem;line-height:1.45;color:var(--taknik-deep);margin:0 0 8px}
.taknik-faq-item p{font-size:.85rem;color:var(--taknik-text);margin:0}

/* About / contact */
.taknik-page-hero{padding:76px 0 58px;background:var(--taknik-soft);border-bottom:1px solid var(--taknik-line)}
.taknik-page-hero h1{font-size:clamp(2.7rem,5vw,4.8rem);line-height:1.04;letter-spacing:-.05em;color:var(--taknik-deep);margin:8px 0 15px}
.taknik-page-hero p{max-width:800px;color:var(--taknik-text);font-size:1.03rem;margin:0}
.taknik-about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.taknik-principles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--taknik-line);border-left:1px solid var(--taknik-line)}
.taknik-principle{padding:24px;border-right:1px solid var(--taknik-line);border-bottom:1px solid var(--taknik-line)}
.taknik-principle h3{font-size:1rem;margin:0 0 8px;color:var(--taknik-deep)}
.taknik-principle p{font-size:.86rem;color:var(--taknik-text);margin:0}
.taknik-contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;align-items:start}
.taknik-contact-side{background:var(--taknik-deep);border-radius:14px;color:#fff;padding:30px}
.taknik-contact-side h2{font-size:1.8rem;line-height:1.25;margin:0 0 10px}
.taknik-contact-side p{color:#becbdd;font-size:.9rem}
.taknik-contact-line{border-top:1px solid #33415e;padding:17px 0}
.taknik-contact-line small{display:block;color:#91a7ca;text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.67rem;margin-bottom:4px}
.taknik-contact-line a{color:#fff;font-size:.9rem}
.contact-form{background:#fff;border:1px solid var(--taknik-line);border-radius:14px;padding:30px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field.full{grid-column:1/-1}
.field label{display:block;margin-bottom:6px;font-size:.76rem;font-weight:600;color:#34435a}
.field input,.field select,.field textarea{width:100%;border:1px solid #ccd4df;border-radius:7px;background:#fff;color:var(--taknik-ink);padding:12px 13px;font:inherit;font-size:.9rem;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--taknik-blue);box-shadow:0 0 0 3px rgba(0,33,144,.08)}
.field textarea{min-height:155px;resize:vertical}
.form-note{font-size:.74rem;color:#798598;margin-top:9px}
.form-success,.form-error{padding:12px 14px;border-radius:7px;margin-bottom:16px;font-size:.86rem}
.form-success{background:#effaf5;border:1px solid #b6dfcd;color:#206448}
.form-error{background:#fff2f2;border:1px solid #efc3c3;color:#842d2d}

/* CTA */
.taknik-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--taknik-line);border-radius:14px;padding:38px;background:var(--taknik-soft)}
.taknik-cta h2{margin:0 0 7px;color:var(--taknik-deep);font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2}
.taknik-cta p{margin:0;color:var(--taknik-text);max-width:700px}

/* Footer */
.taknik-footer-wrap{background:#f7f8fb;border-top:1px solid var(--taknik-line);padding:58px 0 22px}
.taknik-footer{max-width:1180px;margin:0 auto;padding:0 24px}
.taknik-footer .wp-block-site-logo img{max-width:170px;height:auto!important}
.taknik-footer p{font-size:.84rem;color:#5d6a7d}
.taknik-footer h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--taknik-deep);margin-bottom:12px}
.taknik-footer a{font-size:.84rem;color:#4b586c}
.taknik-footer a:hover{color:var(--taknik-blue)}
.taknik-footer-bottom{border-top:1px solid var(--taknik-line);margin-top:28px;padding-top:18px;font-size:.75rem;color:#7a8595}

@media(max-width:1000px){
  .taknik-hero-grid,.taknik-intro-grid,.taknik-engineering,.taknik-future-grid,.taknik-seo-box,.taknik-about-grid,.taknik-contact-grid{grid-template-columns:1fr}
  .taknik-sticky{position:static}
  .taknik-ai-grid,.taknik-industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .taknik-section{padding:62px 0}.taknik-section-sm{padding:46px 0}.taknik-shell{padding:0 18px}.taknik-header{padding:12px 18px}.taknik-hero{padding:64px 0 56px}.taknik-hero-grid{gap:36px}.taknik-hero h1{font-size:clamp(2.6rem,13vw,4rem)}
  .taknik-card-grid,.taknik-ai-grid,.taknik-industry-grid,.taknik-faq,.taknik-principles,.form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}.taknik-cta{align-items:flex-start;flex-direction:column;padding:28px}.taknik-industry-grid{gap:1px}.taknik-header .wp-block-site-logo img{max-height:42px}
}
