/*
Theme Name: Granpai.com
Theme URI: https://granpai.com
Author: Granpai
Author URI: https://granpai.com
Description: Lightweight, hand-coded starter theme for Granpai.com, built around the "Blueprint" design system (selection-bracket motif, paper + navy palette, signal orange accent). No page builders, no unnecessary JS, optimized for fast loading and full mobile responsiveness.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: granpai
*/

/* ==========================================================
   TABLE OF CONTENTS
   1. Reset & base
   2. Design tokens
   3. Typography
   4. Layout utilities
   5. Buttons
   6. Bracket / corner signature component
   7. Header / navigation
   8. Hero (homepage)
   9. Trust bar / stats
   10. Cards / grids
   11. Process steps
   12. Platforms row
   13. Testimonial
   14. Final CTA banner
   15. Footer
   16. Sub-page hero / split-text / callout
   17. Check list
   18. Pricing table
   19. FAQ (details/summary)
   20. Portfolio
   21. Contact form
   22. Mobile refinements (performance + responsive polish)
   ========================================================== */


/* ============================================
   GRANPAI DESIGN SYSTEM
   Concept: "Blueprint" — the site borrows the visual
   language of design tools themselves (selection
   brackets, spec annotations, draft-to-final framing)
   to literally embody "we take your AI design and
   build it into something real."
   ============================================ */

:root{
  --paper:#F7F4EC;
  --paper-dim:#ECE7D8;
  --ink:#1A1D24;
  --ink-soft:#5B5F6B;
  --blueprint:#141E33;
  --blueprint-deep:#0B121F;
  --cloud:#C7CCD9;
  --cloud-soft:#8A92A6;
  --signal:#FF5A1F;
  --signal-dim:#D94A16;
  --thread:#5C7FB0;
  --line:rgba(26,29,36,0.12);
  --line-dark:rgba(255,255,255,0.14);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --container:1180px;
  --radius:3px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-0.02em;}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.2rem;}
p{color:var(--ink-soft);}
.section--dark p{color:var(--cloud);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;
  background:var(--signal);
  display:inline-block;
}
.custom-logo{width:200px!important;height:auto;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.section{padding:104px 0;}
.section--tight{padding:72px 0;}
.section--dark{background:var(--blueprint);color:var(--cloud);}
.section--dim{background:var(--paper-dim);}

.lead{font-size:1.15rem;max-width:640px;color:var(--ink-soft);}
.section--dark .lead{color:var(--cloud);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:14px 28px;
  border-radius:var(--radius);
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.btn-primary{background:var(--signal);color:#fff;}
.btn-primary:hover{background:var(--signal-dim);transform:translateY(-1px);}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-secondary:hover{border-color:var(--signal);color:var(--signal);}
.section--dark .btn-secondary{border-color:var(--cloud);color:var(--cloud);}
.section--dark .btn-secondary:hover{border-color:var(--signal);color:var(--signal);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}

/* ---------- Bracket / corner signature ---------- */
.bracketed{position:relative;}
.corner{position:absolute;width:18px;height:18px;pointer-events:none;}
.corner-tl{top:-1px;left:-1px;border-top:2px solid var(--signal);border-left:2px solid var(--signal);}
.corner-tr{top:-1px;right:-1px;border-top:2px solid var(--signal);border-right:2px solid var(--signal);}
.corner-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--signal);border-left:2px solid var(--signal);}
.corner-br{bottom:-1px;right:-1px;border-bottom:2px solid var(--signal);border-right:2px solid var(--signal);}
.corner{opacity:1;transition:opacity .2s ease, width .2s ease, height .2s ease;}
.bracket-on-hover .corner{opacity:0;}
.bracket-on-hover:hover .corner{opacity:1;width:22px;height:22px;}

/* ---------- Header / nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--container);margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-family:var(--font-mono);
  font-weight:500;font-size:1.05rem;letter-spacing:-0.01em;
}
.logo span{color:var(--signal);}
nav.primary-nav ul{display:flex;gap:34px;align-items:center;}
nav.primary-nav a{
  font-size:0.92rem;font-weight:500;color:var(--ink-soft);
  position:relative;padding:4px 0;transition:color .2s ease;
}
nav.primary-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--signal);transition:width .2s ease;
}
nav.primary-nav a:hover,nav.primary-nav a.current,nav.primary-nav .current-menu-item>a{color:var(--ink);}
nav.primary-nav a:hover::after,nav.primary-nav a.current::after,nav.primary-nav .current-menu-item>a::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:24px;}
.nav-cta{display:none;}
@media (min-width:880px){.nav-cta{display:inline-flex;}}

.menu-toggle{display:none;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:60;}
.hamburger span{width:24px;height:2px;background:var(--ink);display:block;}

@media (max-width:879px){
  nav.primary-nav{
    position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;
    background:var(--paper);
    box-shadow:-12px 0 30px rgba(0,0,0,0.12);
    padding:100px 32px 40px;
    transform:translateX(100%);
    transition:transform .3s ease;
    min-height:100vh;
  }
  nav.primary-nav ul{flex-direction:column;align-items:flex-start;gap:26px;}
  .hamburger{display:flex;}
  .menu-toggle:checked ~ nav.primary-nav{transform:translateX(0);}
  .nav-overlay{position:fixed;inset:0;background:rgba(11,18,31,0.4);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40;}
  .menu-toggle:checked ~ .nav-overlay{opacity:1;pointer-events:auto;}
}

/* ---------- Hero ---------- */
.hero{padding:88px 0 60px;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr 0.95fr;}}
.hero h1{margin-bottom:22px;}
.hero-note{
  margin-top:28px;font-family:var(--font-mono);font-size:0.82rem;color:var(--ink-soft);
}

.hero-visual{
  position:relative;background:var(--blueprint);border-radius:6px;
  padding:22px;color:var(--cloud);
  animation:frameIn .6s ease both;
}
@keyframes frameIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion:reduce){.hero-visual{animation:none;}}

.browser-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.browser-dot{width:8px;height:8px;border-radius:50%;background:var(--cloud-soft);opacity:.5;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.split-panel{padding:18px;border-radius:4px;min-height:230px;}
.split-panel.draft{
  border:1.5px dashed var(--cloud-soft);
}
.split-panel.live{
  background:#1B2740;border:1px solid var(--line-dark);
}
.panel-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cloud-soft);margin-bottom:14px;display:block;}
.sketch-line{height:8px;border:1.5px dashed var(--cloud-soft);border-radius:2px;margin-bottom:10px;opacity:.7;}
.sketch-line.w70{width:70%;} .sketch-line.w90{width:90%;} .sketch-line.w50{width:50%;}
.solid-line{height:8px;background:var(--thread);border-radius:2px;margin-bottom:10px;opacity:.85;}
.solid-line.w70{width:70%;} .solid-line.w90{width:90%;} .solid-line.w40{width:40%;background:var(--signal);}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.chip{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:.04em;
  border:1px solid var(--line-dark);color:var(--cloud);
  padding:6px 10px;border-radius:20px;
}
.chip strong{color:var(--signal);}

/* ---------- Trust bar ---------- */
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
@media (min-width:760px){.stat-row{grid-template-columns:repeat(4,1fr);}}
.stat{border-top:1px solid var(--line);padding-top:18px;}
.section--dark .stat{border-top:1px solid var(--line-dark);}
.stat .num{font-family:var(--font-display);font-size:2.2rem;font-weight:600;color:var(--ink);}
.section--dark .stat .num{color:#fff;}
.stat .label{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);margin-top:6px;}
.section--dark .stat .label{color:var(--cloud);}

/* ---------- Grid / cards ---------- */
.head-row{display:flex;flex-direction:column;gap:14px;margin-bottom:56px;max-width:680px;}
.grid-4{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:700px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.grid-4{grid-template-columns:repeat(4,1fr);}}
.grid-2{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr);}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;position:relative;transition:border-color .2s ease, transform .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--signal);}
.card .tag{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--thread);margin-bottom:14px;display:block;
}
.card h3{margin-bottom:10px;}
.card p{font-size:0.95rem;}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:0;}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{padding:28px 22px;border-top:1px solid var(--line-dark);position:relative;}
.section--dark .step{border-top:1px solid var(--line-dark);}
.step .step-num{font-family:var(--font-mono);font-size:0.85rem;color:var(--signal);display:block;margin-bottom:14px;}
.step h3{color:#fff;margin-bottom:10px;font-size:1.1rem;}
.step p{font-size:0.92rem;}

/* ---------- Platforms row ---------- */
.platform-row{
  display:flex;flex-wrap:wrap;gap:16px 36px;align-items:center;
  padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.platform-row span{
  font-family:var(--font-mono);font-size:1.05rem;color:var(--ink-soft);
}

/* ---------- Testimonial ---------- */
.quote-block{max-width:760px;margin:0 auto;text-align:center;}
.quote-block blockquote{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.8rem);
  font-weight:500;line-height:1.4;color:var(--ink);margin-bottom:24px;
}
.quote-block cite{font-family:var(--font-mono);font-size:0.85rem;color:var(--ink-soft);font-style:normal;}

/* ---------- Final CTA ---------- */
.cta-banner{
  text-align:center;background:var(--blueprint);color:#fff;border-radius:6px;
  padding:64px 32px;position:relative;overflow:hidden;
}
.cta-banner h2{color:#fff;margin-bottom:16px;}
.cta-banner p{color:var(--cloud);max-width:520px;margin:0 auto 28px;}

/* ---------- Footer ---------- */
footer{background:var(--blueprint-deep);color:var(--cloud);padding:72px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:56px;}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-grid h4{color:#fff;font-size:0.85rem;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid a{color:var(--cloud-soft);font-size:0.92rem;transition:color .2s ease;}
.footer-grid a:hover{color:var(--signal);}
.footer-logo{font-family:var(--font-mono);font-size:1.1rem;color:#fff;margin-bottom:14px;display:block;}
.footer-logo span{color:var(--signal);}
.footer-tag{font-size:0.92rem;max-width:280px;color:var(--cloud-soft);}
.footer-bottom{
  border-top:1px solid var(--line-dark);padding-top:24px;
  display:flex;flex-direction:column;gap:10px;justify-content:space-between;
  font-family:var(--font-mono);font-size:0.75rem;color:var(--cloud-soft);
}
@media (min-width:700px){.footer-bottom{flex-direction:row;align-items:center;}}

/* utility */
.text-center{text-align:center;margin-left:auto;margin-right:auto;}
.mt-sm{margin-top:14px;}

/* ---------- Sub-page hero ---------- */
.page-hero{padding:84px 0 56px;border-bottom:1px solid var(--line);}
.page-hero .lead{margin-top:16px;}
.page-hero .btn-row{margin-top:30px;}

/* ---------- Split text + callout ---------- */
.split-text{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;}
@media (min-width:880px){.split-text{grid-template-columns:1.3fr 0.9fr;}}
.callout{background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);padding:30px;}
.section--dark .callout{background:#1B2740;border-color:var(--line-dark);}
.callout h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:12px;}
.callout p{font-size:0.92rem;}

/* ---------- Check list ---------- */
.check-list{display:flex;flex-direction:column;gap:14px;margin-top:24px;}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.96rem;color:var(--ink-soft);}
.check-list li::before{content:"✓";color:var(--signal);font-family:var(--font-mono);font-weight:600;flex-shrink:0;}

/* ---------- Values / numbered (legit sequence not required here, plain cards) ---------- */
.value-card .tag{color:var(--signal);}

/* ---------- Pricing table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);padding:6px 26px;background:var(--paper);}
.price-table{width:100%;border-collapse:collapse;}
.price-table th,.price-table td{padding:18px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:0.95rem;}
.price-table th{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;border-bottom:2px solid var(--ink);}
.price-table tr:last-child td{border-bottom:none;}
.price-table td:last-child,.price-table th:last-child{font-family:var(--font-mono);color:var(--signal);font-weight:500;}
.table-note{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-soft);margin-top:18px;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);margin-top:8px;}
.section--dark .faq-list{border-top:1px solid var(--line-dark);}
.faq-item{border-bottom:1px solid var(--line);}
.section--dark .faq-item{border-bottom:1px solid var(--line-dark);}
.faq-item summary{padding:22px 0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;list-style:none;color:var(--ink);}
.section--dark .faq-item summary{color:#fff;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:1.4rem;color:var(--signal);transition:transform .2s ease;margin-left:16px;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 0 22px;max-width:680px;font-size:0.95rem;}

/* ---------- Steps without dark wrap (used standalone on Pricing) ---------- */
.steps-light{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:760px){.steps-light{grid-template-columns:repeat(3,1fr);}}
.steps-light .step{border-top:2px solid var(--ink);padding:24px 0 0;}
.steps-light .step-num{color:var(--signal);}
.steps-light h3{color:var(--ink);}
.steps-light p{color:var(--ink-soft);}

/* ---------- Portfolio ---------- */
.filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.filter-btn{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:.04em;padding:9px 18px;border:1px solid var(--line);border-radius:20px;color:var(--ink-soft);cursor:pointer;background:transparent;transition:all .2s ease;}
.filter-btn.active,.filter-btn:hover{border-color:var(--signal);color:var(--signal);}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media (min-width:700px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
.portfolio-thumb{aspect-ratio:4/3;background:var(--blueprint);border-radius:var(--radius);position:relative;overflow:hidden;margin-bottom:18px;padding:18px;}
.portfolio-thumb .split{height:100%;}
.portfolio-thumb .split-panel{min-height:0;}
.portfolio-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.portfolio-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.portfolio-tags span{font-family:var(--font-mono);font-size:0.66rem;color:var(--thread);border:1px solid var(--line);padding:4px 9px;border-radius:14px;}
.portfolio-card a.view-link{font-family:var(--font-mono);font-size:0.82rem;color:var(--signal);white-space:nowrap;flex-shrink:0;}
.portfolio-card p{font-size:0.92rem;margin-top:6px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:56px;}
@media (min-width:920px){.contact-grid{grid-template-columns:1.15fr 0.85fr;}}
.form-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr;}}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.form-field input,.form-field select,.form-field textarea{font-family:var(--font-body);font-size:0.95rem;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);transition:border-color .2s ease;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--signal);}
.form-field textarea{min-height:140px;resize:vertical;font-family:var(--font-body);}
.form-note{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-soft);margin-top:20px;}
.contact-card{background:var(--blueprint);color:#fff;border-radius:6px;padding:36px;height:fit-content;}
.contact-card h4{color:#fff;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;}
.contact-card .info-row{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-dark);font-size:0.95rem;}
.contact-card .info-row:last-child{border-bottom:none;}
.contact-card .info-row span:first-child{color:var(--cloud-soft);}
.contact-card .info-row a{color:#fff;}
.contact-card .info-row a:hover{color:var(--signal);}



/* ==========================================================
   22. MOBILE REFINEMENTS
   Extra breakpoints layered on top of the component rules
   above — tightens spacing and simplifies layout on small
   screens for a faster, less cramped mobile experience.
   ========================================================== */

@media (max-width: 600px){
  .section{padding:64px 0;}
  .section--tight{padding:48px 0;}
  .hero{padding:48px 0 32px;}
  .page-hero{padding:56px 0 36px;}
  .cta-banner{padding:48px 22px;}
  .head-row{margin-bottom:36px;}
  .btn{padding:13px 22px;font-size:0.9rem;}
}

/* Stack the AI-draft / live-build split panels on narrow
   screens so each panel keeps enough room to breathe
   (affects the homepage hero visual and portfolio thumbnails) */
@media (max-width: 520px){
  .split{grid-template-columns:1fr;}
  .split-panel{min-height:0;padding:16px;}
  .portfolio-thumb .split-panel{min-height:90px;}
}

/* Comfortable tap targets on touch devices */
@media (max-width: 879px){
  nav.primary-nav a{display:block;padding:10px 0;font-size:1rem;}
  .hamburger{padding:10px;margin:-10px;}
}

/* Avoid horizontal scroll on very small phones */
@media (max-width: 380px){
  .container{padding:0 18px;}
  .stat-row{grid-template-columns:1fr 1fr;gap:20px;}
  h1{font-size:2.1rem;}
}